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 1407 测试你是否和LTC水平一样高
Description 大家提到LTC都佩服的不行,不过,如果竞赛只有这一个题目,我敢保证你和他绝对在一个水平线上! 你的任务是: 计算方程x^2+y^2+z^2= num的一个正整数解. Inpu ...
- startssl证书firefox支持配置
解决Firefox不信任StartSSL证书问题 wget http://cert.startssl.com/certs/ca.pem wget http://cert.startssl.com/ce ...
- C++设计模式-Iterator迭代器模式
ref: http://www.cnblogs.com/onlycxue/archive/2013/12/25/3490738.html
- oracle创建数据库表空间
1.创建表空间(存放数据) create tablespace xtba_datadatafile 'F:\ORACLE\ORADATA\ORCL\XTBA.DBF'size 50mautoexten ...
- UIKit继承结构和UIView.h文件详解
@interface UIView : UIResponder<NSCoding, UIAppearance, UIAppearanceContainer, UIDynamicItem> ...
- Flask -- 内容管理系统
例子: # content_manager.py # 把TOPIC存在一个字典里,key为关键字,value为二维数组# TOPIC_DICT['Django'][0]为Title,TOPIC_DIC ...
- HTTP 返回状态值详解
当用户点击或搜索引擎向网站服务器发出浏览请求时,服务器将返回Http Header Http头信息状态码,常见几种如下: 1.Http/1.1 200 OK 访问正常 表示成功访问,为网站可正常访问 ...
- VMware 虚拟机（linux）增加根目录磁盘空间
今天查看学校的监控报修系统,不能访问了!!!系统运行很慢,用top命令查看发现内存使用率90%,用"df -h ”查看“/”目录使用率已达到80%,导致系统运行很慢.我用以下方法扩大根目录磁 ...
- 外部VBS的调用
一．QTP调用外部VBS的方法 加到QTP的Resource中 在QTP菜单中设置, 菜单FileàSettingsàResource,将要加载的VB脚本添加进来. 举例: 步骤1:在D盘下新建一个V ...
- Bitcode问题
原因:Xcode7 及以上版本会默认开启 bitcode .bitcode具体是什么就不解释了.解决方法:1.更新library使包含Bitcode,否则会出现以上的警告.2.关闭Bitcode,简单 ...