easyui combobox禁用隐藏箭头示例

  本示例扩展了easyui combobox方法setComboboxState,调用setComboboxState方法后(传递true)可以禁用combobox(调用combobox内置的disable方法),同时隐藏右侧的箭头图标,调整显示的textbox占用原来箭头的位置。传递false启用combobox,同时显示箭头并还原textbox长度,效果如下



easyui combobox禁用隐藏箭头示例
combobox禁用状态效果

easyui 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禁用隐藏箭头示例

评论(0)Web开发网
阅读(415)喜欢(1)不喜欢(0)easyui开发技巧