（四）EasyUI 使用——form表单2 & window窗口

form表单组件主要有以下内容（如下图）　　

6. progressbar进度条

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

进度条：

    <div id="p" style="width: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="width: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({

                width: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",

                    width:200,

                    height:200,

                    timeout:2000  //2秒后消失

                });

            }

        });

    </script>

10. tree树

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

10.1 逻辑关系简单时

<ul id="ttt" class="easyui-tree" style="width: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":"第四节"

       }

    ]

  }

]

巴特西

（四）EasyUI 使用——form表单2 & window窗口

最新文章

热门文章