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

随机推荐

Traffic Ccontrol(流量控制)
linux有一个成熟的带宽供给系统,称为Traffic Control(流量控制).这个系统支持各种方式进行分类.排序.共享和限制出入流量. 一.基础知识让ip显示我们的链路 ip link li ...
Java Socket与操作系统的关系
Socket与操作系统有什么关系呢?请细读下文简介 TCP简介 TCP(Transmission Control Protocol 传输控制协议)是一种面向连接的.可靠的.基于字节流的传输层通信协议 ...
Gentoo安装详解（二）-- 编译内核
编译内核: 安装内核源码: 选择内核:如gentoo-sources emerge gentoo-sources ls -l /usr/src/linux 手动编译内核: cd /usr/src/li ...
VS2010编译以前版本工程时 ERROR CVT1100:duplicate resource,type:MANIFEST解决办法
1.将 Resource Files 里面的 *.exe.manifest 文件删除 2.右键选择 *.rc 文件,选择 view code,查找并删除所有引用 *.exe.manifest 文件的代 ...
PHP ajax 限制 API 来源限制
if(isset($_SERVER["HTTP_X_REQUESTED_WITH"]) && strtolower($_SERVER["HTTP_X_RE ...
使用SpringMVC时，配置DispatcherServlet注意的url-pattern的问题
url-pattern配置时注意: <servlet> <servlet-name>springMVC</servlet- ...
docker network
前言:前面的部分一直都是单机跑docker,但实际生产环境不可能只用一台来跑.肯定会用到多台,因为他们都是内部私有ip,那么多台主机之间的容器如何通信?这个是个很头疼的问题!目前主流几种方法如下: 1 ...
JPA 系列教程12-复合主键-2个@Id+@IdClass
复合主键指多个主键联合形成一个主键组合需求产生比如航线一般是由出发地及目的地确定,如果要确定唯一的航线就可以用出发地和目的地一起来表示 ddl语句同复合主键-2个@Id一样 Airline p ...
SqlSever 查询基本
查询语句: SQL sever 查询语句: 1.查询所有字段: select * from UserInfo 2.条件筛选 (如查询UserInfo中的UserName) select UserNam ...
学习multiprocessing（2）
1 代码1: from multiprocessing import Pool import os, time, random def long_time_task(name): print('Run ...

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

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

随机推荐

热门专题