combo扩展:禁止手工改变输入框的值
<!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>
combo扩展:禁止手工改变输入框的值的更多相关文章
- kendo Ui实现搜索选中建议 不改变输入框的值
$("#SubjectFilter").kendoAutoComplete({ dataTextField: "patientCardNumber", temp ...
- MySQL配置文件改变了datadir值
从Noinstall Zip Archive中安装MySQL正在从Noinstall软件包安装MySQL的用户可以使用这个说明来手动安装MySQL.从Zip archive 中安装MySQL的 步骤如 ...
- Python3 tkinter基础 Entry validatecommand 获取输入框的值
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...
- python通过函数改变变量取值
严格讲应该是"通过函数调用,改变引用对象".python中,要区分"变量名"和"对象" 如果是类的对象,是引用类型的,那么可以通过函数调用, ...
- jquery获取、改变元素属性值
//标签的属性称作元素属性,在JS里对应的DOM对象的对应属性叫DOM属性.JS里的DOM属性名有时和原元素属性名不同. //==================================操作元 ...
- 如何引用传递String Boolean 等,并改变他们的值
如何引用传递String Boolean 等,并改变他们的值 采用list, 在存入位置改变list的值 如 list.add(true); list.remove(0); list.add(fals ...
- Swift - 类的计算属性（使用get和set来间接获取/改变其他属性的值）
1,Swift中类可以使用计算属性,即使用get和set来间接获取/改变其他属性的值,代码如下 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 class Calc ...
- C#中的PropertyGrid绑定对象，通过改变某一值而动态设置部分属性的特性
问题:如下,我定义了一个对象,默认设置属性WindowSize ,WindowSize 为不可见,通过改变SaveOnClose的值,动态的改变不可见的属性的显示和隐藏. [DefaultProper ...
- JS获取填报扩展单元格控件的值
1. 问题描述 填报预览时,我们想获取到某个控件的值相对来说较容易.但如果控件是扩展的,就只能获取到第一个值,无法根据扩展一行行获取对应的值. 例:本意是想获取到袁成洁,结果还是获取到第一个单元格值孙 ...
随机推荐
- HDU 2102 A计划(DFS)
题目链接 Problem Description 可怜的公主在一次次被魔王掳走一次次被骑士们救回来之后,而今,不幸的她再一次面临生命的考验.魔王已经发出消息说将在T时刻吃掉公主,因为他听信谣言说吃公主 ...
- Openjudge-计算概论（A）-找和为K的两个元素
描述: 在一个长度为n(n < 1000)的整数序列中,判断是否存在某两个元素之和为k. 输入第一行输入序列的长度n和k,用空格分开.第二行输入序列中的n个整数,用空格分开.输出如果存在某两个元 ...
- 【Loadrunner】初学Loadrunner——IP欺骗
因为在默认情况下,同一个用户用同一个IP访问运行是不符合实际情况的,而且很多网站会自动屏蔽同个IP多次重复访问.那么就想到了Loadrunner的虚拟IP技术,也就是常说的IP欺骗.在用Loadrun ...
- csv格式导出文件
先上传连个图片看看效果,这是界面效果dwz框架(springmvc开发) 点击导出csv效果图 js部分的代码(带条件查询的csv导出): function exportReportCsv(){ ex ...
- Python 学习笔记9
梦想和我只有一层纸的距离. 接着看Python类:http://www.pythondoc.com/pythontutorial3/classes.html
- SQL Server服务开闭
SQL Server(MSSQLSERVER)是必须要开启的,这个是数据库引擎服务,就像汽车的发动机一样. SQL Server代理(MSSQLSERVER)是代理服务,比如你有一些自动运行的,定时作 ...
- vb6加载时提示出错，窗体log文件中错误信息为：控件 XX 的类 MSComctlLib.ListView 不是一个已加载的控件类。
解决办法:单击[工程] -- [部件] 添加此Microsoft Windows Common Controls-6.0 (SP6)部件,如果列表中没有,浏览到~\project\包\Support中 ...
- 从Map、JSONObject取不存在键值对时的异常情况
1.在Map中取不存在的键值对时不会报异常,只会返回null. @Test public void testMap() { Map<String, Object> map = new Ha ...
- Android.mk编译APK范例
以下仅是使用Android.mk编译APK程序的一些范例. 如果你想了解Android.mk的更多内容请参考<Android.mk简介> 一.编译一个简单的APK LOCAL_PAT ...
- OLEDB和ODBC的区别
ODBC(开放数据库互连):是Microsoft引进的一种早期数据库接口技术.它实际上是ADO的前身.早期的数据库连接是非常困难的. 每个数据库的格式都不一样,开发者得对他们所开发的每种数据库的底层A ...