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. 问题描述 填报预览时,我们想获取到某个控件的值相对来说较容易.但如果控件是扩展的,就只能获取到第一个值,无法根据扩展一行行获取对应的值. 例:本意是想获取到袁成洁,结果还是获取到第一个单元格值孙 ...
随机推荐
- [ An Ac a Day ^_^ ] Codeforces Round #368 Div. 2 A B C
昨天才回学校 刚好赶上CF所以就没写博客 不过还是水题了…… A. 比赛的时候被hack了 仔细读题才知道grey也算是黑白的 英语不好好伤心…… #include<stdio.h> #i ...
- 万航单位换算器 V1.0 绿色版
软件名称: 万航单位换算器软件语言: 简体中文授权方式: 免费软件运行环境: Win 32位/64位软件大小: 347KB图片预览: 软件简介:万航单位换算器是一个可以随意转换单位的绿色软件,这个软件 ...
- Matlab中矩阵的平方和矩阵中每个元素的平方介绍
该文章讲述了Matlab中矩阵的平方和矩阵中每个元素的平方介绍. 设t = [2 4 2 4] 则>> t.^2 ans = 4 164 16 而>> t^2 ans = ...
- 第二部分 职责型模式responsibility
普通职责无法提供的内容,据此可以定义以下几种模式: 将职责集中到某个类的一个单独实例,单件模式 当一个对象发生改变时,依赖于这个对象的其他对象都能够得到通知,而这个发生改变的对象无须了解自己被其他哪些 ...
- Python 数据分析包：pandas 基础
pandas 是基于 Numpy 构建的含有更高级数据结构和工具的数据分析包 类似于 Numpy 的核心是 ndarray,pandas 也是围绕着 Series 和 DataFrame 两个核心数据 ...
- HDU 3410 Passing the Message
可以先处理出每个a[i]最左和最右能到达的位置,L[i],和R[i].然后就只要询问区间[ L[i],i-1 ]和区间[ i+1,R[i] ]最大值位置即可. #include<cstdio&g ...
- HBase全分布安装配置
分布式的hbase依赖于Zookeeper集群所有正常工作节点都必须能够访问zookeeper:用户可以通过启动和关闭脚本就可以把zookeeper当做hbase的一部分来启动和关闭进程:当然,用户也 ...
- data Mining with Weka: Trailer More Data Mining with Weka 用weka 进行数据挖掘 Weka 用weka 进行更多数据挖掘
https://www.youtube.com/user/WekaMOOC 大学公开课 视频教程 weka 入门教程 data Mining with Weka: Trailer More Dat ...
- OpenCV成长之路：图像滤波
http://ronny.blog.51cto.com/8801997/1394138 OpenCV成长之路:图像滤波 2014-04-11 14:28:44 标签:opencv 边缘检测 sobel ...
- Git从远程库克隆
上次我们讲了先有本地库,后有远程库,如何关联远程库. 现在,假设我们从零开始开发,那么最好的方式就是先创建远程库,然后从远程库克隆. 首先,登录GitHub,创建一个新的仓库,gitskill 创建过 ...