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. 问题描述填报预览时,我们想获取到某个控件的值相对来说较容易.但如果控件是扩展的,就只能获取到第一个值,无法根据扩展一行行获取对应的值. 例:本意是想获取到袁成洁,结果还是获取到第一个单元格值孙 ...

随机推荐

FZU 1894 志愿者选拔单调队列
训练赛的题…… 暴力一波明显超时…… 最近刚学stl 感觉是优先队列但还是太会用…… 以后可以试一下优先队列…… 比赛之后百度了一下发现是单调队列…… 看起来挺简单的也算个模版题吧…… 总之思路 ...
chapter8_1 编译执行和错误
1.编译前面介绍的,dofile是一个运行lua代码块的基本操作,实际上它是一个辅助函数. loadfile才真正做了核心的工作.dofile(打开文件,执行里面的代码块)和loadfile(从文件 ...
1bpp像素遍历(找了半天，感谢github)
/// <summary> /// 获取比例 /// </summary> /// <param name="rect"></param& ...
ControlTemple样式
1.TextBox 样式 1.1 style <Window.Resources> <Style x:Key="aa" TargetType="{x:T ...
2.Add Two Numbers-两个单链表相加
You are given two linked lists representing two non-negative numbers. The digits are stored in rever ...
Silverlight中以客户端加载另一项目客户端（先登录后加载的一般实现）
近几日,本人在对一个老的Silverlight的GIS项目进行维护,发现该项目的实现是先把所有的资源加载至客户端,其中包括登录部分和业务实现部分,我就在想可不可以把登录部分和业务实现部分开来.如果用户 ...
Sql sever 常用语句（续）
distintct: 查询结果排除了重复项(合并算一项)--如查姓名 select distinct ReaName from UserInfo 分页语句:(查询区间时候应该查询出行号,作为分页的 ...
U盘启动安装Ubuntu
1.UltraISO制作USB启动盘 2.打开U盘目录下的\syslinux\syslinux.cfg, 将default vesamenu.c32注释为 # default vesamenu.c32
Linux系统监控实用工具Glances
Linux系统监控实用工具Glances Glances安装 Glances安装要求:python >= 2.6 和 psutil >= 0.4.1 1.第一步,安装了python-> ...
vhost.sh 源代码，认真看哦
#!/bin/bash # # Web Server Install Script # Created by wdlinux QQ:12571192 # Url:http://www.wdlinux. ...

combo扩展:禁止手工改变输入框的值

combo扩展:禁止手工改变输入框的值的更多相关文章

随机推荐

热门专题