EasyUI(2) -- UI組件

一)Form表單

1> validatebox驗(yàn)證框:

  • 要求:
    • 姓名：必填/1-6個(gè)字符/必填中文
    • 郵箱：必填/1-30個(gè)字符/必填符合郵箱格式/后綴必須是com或cn
  • 代碼:
    <div style="margin:100px"></div> 
    用戶名:  
    <input id="vv"/>
    <script type="text/javascript">
        $("#vv").validatebox({
            required:true,
            validType:["length[1,4]","zhongwen"]
        });
    </script>
    <script type="text/javascript">
        //自定義驗(yàn)證規(guī)則
        $.extend($.fn.validatebox.defaults.rules, {    
            zhongwen : {    
                validator: function(value){//value表示在文本框中輸入的內(nèi)容    
                    if(/^[\u3220-\uFA29]+$/.test(value)){
                        return true;
                    }
                },    
                        // 如果不符合規(guī)則, 則一下是提示信息
                message: "用戶名必須填中文"  
            }    
        }); 
    </script>

2> combobox下拉列表框

  • 設(shè)置下拉列表框默認(rèn)值
    你所在的城市：
    <select id="cc" class="easyui-combobox" name="city" style="width:150px;">   
        <option>aitem1</option>   
        <option>bitem1</option>   
        <option>bitem2</option>   
        <option>citem1</option>   
        <option>citem2</option>   
        <option>citem3</option>   
        <option>ditem1</option>   
        <option>ditem2</option>   
        <option>ditem3</option>   
        <option>ditem4</option>   
    </select>  
    <script type="text/javascript">
        $(function(){
            $("#cc").combobox("setValue","長沙");
        });
    </script>
  1. datebox日期選擇框
    • 功能:
      • 顯示yyyy-mm-dd格式，
      • 添加<script type="text/javascript" src="locale/easyui-lang-zh_CN.js"></script>
      • 選中日期并顯示選中的日期
    • 代碼:
入職時(shí)間：<input id="dd" type="text"></input>  
    <script type="text/javascript">
        $("#dd").datebox({
            required:true
        });
    </script>
    <script type="text/javascript">
        $("#dd").datebox({
            onSelect:function(date){
                alert(date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate());   
            }
        });
    </script>
  1. numberspinner數(shù)字微調(diào)框
    • 功能:
      • 設(shè)置數(shù)字微調(diào)框中的值
      • 獲取數(shù)字微調(diào)框中的值
    • 代碼:
    商品數(shù)量：<input type="text" size="2px" value="1"/><span></span>
    <hr/>
    <input id="ss" required="required" style="width:80px;">  
    <script type="text/javascript">
        $("#ss").numberspinner({
            value:1,
            min:1,
            max:100,
            editable:true
        });
    </script>
    <script type="text/javascript">
            $("#ss").numberspinner({
                onSpinUp:function(){
                    //獲取numberspinner的當(dāng)前值
                    var value = $("#ss").numberspinner("getValue");
                    //將numberspinner的當(dāng)前值設(shè)置到商品數(shù)量文本框中
                    $("input:first").val(value).css("color","red");
                    //如果value值為100
                    if( value == 100 ){
                        $("span:first").html("商品已滿，不能再購買了").css("color","blue");    
                        $("input:first").attr("disabled","disabled");
                    }
                },
                onSpinDown:function(){
                    //獲取numberspinner的當(dāng)前值
                    var value = $("#ss").numberspinner("getValue");
                    //將numberspinner的當(dāng)前值設(shè)置到商品數(shù)量文本框中
                    $("input:first").val(value).css("color","red");
                    //如果value值小于100
                    if( value < 100 ){
                        $("span:first").html("");   
                        $("input:first").removeAttr("disabled");
                    }
                }
            });
    </script>
  1. slider滑動(dòng)條框
    拖動(dòng)滑塊，將值同步顯示到span標(biāo)簽中

二)Progressbar進(jìn)度條

  • 功能: 每隔1秒讓進(jìn)度條按隨機(jī)數(shù)填充，直至充滿進(jìn)度條刻度
  • 代碼:
    進(jìn)度條：
    <div id="p" style="width:400px;"></div> 
    <script type="text/javascript">
        $("#p").progressbar({
            width:"auto",
            height:44,
            value:0
        });
    </script>

    <input type="button" value="開始" style="font-size:111px"/>
    <script type="text/javascript">
        var timeID = null;
        //隨機(jī)產(chǎn)生1-9之間的整數(shù)，包含1和9
        function getNum(){
            return Math.floor(Math.random()*9)+1;
        }
        $(":button").click(function(){
            timeID = window.setInterval(function(){
                //獲取隨機(jī)數(shù)，例如：9
                var num = getNum();
                //獲取進(jìn)度條當(dāng)前值，例如：99
                var value = $("#p").progressbar("getValue");
                //如果隨機(jī)數(shù)加當(dāng)前值小于100的話      
                if(value + num < 100){
                    //填充進(jìn)度條當(dāng)前值
                    $("#p").progressbar("setValue",value+num);
                }else{
                    //將進(jìn)度條當(dāng)前值設(shè)置為100
                    $("#p").progressbar("setValue",100);
                    //停止定時(shí)器
                    window.clearInterval(timeID);
                    //將"開始"按鈕生效
                    $(":button").removeAttr("disabled");
                }       
            },200); 
            //將"開始"按鈕失效
            $(this).attr("disabled","disabled");        
        });
    </script>

