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

随机推荐

JS计算字符串长度（中文算2个）
/** * @return {number} */ getRealLength = function(str) { var realLength = 0, len = str.length, char ...
LeetCode OJ 289. Game of Life
According to the Wikipedia's article: "The Game of Life, also known simply as Life, is a cellul ...
MySQL性能优化(来源于简书)
1.为查询优化你的查询大多数的MySQL服务器都开启了查询缓存.这是提高性最有效的方法之一,而且这是被MySQL的数据库引擎处理的.当有很多相同的查询被执行了多次的时候,这些查询结果会被放到一个缓存 ...
D - 小晴天老师系列——晴天的后花园
D - 小晴天老师系列——晴天的后花园 Time Limit: 10000/5000MS (Java/Others) Memory Limit: 128000/64000KB (Java/Oth ...
WPFbutton样式
有四款button不同的风格 <Window x:Class="SjglzxRj.Window3" xmlns="http://schemas.microsoft. ...
网络传输中的三张表，MAC地址表、ARP缓存表以及路由表
一:MAC地址表详解说到MAC地址表,就不得不说一下交换机的工作原理了,因为交换机是根据MAC地址表转发数据帧的.在交换机中有一张记录着局域网主机MAC地址与交换机接口的对应关系的表,交换机就是根据 ...
Tennis Championship
Tennis Championship time limit per test 2 seconds memory limit per test 256 megabytes input standard ...
java类中为什么设置set和get方法操作属性
java程序规范中会建议大家尽量将类中的属性私有化,即定义为private变量,通过设置set和get函数来对属性进行操作.一些人存在这样的疑问,为什么不直接将属性设置为public,以后调用属性时直 ...
cookie的简单应用
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
《JavaScript高级程序设计》读书笔记 ---语句
do-while语句do-while 语句是一种后测试循环语句,即只有在循环体中的代码执行之后,才会测试出口条件.换句话说,在对条件表达式求值之前,循环体内的代码至少会被执行一次.以下是do-whil ...

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

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

随机推荐

热门专题