对于combo组件,作者自身就提供了disable和enable方法来禁用组件,不过他这里的禁用是把整个组件禁用了,而有时候我们为了限制用户行为,并不需要禁用整个combo组件,只要不让用户自己改变combo组件输入框部分的值就可以了。话不多说了,直接上扩展代码:
实现代码:
- $.extend($.fn.combo.methods, {
- /**
- * 禁用combo文本域
- * @param {Object} jq
- * @param {Object} param stopArrowFocus:是否阻止点击下拉按钮时foucs文本域
- * stoptype:禁用类型,包含disable和readOnly两种方式
- */
- disableTextbox : function(jq, param) {
- return jq.each(function() {
- param = param || {};
- var textbox = $(this).combo("textbox");
- var that = this;
- var panel = $(this).combo("panel");
- var data = $(this).data('combo');
- if (param.stopArrowFocus) {
- data.stopArrowFocus = param.stopArrowFocus;
- var arrowbox = $.data(this, 'combo').combo.find('span.combo-arrow');
- arrowbox.unbind('click.combo').bind('click.combo', function() {
- if (panel.is(":visible")) {
- $(that).combo('hidePanel');
- } else {
- $("div.combo-panel").panel("close");
- $(that).combo('showPanel');
- }
- });
- textbox.unbind('mousedown.mycombo').bind('mousedown.mycombo', function(e) {
- e.preventDefault();
- });
- }
- textbox.prop(param.stoptype?param.stoptype:'disabled', true);
- data.stoptype = param.stoptype?param.stoptype:'disabled';
- });
- },
- /**
- * 还原文本域
- * @param {Object} jq
- */
- enableTextbox : function(jq) {
- return jq.each(function() {
- var textbox = $(this).combo("textbox");
- var data = $(this).data('combo');
- if (data.stopArrowFocus) {
- var that = this;
- var panel = $(this).combo("panel");
- var arrowbox = $.data(this, 'combo').combo.find('span.combo-arrow');
- arrowbox.unbind('click.combo').bind('click.combo', function() {
- if (panel.is(":visible")) {
- $(that).combo('hidePanel');
- } else {
- $("div.combo-panel").panel("close");
- $(that).combo('showPanel');
- }
- textbox.focus();
- });
- textbox.unbind('mousedown.mycombo');
- data.stopArrowFocus = null;
- }
- textbox.prop(data.stoptype, false);
- data.stoptype = null;
- });
- }
- });
使用方式:
在引入easyui的核心库后,引入本扩展的实现代码,这个地方,拿datebox和combobox做例子,因为datebox依赖combo,也继承combo的方法,所以datebox可以直接使用本文扩展的方法:
- //datebox
- $('#dd').datebox('disableTextbox',{stoptype:'readonly',stopArrowFocus:true});
- //combobox
- $('#cc,#cc2').combobox('disableTextbox',{stoptype:'readOnly',stopArrowFocus:true});
效果演示:
datebox:http://www.easyui.info/easyui/demo/datebox/061.html
combobox:http://www.easyui.info/easyui/demo/combobox/061.html
更新日志:
2012-12-26:
增加参数用于设置如何禁用输入框,分为readonly和disabled两种方式
disableTextbox函数入参介绍:
Name | Type | Description | Default |
---|---|---|---|
stoptype | string | 禁用text的方式,可以为'disabled'或者'readonly'. | disabled |
stopArrowFocus | boolean | 为true的话,下拉面板显示的时候,将不会把焦点放到输入框上. | false |
管理员 世纪之光 : 2012年08月03日15:12:48 -48楼
管理员 世纪之光 : 2012年08月04日13:58:26 -46楼
管理员 世纪之光 : 2012年09月08日16:09:16 地下1层
管理员 世纪之光 : 2012年09月11日11:48:38 地下3层
管理员 世纪之光 : 2012年10月19日14:49:16 地下1层
管理员 世纪之光 : 2013年08月25日22:45:26 地下1层
管理员 世纪之光 : 2015年08月13日10:23:42 地下1层