三)window窗口

  • 功能: 單擊按鈕，打開或關(guān)閉一個(gè)窗口
  • 代碼:
    <input id="open1" type="button" value="打開窗口1"/>
    <input id="open2" type="button" value="打開窗口2"/>
    <hr/>   
    <div id="win1"></div> 
    <div id="win2"></div>
    <script type="text/javascript">
        $("#open1").click(function(){
            $("#win1").window({
                title:"我的窗口1",
                width:200,
                height:300,
                top:100,
                left:400,
                collapsible:false,
                minimizable:false,
                maximizable:false,
                closable:true,
                draggable:false,
                resizable:false,
                shadow:false,
                modal:false,
                href:"08_datebox.html"
            });
        });
        $("#open2").click(function(){
            $("#win2").window({
                title:"我的窗口2",
                width:200,
                height:300,
                top:100,
                left:800,
                collapsible:false,
                minimizable:false,
                maximizable:false,
                closable:true,
                draggable:false,
                resizable:false,
                shadow:false,
                modal:false
            });
        });
    </script>

四)dialog對(duì)話框

  • 功能: 單擊按鈕，打開或關(guān)閉一個(gè)對(duì)話框
  • 代碼:
    <input id="open1" type="button" value="打開對(duì)話框1"/>
    <hr/>
    <div id="dd1"></div>   
    <script type="text/javascript">
        $("#open1").click(function(){
            $("#dd1").dialog({
                width:300,
                height:400,
                left:400,
                top:100,
                title:"對(duì)話框1",
                toolbar:[
                    {
                        text:'編輯',
                        iconCls:'icon-edit',
                        handler:function(){alert('edit')}
                    },
                    {
                        text:'幫助',
                        iconCls:'icon-help',
                        handler:function(){alert('help')}
                    
                    }
                ],
                buttons:[
                    {
                        text:'確定',
                        handler:function(){alert('ok')}
                    },
                    {
                        text:'關(guān)閉',
                        handler:function(){
                            //關(guān)閉本對(duì)話框
                            $("#dd1").dialog("close");
                        }
                    }
                ],
                href:"07_combobox_2.html"
            }); 
        });
    </script>

五)messager消息窗口

  • 功能: 單擊按鈕，彈出警告框 / 確認(rèn)框 / 顯示框 / 輸入框
  • 代碼:
<input type="button" value="警告框"/>
    <input type="button" value="確認(rèn)框"/>
    <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("確認(rèn)框" == tip){
                $.messager.confirm("我的確認(rèn)框","你確定在關(guān)閉本窗口嗎?",function(flag){
                    alert(flag);
                });
            }else if("輸入框" == tip){
                $.messager.prompt("我的輸入框","你決定要學(xué)習(xí)Android還是JavaEE嗎?",function(value){
                    alert(value);
                });
            }else if("顯示框" == tip){
                $.messager.show({
                    title:"我的顯示框",
                    msg:"不要太區(qū)分Android和JavaEE了",
                    showType:"fade",
                    width:200,
                    height:200,
                    timeout:1000
                });
            }
        });
    </script>

六)tree樹

  • 功能:
    • 選中樹中某個(gè)子節(jié)點(diǎn)，彈出選中的內(nèi)容
    • 用樹替代linkButton按鈕
  • 代碼:
    • html代碼:
<ul id="ttt" class="easyui-tree" style="width:222px">   
        <li>   
            <span>第一章</span> 
        </li>   
        <li>   
            <span>第二章</span> 
            <ul>
                <li>
                    <span>第一節(jié)</span> 
                </li>
                <li>
                    <span>第二節(jié)</span> 
                    <ul>
                        <li>第一條</li>
                        <li>第二條</li>
                        <li>第三條</li>
                    </ul>
                </li>
            </ul>  
        </li>   
    </ul>
  • js代碼:
<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>
  • json數(shù)據(jù): tree_data.json
[
  {
    "id":1,
    "text":"第一章" 
  },
  {
    "id":2,
    "text":"第二章",
    "state":"closed",
    "children":[
       {
      "id":21,
          "text":"第一節(jié)" 
       },
       {
      "id":22,
          "text":"第二節(jié)"        
       },
       {
      "id":23,
          "text":"第三節(jié)",
          "state":"closed",
          "children":[
         {
        "id":231,
            "text":"第一條" 

         }, 
         {
        "id":232,
            "text":"第二條"    
         }
      ]      
       }
    ] 
  }
]

七)datagrid數(shù)據(jù)表格

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • ￥開啟￥ 【iAPP實(shí)現(xiàn)進(jìn)入界面執(zhí)行逐一顯】 〖2017-08-25 15:22:14〗 《//首先開一個(gè)線程，因...
    小菜c閱讀 6,547評(píng)論 0贊 17
  • 第一章： JS簡介 從當(dāng)初簡單的語言，變成了現(xiàn)在能夠處理復(fù)雜計(jì)算和交互，擁有閉包、匿名函數(shù)， 甚至元編程等...
    LaBaby_閱讀 1,703評(píng)論 0贊 6
  • 單例模式 適用場景：可能會(huì)在場景中使用到對(duì)象，但只有一個(gè)實(shí)例，加載時(shí)并不主動(dòng)創(chuàng)建，需要時(shí)才創(chuàng)建 最常見的單例模式，...
    Obeing閱讀 2,109評(píng)論 1贊 10
  • 演講人:瞿將/逗霸欠之 時(shí)間限制：十分鐘以內(nèi) 主題：我筆寫我心 演講要求：層層遞進(jìn)，講出心中感受，自己的文學(xué)作品，...
    逗霸君閱讀 504評(píng)論 2贊 2
  • 今天早晨突然想起故鄉(xiāng)的云，就心里唱起天邊飄過故鄉(xiāng)云的歌曲，不一會(huì)兒居然看到天邊點(diǎn)點(diǎn)的白云，不多見。上午帶孩子上廣場...
    紅糖二姐閱讀 299評(píng)論 2贊 2