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

随机推荐

List container
//List容器 //List本质是一个双向链表 //构造函数 list<int>c0; //空链表 list<int>c1(3); //建一个含三个默认值是0的元素链表 li ...
NOIP2014-普及组复赛-第三题-螺旋矩阵
题目描述 Description 一个n行n列的螺旋矩阵可由如下方法生成: 从矩阵的左上角(第1行第1列)出发,初始时向右移动:如果前方是未曾经过的格子,则继续前进,否则右转:重复上述操作直至经过矩阵 ...
mnesia
1.模式创建 mnesia:create_schema([node()|nodes()]).集群的节点之间创建模式 2.启动和停止 application:start(mnesia). applica ...
Weblogic的集群
<收藏自http://www.cnblogs.com/HondaHsu/p/4267972.html> 一.Weblogic的集群还记得我们在第五天教程中讲到的关于Tomcat的集群吗? ...
华硕笔记本怎么进入PE之前的BIOS设置
1.先要制作一个U盘的PE启动盘,建议使用WIN8 PE 2.将制作好的PE启动盘接上电脑,开机按F2键进入BIOS ,先将[Secure]菜单下[Secure Boot Control]选项设置为[ ...
模拟IIC协议时序
IIC是飞利浦公司开发的两线式串行总线,主要应用在单片机和外围电子器件之间的数据通讯. IIC总线优点是节约总线数,稳定,快速,是目前芯片制造上非常流行的一种总线,大多数单片机已经片内集成了IIC总线 ...
slam相关知识
Kinect视觉SLAM技术介绍 http://www.open-open.com/news/view/ce76e2 本文介绍SLAM的历史.理论以及实现的方式,且主要介绍基于视觉(Kinect)的实 ...
C# 获取字符的Unicode编码
using UnityEngine;using System.Collections;using System.Collections.Generic; List<); string chars ...
【第三篇】学习 android 事件总线androidEventbus之发布事件，子线程中接收
发送和接收消息的方式类似其他的发送和接收消息的事件总线一样,不同的点或者应该注意的地方: 1,比如在子线程构造方法里面进行实现总线的注册操作: 2,要想子线程中接收消息的功能执行,必须启动线程. 3, ...
在OSchina上看到的清理到缓存的方法
/* * *文件名: DataCleanManager.java * 描述: 主要功能有清除内/外缓存,清除数据库,清除sharedPreference,清除files和清除自定义目录 */ i ...

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

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

随机推荐

热门专题