zoukankan      html  css  js  c++  java
  • (四)EasyUI 使用——form表单2 & window窗口

    form表单组件主要有以下内容(如下图)       

              

     6. progressbar进度条 

    每隔1秒让进度条按随机数填充,直至充满进度条刻度(只能执行一次)

     

    进度条:
        <div id="p" style="400px;"></div>
    
        <script type="text/javascript">
            $("#p").progressbar({
                width : "auto",
                height : 22,
                value : 0
            });
        </script>
    
        <input type="button" value="开始" style="font-size:11px" />
    
        <script type="text/javascript">
            var timeID = null;
            
            //随机产生1-9之间的整数,包含1和9
            function getNum() {
                return Math.floor(Math.random() * 9) + 1;
            }
    
            $(":button").click(function() {
                timeID = window.setInterval(function() {
                    //获取随机数,例如:9
                    var num = getNum();
                    //获取进度条当前值,例如:99
                    var value = $("#p").progressbar("getValue");
                    //如果随机数加当前值小于100的话
                    if (value + num < 100) {
                      //填充进度条当前值
                        $("#p").progressbar("setValue", value + num);
                    } else {
                        //将进度条当前值设置为100
                        $("#p").progressbar("setValue", 100);
                        //停止定时器
                        window.clearInterval(timeID);
                        //将"开始"按钮生效
                        $(":button").removeAttr("disabled");
                    }
                }, 200);
    
                //将"开始"按钮失效
                $(this).attr("disabled", "disabled");
            });
        </script>

    7. window窗口

    window窗口组件主要有以下内容(如下图)  

            

    7.1 创建复合布局窗口(简单)

    <div id="win" class="easyui-window" title="My Window" style="600px;height:400px"   
            data-options="iconCls:'icon-save',modal:true">   
        <div class="easyui-layout" data-options="fit:true">   
            <div data-options="region:'north',split:true" style="height:100px"></div>   
            <div data-options="region:'center'">   
                The Content.    
            </div>   
        </div>   
    </div>  

    7.2  实现功能:单击按钮,打开或关闭一个窗口

    窗口的属性扩展自 panel(面板),窗口新增或重新定义的属性如下:

    <input id="open1" type="button" value="打开窗口1" />
        <hr />
        <div id="win1"></div>
    
        <script type="text/javascript">
            $("#open1").click(function() {
                $("#win1").window({
                    title : "我的窗口1",
                    width : 200,
                    height : 300,
                    top : 100,
                    left : 400,
                    collapsible : true,
                    minimizable : true,
                    maximizable : true,
                    closable : true,
                    draggable : true,
                    resizable : true,
                    shadow : true,
                    modal : true,
                });
            });
        </script>

                    

    8.  dialog对话框 

    单击按钮,打开或关闭一个对话框

    <input id="open1" type="button" value="打开对话框1"/>
        <hr/>
        <div id="dd1"></div>   
        <script type="text/javascript">
            $("#open1").click(function(){
                $("#dd1").dialog({
                    300,
                    height:400, //显示效果中拖动且缩短了高度
                    left:400,
                    top:100,
                    title:"对话框1",
                    resizable:true,//可缩放
                    toolbar:[
                        {
                            text:'编辑',
                            iconCls:'icon-edit',
                            handler:function(){alert('edit')}
                        },
                        {
                            text:'帮助',
                            iconCls:'icon-help',
                            handler:function(){alert('help')}
                        
                        }
                    ],
                    buttons:[
                        {
                            text:'确定',
                            handler:function(){alert('ok')}
                        },
                        {
                            text:'关闭',
                            handler:function(){
                                //关闭本对话框
                                $("#dd1").dialog("close");
                            }
                        }
                    ],
                    href:"../themes/combobox.html"
                });    
            });
        </script>

                

     9. messager消息窗口 

       单击按钮,弹出 警告框/ 确认框/ 输入框/ 显示框

        <input type="button" value="警告框"/>
        <input type="button" value="确认框"/>
        <input type="button" value="输入框"/>
        <input type="button" value="显示框"/>
        <hr/>
        <div style="margin:200px"></div>        
        <script type="text/javascript">
            $(":button").click(function(){
                var tip = $(this).val();
                tip = $.trim(tip);
                if("警告框" == tip){
                    $.messager.alert("我的警告框","不能浪费时间了","warning");
                }else if("确认框" == tip){
                    $.messager.confirm("我的确认框","你确定在关闭本窗口吗?",function(flag){
                        alert(flag);
                    });
                }else if("输入框" == tip){
                    $.messager.prompt("我的输入框","你喜欢什么口味的雪碧?",function(value){
                        alert(value);
                    });
                }else if("显示框" == tip){
                    $.messager.show({
                        title:"我的显示框",
                        msg:"我负责显示信息,2秒后我将消失",
                        showType:"fade",
                        200,
                        height:200,
                        timeout:2000  //2秒后消失
                    });
                }
            });
        </script>

    10. tree树 

     选中树中某个子节点,弹出选中的内容 (用树替代linkButton按钮)

                    

    10.1 逻辑关系简单时

    <ul id="ttt" class="easyui-tree" style="222px">
            <li><span>第一章</span></li>
            <li><span>第二章</span>
                <ul>
                    <li><span>第一节</span></li>
                    <li><span>第二节</span>
                        <ul>
                            <li>第一条</li>
                            <li>第二条</li>
                            <li>第三条</li>
                        </ul></li>
                     <li><span>第三节</span></li>
                </ul></li>
        </ul>

    10.2 用到json时(需要发布到服务器)

    <ul id="ttt"></ul>
        <script type="text/javascript">
            $("#ttt").tree({
                url:"tree_data.json",
                lines:true
            });
        </script>
        <script type="text/javascript">
            $("#ttt").tree({
                onClick:function(node){
                    alert(node.text);
                }
            });
        </script>

         tree_data.json

    [
      {
        "id":1,
        "text":"第一章" 
      },
      {
        "id":2,
        "text":"第二章",
        "state":"closed",
        "children":[
           {
             "id":21,
              "text":"第一节" 
           },
           {
           "id":22,
              "text":"第二节"        
           },
           {
           "id":23,
              "text":"第三节",
              "state":"closed",
              "children":[
             {
              "id":231,
                  "text":"第一条" 
    
             },    
             {
            "id":232,
                  "text":"第二条"     
             }
          ]      
           },
           {
           "id":24,
              "text":"第四节"        
           }
        ] 
      }
    ]
  • 相关阅读:
    postman 安装,配置,鉴权
    monkey操作,获取包名,参数,日志,百分比
    monkey环境搭建
    postman接口测试&压力测试
    Fiddler介绍(PC端+Android,IOS端,弱网)
    软件测试的环境搭建
    python2.x- selenium-robot framework自动化测试环境搭建
    SVN的简单操作,版本控制
    svn介绍和安装
    js 函数和函数的参数
  • 原文地址:https://www.cnblogs.com/zjfjava/p/6838703.html
Copyright © 2011-2022 走看看