（四）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":"第四節"        
       }
    ] 
  }
]