EasyUI(1) -- 簡(jiǎn)介 & UI組件(layout & accordion & linkbutton & tabs & pagination)

EasyUI簡(jiǎn)介

1> 網(wǎng)址：www.jeasyui.com，下載并參考學(xué)習(xí)<<jQuery EasyUI v1.3.5官方API中文版.exe>>手冊(cè)
2> 什么是jQuery-EasyUI

  • 是一種第三方組織開(kāi)發(fā)的一款基于jQuery的，簡(jiǎn)單易用的，功能強(qiáng)大的
    WEB[后臺(tái)前端]JavaScript現(xiàn)成的組件庫(kù)
  • 注意：今天的EasyUI組件庫(kù)的版本較高，需要高版本瀏覽器支持，
    中低版本瀏覽器會(huì)有不能正常執(zhí)行的情況

3> JavaScript，AJAX，JSON，jQuery，EasyUI分別能解決什么問(wèn)題

  • JS：基于瀏覽器對(duì)web頁(yè)面中的節(jié)點(diǎn)進(jìn)行操作，比較麻煩
  • jQuery：基于瀏覽器簡(jiǎn)化對(duì)web頁(yè)面中的節(jié)點(diǎn)進(jìn)行操作，做到了write less do more
  • AJAX：基于瀏覽器與服務(wù)端進(jìn)行局部刷新的異步通訊編程模式
  • JSON：簡(jiǎn)化自定義對(duì)象的創(chuàng)建與AJAX數(shù)據(jù)交換輕量級(jí)文本
  • EasyUI：快速基于現(xiàn)成的組件創(chuàng)建自已的web頁(yè)面
  • 組件：是指已經(jīng)由第三方開(kāi)源組織寫(xiě)好的，直接可以使用的功能界面，例如：form，layout，tree...
  • 注意：我們學(xué)的都是零散的組件，項(xiàng)目中需要將其裝配起來(lái)，方可構(gòu)建完整的web頁(yè)面，
    EasyUI只是眾多前端WEB組件之一(EasyUI / EXT / GoogleUI)

4> jQuery-EasyUI快速入門(mén)----可折疊功能的面板

  • 第一步：創(chuàng)建一個(gè)js-day05這么一個(gè)web工程
  • 第二步：在WebRoot目錄下創(chuàng)建00-base.html
  • 第三步：在WebRoot目錄下創(chuàng)建js和themes目錄，導(dǎo)入官方文件( 參見(jiàn)<< jquery-easyui-1.3.6文件夾>> )
  • 第四步：在00-base.html 文件的<head>標(biāo)簽中引入如下文件
    <!-- 引入外部CSS文件 -->
    <link rel="stylesheet" href="../themes/icon.css" type="text/css"></link>
    <link rel="stylesheet" href="../themes/default/easyui.css" type="text/css"></link>
  
    <!-- 引入外部JS文件 -->
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
  • 第五步：在00-base.html 文件的<body>標(biāo)簽中創(chuàng)建如下<div>標(biāo)簽
    <div 
        id="p" 
        class="easyui-panel" 
        style="width:500px;height:200px;padding:10px;"   
        title="我的面板" 
        iconCls="icon-save" 
        collapsible="true">   
        內(nèi)容<br/>
        內(nèi)容<br/>
        內(nèi)容<br/>
        內(nèi)容<br/>
    </div>

EasyUI組件:

