easyui combobox禁用隐藏箭头示例
本示例扩展了easyui combobox方法setComboboxState,调用setComboboxState方法后(传递true)可以禁用combobox(调用combobox内置的disable方法),同时隐藏右侧的箭头图标,调整显示的textbox占用原来箭头的位置。传递false启用combobox,同时显示箭头并还原textbox长度,效果如下
combobox禁用状态效果
combobox启用状态效果
以下代码居于easyui1.4.3修改(jquery-easyui-1.4.3\demo\combobox\basic.html示例),其他版本自己注意修改选择器
<script> function setComboboxState(disable) { $('#sl').combobox('setComboboxState', disable); } $.fn.combobox.methods.setComboboxState = function (jqo, disable) { return jqo.each(function () { var textbox = $(this).combobox(disable ? 'disable' : 'enable').combobox('textbox'); var width = textbox.data('width'), arrowWidth = 18;//注意arrowWidth宽度,是箭头的,不同版本箭头可能不一样,自己注意修改 if (!width) { width = parseInt(textbox.css('width')); textbox.data('width', width) }//缓存原始长度 textbox.prev()[disable ? 'hide' : 'show']();//箭头显示隐藏,注意不同版本箭头相对于显示的输入框的位置,可能需要修改prev方法 textbox.css({ 'margin-right': disable ? 0 : arrowWidth, width: width + (disable ? arrowWidth : 0) });//重置输入框长度 }); } </script> <input type="button" onclick="setComboboxState(true)" value="Disabled" /> <input type="button" onclick="setComboboxState()" value="Enable" /><br /> <select id="sl" class="easyui-combobox" name="state" style="width:200px;"> <option value="AL">Alabama</option> <option value="AK">Alaska</option> <!-----原来的option就不贴出来了-----> </select>
加支付宝好友偷能量挖...
原创文章,转载请注明出处:easyui combobox禁用隐藏箭头示例