<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>combo扩展之disableTextbox - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../../themes/icon.css"> <link rel="stylesheet" type="text/css" href="../demo.css"> <script type="text/javascript" src="../../jquery-1.8.0.min.js"></script> <script type="text/javascript" src="../../jquery.easyui.min.js"></script> <script> $.extend($.fn.combo.methods, { /** * 禁用combo文本域 * @param {Object} jq * @param {Object} param stopArrowFocus:是否阻止点击下拉按钮时foucs文本域 * activeTextArrow:是否激活点击文本域也显示下拉列表 * 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(); }); } if (param.activeTextArrow) { data.activeTextArrow = param.activeTextArrow; textbox.bind('click.mycombo', function(){ if (panel.is(":visible")) { $(that).combo('hidePanel'); } else { $("div.combo-panel").panel("close"); $(that).combo('showPanel'); } }); } 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; } if (data.activeTextArrow) { textbox.unbind('click.mycombo'); data.activeTextArrow = null; } textbox.prop(data.stoptype, false); data.stoptype = null; }); } }); function disable(){ $('#cc').combobox('disable'); } function enable(){ $('#cc').combobox('enable'); } function disableText(){ $('#cc,#cc2').combobox('disableTextbox',{stoptype:'readOnly',activeTextArrow:true,stopArrowFocus:true}); } function enableText(){ $('#cc,#cc2').combobox('enableTextbox'); } </script> </head> <body> <h2>ComboBox</h2> <div class="demo-info"> <div class="demo-tip icon-tip"></div> <div>大家可以比较combo自带的disable方法和我们扩展的disableText方法功能上有什么不同.</div> </div> <div style="margin:10px 0;"> <a href="#" class="easyui-linkbutton" onclick="disable()">Disable</a> <a href="#" class="easyui-linkbutton" onclick="enable()">Enable</a> <a href="#" class="easyui-linkbutton" onclick="disableText()">disableText</a> <a href="#" class="easyui-linkbutton" onclick="enableText()">enableText</a> </div> <p>Simple ComboBox: </p> <select id="cc" class="easyui-combobox" name="state" style="200px;" data-options="required:true"> <option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option> <option value="AR">Arkansas</option> <option value="CA">California</option> <option value="CO">Colorado</option> <option value="CT">Connecticut</option> <option value="DE">Delaware</option> <option value="FL">Florida</option> <option value="GA">Georgia</option> <option value="HI">Hawaii</option> <option value="ID">Idaho</option> <option value="IL">Illinois</option> <option value="IN">Indiana</option> <option value="IA">Iowa</option> <option value="KS">Kansas</option> <option value="KY">Kentucky</option> <option value="LA">Louisiana</option> <option value="ME">Maine</option> <option value="MD">Maryland</option> <option value="MA">Massachusetts</option> <option value="MI">Michigan</option> <option value="MN">Minnesota</option> <option value="MS">Mississippi</option> <option value="MO">Missouri</option> <option value="MT">Montana</option> <option value="NE">Nebraska</option> <option value="NV">Nevada</option> <option value="NH">New Hampshire</option> <option value="NJ">New Jersey</option> <option value="NM">New Mexico</option> <option value="NY">New York</option> <option value="NC">North Carolina</option> <option value="ND">North Dakota</option> <option value="OH" selected>Ohio</option> <option value="OK">Oklahoma</option> <option value="OR">Oregon</option> <option value="PA">Pennsylvania</option> <option value="RI">Rhode Island</option> <option value="SC">South Carolina</option> <option value="SD">South Dakota</option> <option value="TN">Tennessee</option> <option value="TX">Texas</option> <option value="UT">Utah</option> <option value="VT">Vermont</option> <option value="VA">Virginia</option> <option value="WA">Washington</option> <option value="WV">West Virginia</option> <option value="WI">Wisconsin</option> <option value="WY">Wyoming</option> </select> <p>Multiple ComboBox: </p> <input class="easyui-combobox" id="cc2" name="language" data-options=" url:'061.json', valueField:'id', textField:'text', multiple:true, panelHeight:'auto' "> </body> </html>