一)Layout布局
  1. 代碼:
  • 基本布局:
     <!-- 布局面板 -->
     <div data-options="fit:true" id="cc" class="easyui-layout" style="width:600px;height:400px;">   
        <!-- 區(qū)域面板 -->
        <div data-options="region:'north',title:'北',split:false,collapsible:true" style="height:100px;"></div>   
        <div data-options="region:'south',title:'南',split:false,collapsible:true" style="height:100px;"></div>   
        <div data-options="region:'east',title:'東',split:false,collapsible:false,minWidth:150,maxWidth:150" style="width:100px;"></div>   
        <div data-options="region:'west',title:'西',split:false,collapsible:false,minWidth:150,maxWidth:150" style="width:100px;"></div>   
        <div data-options="region:'center',title:'中',iconCls:'icon-reload',href:'/js-day05/06_image.html',collapsible:false" style="padding:5px;background:#eee;"></div>   
     </div>
  • 拆分嵌套:
  <body class="easyui-layout">
        <!-- 北 -->
        <div data-options="region:'north'" style="height:150px"></div>  
        <!-- 中 -->
        <div data-options="region:'center'">
            <!-- 將中拆分邊西和中二部份 -->
            <div class="easyui-layout" data-options="fit:true"> 
                <!-- 東 -->
                <div data-options="region:'west'" style="width:200px"></div> 
                <!-- 中 -->
                <div data-options="region:'center'"></div>
            </div>
        </div>
  </body>
  1. js調(diào)用:
<script type="text/javascript">
        //瀏覽器加載web頁(yè)面時(shí)觸發(fā)
        $(function(){
            //將北邊面板折疊，字符串雙引單引均可
            $('#cc').layout('collapse','north');
            //休息3秒
            window.setTimeout(function(){
                //將南邊面板折疊，字符串雙引單引均可
                $('#cc').layout('collapse','south');
            },"3000");
        });
    </script>
二)Accordion分類(lèi)
  1. 代碼:
        <!-- 容器 -->
        <div data-options="border:true,animate:true,multiple:false,selected:-1" id="aa" class="easyui-accordion" style="width:300px;height:500px;">   
            
            <!-- 面板 -->
            <div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">   
                內(nèi)容1      
            </div>   
            <div title="Title2" data-options="iconCls:'icon-reload'" style="padding:10px;">   
                內(nèi)容2 
            </div>   
            <div title="Title3" data-options="iconCls:'icon-reload',collapsible:true">   
                內(nèi)容3 
            </div>   
            
        </div>
  1. js調(diào)用:
<script type="text/javascript">
            $(function(){
                //增加一個(gè)面板
                $("#aa").accordion("add",{
                    "title":"Title4",
                    "content":"內(nèi)容4",
                    "selected":false,
                    "iconCls":"icon-search"
                });
                
                //休息3秒
                window.setTimeout(function(){
                    
                    //刪除4號(hào)面板
                    $("#aa").accordion("remove",3);
                    
                    //取消選擇1號(hào)面板
                    $("#aa").accordion("unselect",0);
                    
                },"3000");
            });
        </script>
三)LinkButton鏈接按鈕
  1. 代碼:
        <a id="btn-add" class="easyui-linkbutton" data-options="iconCls:'icon-add'">
            增加
        </a>
        <a id="btn-find" class="easyui-linkbutton" data-options="iconCls:'icon-search'">
            查詢
        </a>
        <a id="btn-update" class="easyui-linkbutton" data-options="iconCls:'icon-edit'">
            修改
        </a>
        <a id="btn-delete" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">
            刪除
        </a>
  1. js調(diào)用:
        <script type="text/javascript">
            
            /*
            $("#btn-add").click(function(){
                //將該按失效
                $("#btn-add").linkbutton("disable");
            });
            $("#btn-add").dblclick(function(){
                //將該按失效
                $("#btn-add").linkbutton("disable");
            });
            */
            
            //參數(shù)一：字符串類(lèi)型的事件，多個(gè)事件之間通過(guò)空格分隔，事件名稱(chēng)符合jquery事件名寫(xiě)法
            //參數(shù)二：處理函數(shù)
            $("#btn-add").bind("click dblclick",function(){
                //將該按失效
                $("#btn-add").linkbutton("disable");
            });
            
        </script>
四)Tabs選項(xiàng)卡
  1. 代碼:
