easy ui 框架

Easy UI 准備工作（搭建）

    1.在WebRoot 的目錄下創建js 文件夾，在文件夾中倒入一下兩個包

       Jquery.easyui.min.js

       jquery.min.js

    2.在WebRoot 的目錄下復制整個themes 主題包

    3.引入css文件，不限順序（注意路徑：本jsp 是放在webroot 下的html文件夾的根目錄）

      <link rel="stylesheet" href="../themes/default/easyui.css" type="text/css"></link>

      <link rel="stylesheet" href="../themes/icon.css" type="text/css"></link>

    4.引入js 文件，有順序限制

      <script type="text/javascript" src="../js/jquery.min.js"></script>

      <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>

　　<script type="text/javascript" src="../js/easyui-lang-zh_CN.js"></script>

    5.例子及注意事項

      

 

easyui 獲取值得方法（與一般的jquery不一樣）

      取： $("#div的id").組件名("getValue")

      設值：  $("#div的id").組件名("setValue","設值的值")

 

組件：

一.layout 布局

    布局屬性：fit:trrue 使用父容器的大小  

    區域面板屬性： href:

         問題

         (直接加載圖片的話，是加載圖片的內容)

         

       解決方案：換成倒入一個 html 頁面（期內容就是一張圖片），用了絕對路徑，相對路徑有問題，圖片顯示不出來

       

       

      easyui 方法調用

      

 

 

二.Accordion 分類器    

　　容器屬性：

   　　 selected:  默認選中 0，如果不想顯示被選中，則把selected 的值設置為不在范圍內

　　面板屬性：（添加移除面板）

 

三．LinkButton 按鈕     

　　Class=’easyui-linkbutton’

　　屬性 group,toggle 同用 實現 radio 的效果

     

四.tab 選項卡   

 　　1.可以判斷選項卡是否已經打開，否則添加

       2.在選項卡中引入另外一個頁面，用href 屬性

 

五．Pagination 分頁欄

六 form 表單

       1.validatebox 驗證框     

          提示框默認紅色，可以在validatebox.css 這把顏色修改

          自定義規則(必須為中文）

          

      

      2.combobx 組合框(可以寫，有點類似搜索)

         classs=''easy-combobox"

 

      3.datebox  日期輸入框

         日期獲取並且裝換為指定的格式

     

      4.numberspinner 數字微調器( 回車鍵觸發事件)      

<script type="text/javascript">
        $("#ss").keyup(function(xxx){
            //將瀏覽器產生的事件對象設置到myevent變量中
            var myevent = xxx;
            //獲取按鍵的unicode編碼
            var code = myevent.keyCode;
            //如果按鈕是回車
            if(code == 13){
                //獲取數字微調的當前值，因為$(this)此時表示的是文本框，直接獲取value屬性值即可
                var value = $(this).val();
                //將當前值設置到span標簽中
                $("#num").text(value).css("color","red");    
            }
        });
    </script>

 

 

 

        5.slider 滑動條(場景：身高)

           比較少用，如果想快速改變數量，可用這個代替numberspinner

    

        6.progressBar 進度條

<script type="text/javascript">
        //獲取1到9之間的隨機數，包含1和9
        function getNum(){
            return Math.floor(Math.random()*9)+1;
        }
    </script>

 

//定拉按鈕，同時提供單擊事件
        $("#startID").click(function(){
            //每隔300毫秒執行update方法
            timeID = window.setInterval("update()",300);
            //按鈕失效
            $(this).attr("disabled","disabled");
        });

 

 

         7.window 窗口 

         8.dialog 對話框

            主要是toolbar,buttons,畢業設計管理員端用的就是dialog

        9.Messager 消息框

             警告框，確認框，輸入框，顯示框

      10.tree 樹

             如果是靜態樹，在頁面加載是折疊的話，$("#數id").tree("collapseAll")

             若是動態樹，折疊需要在json 里添加屬性  "state":"close"

 

 

一.jQueryEasyUI Messager基本使用

    jQuery.messager.alert("提示", "請完成必填項","warning");

    參考： http://www.cnblogs.com/libingql/archive/2011/07/17/2109020.html

//定拉按鈕，同時提供單擊事件$("#startID").click(function(){//每隔300毫秒執行update方法timeID = window.setInterval("update()",300);//按鈕失效$(this).attr("disabled","disabled");});