zoukankan      html  css  js  c++  java
  • jQuery EasyUI/TopJUI输入框事件监听

    jQuery EasyUI/TopJUI输入框事件监听

     

    代码如下:

    <div data-toggle="topjui-panel" title="" data-options="fit:true,iconCls:'icon-ok',footer:'#footer'">
        <div class="topjui-container">
            <fieldset>
                <legend>输入框事件监听演示</legend>
            </fieldset>
            <div class="topjui-row">
                <div class="topjui-col-sm12">
                    <label class="topjui-form-label">姓名(单选)</label>
                    <div class="topjui-input-block">
                        <input type="text" name="userName" value=""
                               data-toggle="topjui-textbox"
                               data-options="id:'userName',prompt:'点击事件监听',readonly:true">
                    </div>
                </div>
            </div>
            <div class="topjui-row">
                <div class="topjui-col-sm12">
                    <label class="topjui-form-label">姓名(多选)</label>
                    <div class="topjui-input-block">
                        <input type="text" name="userName2" value=""
                               data-toggle="topjui-textbox"
                               data-options="id:'userName2',prompt:'点击事件监听',readonly:true">
                    </div>
                </div>
            </div>
            <div class="topjui-row">
                <div class="topjui-col-sm6">
                    <label class="topjui-form-label">小写转大写</label>
                    <div class="topjui-input-block">
                        <input type="text" name="enlighName" value=""
                               data-toggle="topjui-textbox"
                               data-options="id:'uppercase',prompt:'键盘事件监听'">
                    </div>
                </div>
                <div class="topjui-col-sm6">
                    <label class="topjui-form-label">大写转小写</label>
                    <div class="topjui-input-block">
                        <input type="text" name="enlighName" value=""
                               data-toggle="topjui-textbox"
                               data-options="id:'lowercase',prompt:'键盘事件监听'">
                    </div>
                </div>
            </div>
        </div>
    </div>
    

      js:

    <script>
        $(function () {
            // 1 弹框的基本属性配置
            var opts = {
                id: 'userDialog',// 唯一标识id
                title: '自定义打开一个窗口',// 标题
                closed: false, // 关闭状态
                height: 450, // 高度
                 700, // 宽度
                href: '', // 加载页面元素的地址
                buttons: [
                    {text: '关闭', iconCls: 'fa fa-close', btnCls: 'topjui-btn-red', handler: closeMyDialog}//调用下面closeMyDialog方法
                ]
            };
            var $userDialog = $('<div></div>');// 创建元素<div>
    
            // 2.1 给id=userName 的textbox绑定事件 打开单选弹框
            $('#userName').textbox('textbox').bind('click', function (e) {
                opts.href = _ctx + '/html/complex/dialog_user.html';
                $userDialog.iDialog(opts)
            });
    
            // 2.2 给id=userName2 的textbox绑定事件 打开多选弹框
            $('#userName2').textbox('textbox').bind('click', function (e) {
                opts.href = _ctx + '/html/complex/dialog_user2.html';
                $userDialog.iDialog(opts)
            });
        })
    
        /**
         * @description   关闭面板方法
         */
        function closeMyDialog() {
            $('#userDialog').iDialog('destroy');
        }
    
    </script>
    <!--键盘事件JS-->
    <script>
        $(function () {
            $('#uppercase').textbox('textbox').bind('keyup', function (e) {
                var val = $('#uppercase').iTextbox('getText');
                $('#uppercase').iTextbox('setText',val.toUpperCase())
            });
            $('#lowercase').textbox('textbox').bind('keyup', function (e) {
                var val = $('#lowercase').iTextbox('getText');
                $('#lowercase').iTextbox('setText',val.toLowerCase())
            });
        })
    </script>
    

      

     

    EasyUI中文网:http://www.jeasyui.cn

    TopJUI前端框架:http://www.topjui.com

    TopJUI交流社区:http://ask.topjui.com

  • 相关阅读:
    Note/Solution 转置原理 & 多点求值
    Note/Solution 「洛谷 P5158」「模板」多项式快速插值
    Solution 「CTS 2019」「洛谷 P5404」氪金手游
    Solution 「CEOI 2017」「洛谷 P4654」Mousetrap
    Solution Set Border Theory
    Solution Set Stirling 数相关杂题
    Solution 「CEOI 2006」「洛谷 P5974」ANTENNA
    Solution 「ZJOI 2013」「洛谷 P3337」防守战线
    Solution 「CF 923E」Perpetual Subtraction
    KVM虚拟化
  • 原文地址:https://www.cnblogs.com/xvpindex/p/11066540.html
Copyright © 2011-2022 走看看