<!-- 容器面板 -->
        <div 
            id="tt" 
            class="easyui-tabs" 
            style="width:500px;height:250px;"
            data-options="plain:false,border:true,tools:[{
                    iconCls:'icon-add',
                    handler:function(){
                        alert('添加')
                    }
            },{
                    iconCls:'icon-remove',
                    handler:function(){
                        alert('刪除')
                    }
            }],selected:-1">   
            
            <!-- 選項(xiàng)卡面板 -->
            <div title="Tab1" data-options="closable:true" style="padding:20px">   
                tab1    
            </div>   
            <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;">   
                tab2    
            </div>   
            <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;">   
                tab3    
            </div>   
        </div>
  1. js調(diào)用:
<script type="text/javascript">
            $(document).ready(function(){
                $("#tt").tabs("add",{
                    "title":"Tab4",
                    "content":"tab4",
                    "selected":false,
                    "closable":true
                });
            });
        </script>

<script type="text/javascript">
     
        //定位四個(gè)按鈕，同時(shí)添加單擊事件
        $("a").click(function(){
            //獲取按鈕的文本
            var tip = $(this).text();
            //去空格
            tip = $.trim(tip);
            //如果是"增加部門(mén)"
            if("增加部門(mén)" == tip){
                //是否已有相同的tabs選項(xiàng)卡打開(kāi)
                var flag = $("#tt").tabs("exists",tip);
                //如果不存在相同的tabs選項(xiàng)卡打開(kāi)
                if(!flag){
                    //創(chuàng)建一個(gè)tabs選項(xiàng)卡
                    $("#tt").tabs("add",{
                        "title":tip,
                        "href":"${pageContext.request.contextPath}/addGroup.jsp",
                        "selected":true,
                        "closable":true
                    });
                }
            }
        });
     
     </script>
五)Pagination分頁(yè)框
  1. 代碼:
    <!-- 
        total：記錄總數(shù)100
        pageSize：每頁(yè)顯示多少條記錄5
        pageNumber：當(dāng)前頁(yè)號(hào)1
        pageList:[5,10,15]表示可供選擇中每頁(yè)顯示多少條記錄，
                          注意：pageSize的值必須是pageList數(shù)組值之一
     -->    
    <div 
        id="pp" 
        class="easyui-pagination" 
        data-options="total:100,pageSize:5,pageNumber:1,pageList:[5,10,15],showPageList:true,showRefresh:false,afterPageText:'頁(yè)'" 
        style="background:#efefef;border:1px solid #ccc;width:400px">
    </div>
  1. js調(diào)用:
    <script type="text/javascript">
        $("#pp").pagination({
            //pageNumber當(dāng)前頁(yè)號(hào)，例如1 
            //pageSize獲取多少條記錄，例如：5
            //以上二個(gè)參數(shù)，需要誰(shuí)，就接收誰(shuí)，不一定二個(gè)都同時(shí)出現(xiàn)，參數(shù)名可以任意
            "onSelectPage":function(pageNumber,pageSize){
                alert(pageNumber + ":" + pageSize);
            }
        });
    </script>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 寫(xiě)在前面：jQuery EasyUI 是一個(gè)基于 jQuery 的前端ui框架，集成了各種用戶界面插件?？赡苡行┩?..
    nightZing閱讀 5,381評(píng)論 0贊 4
  • 一. Java基礎(chǔ)部分.................................................
    wy_sure閱讀 4,011評(píng)論 0贊 11
  • 字符串回文判斷 題目描述： 回文，英文palindrome，指一個(gè)順著讀和反過(guò)來(lái)讀都一樣的字符串，比如madam、...
    MinoyJet閱讀 3,837評(píng)論 0贊 2
  • 美麗妝容始于清潔，終于清潔-----植村秀。 正確的卸妝順序是：眼唇卸妝---->面部卸妝。 卸妝一定要眼唇和臉?lè)?..
    可可瑪閱讀 294評(píng)論 0贊 2
  • 下班公車(chē) 翻到一篇文章講都江堰南橋的 那是最喜歡都江堰的地方 文章中出現(xiàn)了一座橋 便讓我想到了那年和幺妹一起過(guò)的奈...
    邊沿人閱讀 308評(píng)論 0贊 1

友情鏈接更多精彩內(nèi)容