<!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="width: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>
