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. 问题描述 填报预览时,我们想获取到某个控件的值相对来说较容易.但如果控件是扩展的,就只能获取到第一个值,无法根据扩展一行行获取对应的值. 例:本意是想获取到袁成洁,结果还是获取到第一个单元格值孙 ...
随机推荐
- Weblogic的集群
<收藏自http://www.cnblogs.com/HondaHsu/p/4267972.html> 一.Weblogic的集群 还记得我们在第五天教程中讲到的关于Tomcat的集群吗? ...
- 查找一个数组中最小的前n项
/****************************************************************** find the biggest x number in a s ...
- Yii2.0 多条件搜索 带分页
方法一 在控制器中 ; if($titles!=""){ $where.=" and title lik ...
- 《JavaScript高级程序设计》读书笔记 ---语句
do-while语句do-while 语句是一种后测试循环语句,即只有在循环体中的代码执行之后,才会测试出口条件.换句话说,在对条件表达式求值之前,循环体内的代码至少会被执行一次.以下是do-whil ...
- WinDbg抓取程序报错dump文件的方法
程序崩溃的两种主要现象: a. 程序在运行中的时候,突然弹出错误窗口,然后点错误窗口的确定时,程序直接关闭 例如: “应用程序错误” “C++错误之类的窗口” “程序无响应” “假死”等 此种崩溃特点 ...
- 数据结构——求单向链表的倒数第K个节点
首先,对于链表来说,我们不能像数组一样直接访问,所以我们想到要求倒数第K个节点首先要知道最后一个节点. 然后从最后一个节点往前数K个. 最后得到想要的值. 但是这是不对的,为什么呢?因为题目给出的是单 ...
- OLEDB和ODBC的区别
ODBC(开放数据库互连):是Microsoft引进的一种早期数据库接口技术.它实际上是ADO的前身.早期的数据库连接是非常困难的. 每个数据库的格式都不一样,开发者得对他们所开发的每种数据库的底层A ...
- hdu_5750_Dertouzos(线性筛)
题目连接:hdu_5750_Dertouzos 题意: 给你一个n,一个d,问你比n小的数中有多少个数的最大的因子为d,比如6有因子1 2 3 最大的为3 题解: 当时比赛做这题的时候没考虑常数的优化 ...
- ocs添加仓库受限问题
添加仓库时受限出现以下问题 如图: 解决方法 修改app\ome\lib\branch\func.php文件的allow_use_num方法 /** * 允许使用的仓库数 * @access publ ...
- java中的Unicode中文转义
String ori = "\u5e7f\u4e1c"; public static String convertUnicode(String ori) { char aChar; ...