• <noscript id="e0iig"><kbd id="e0iig"></kbd></noscript>
  • <td id="e0iig"></td>
  • <option id="e0iig"></option>
  • <noscript id="e0iig"><source id="e0iig"></source></noscript>
  • JQueryEasyUI框架入門

    標簽: JquerEasyUi  ztree  屬性菜單  后臺管理界面框架

    JQueryEasyUI入門

    一、JQueryEasyUI簡介

    easyui是一種基于jQuery的用戶界面插件集合。
    easyui為創建現代化,互動,JavaScript應用程序,提供必要的功能。
    使用easyui你不需要寫很多代碼,你只需要通過編寫一些簡單HTML標記,就可以定義用戶界面。
    easyui是個完美支持HTML5網頁的完整框架。
    easyui節省您網頁開發的時間和規模。
    easyui很簡單但功能強大的

    二、引入JQueryEasyUI

    1??、使用這個框架需要注意:基于對應的JQuery.js
    所以需要先引入JQuery.js文件。
    2??、需要引入jquery.easyui.min.js
    3??、引入國際化的locale的js,中國的
    4??、導入默認主題樣式文件
    5??、導入圖標CSS文件
    【三引入二導入】

    <!-- 導入JQuery-->
            <script type="text/javascript" src="../js/EasyUI/jquery-1.8.0.min.js" ></script>
             <!--導入EasyUI.js-->
            <script type="text/javascript" src="../js/EasyUI/jquery.easyui.min.js" ></script>
            <!--導入國際化文件-->
            <script type="text/javascript" src="../js/EasyUI/locale/easyui-lang-zh_CN.js" ></script>
            <!--導入默認的主題文件-->
            <link href="../js/EasyUI/themes/default/easyui.css" rel="stylesheet" type="text/css"  />
            <!--導入圖標文件-->
            <link href="../js/EasyUI/themes/icon.css" rel="stylesheet" type="text/css"  />
            <script type="text/javascript" src="../js/zTree_v3/js/jquery.ztree.all.js" ></script>

    三、使用布局layout

    通過 $.fn.layout.defaults 重寫默認的 defaults。
    布局(layout)是有五個區域(北區 north、南區 south、東區 east、西區 west 和中區 center)的容器。中間的區域面板是必需的,邊緣區域面板是可選的。每個邊緣區域面板可通過拖拽邊框調整尺寸,也可以通過點擊折疊觸發器來折疊面板。布局(layout)可以嵌套,因此用戶可建立復雜的布局。
    這里寫圖片描述
    布局可以嵌套 、可以依賴div元素和body進行布局。

    1. 相對div布局
      1??、先定義一個div 然后設置class屬性為easyui-layout進行設置。
      2??、在此div中,設置div設置north west center east south 區域,中間區域必須存在。需要設置寬度和高度,不然區域會顯示不全。
    <div id="cc" class="easyui-layout" style="width:600px;height:400px;">
        <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
        <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>
        <div data-options="region:'east',title:'East',split:true" style="width:100px;"></div>
        <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
        <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>
    </div>

    2.相對于body布局
    1??、在body元素中使用class屬性為easyui-layout
    在整個頁面進行布局

    <body class="easyui-layout">
        <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
        <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>
        <div data-options="region:'east',title:'East',split:true" style="width:100px;"></div>
        <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
        <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>
    </body>

    3.創建嵌套布局。
    請注意,內部布局的西區面板是折疊的。

    <body class="easyui-layout">
        <div data-options="region:'north'" style="height:100px"></div>
        <div data-options="region:'center'">
            <div class="easyui-layout" data-options="fit:true">
                <div data-options="region:'west',collapsed:true" style="width:180px"></div>
                <div data-options="region:'center'"></div>
            </div>
        </div>
    </body>

    4.通過 ajax 加載內容。
    布局(layout)是基于面板(panel)創建的。各區域面板提供從 URL 動態加載內容的內建支持。使用動態加載技術,用戶可以讓他們的布局頁面更快地顯示。

    <body class="easyui-layout">
        <div data-options="region:'west',href:'west_content.php'" style="width:180px" ></div>
        <div data-options="region:'center',href:'center_content.php'" ></div>
    </body>

    折疊布局面板
    折疊布局面板(Collpase Layout Panel)

    $('#cc').layout();
    // collapse the west panel
    $('#cc').layout('collapse','west');

    布局選項(Layout Options)
    fit boolean 當設置為 true 時,就設置布局(layout)的尺寸適應它的父容器。當在 ‘body’ 標簽上創建布局(layout)時,它將自動最大化到整個頁面的全部尺寸。默認值為 false
    通常會設置為true做適應父容器。

    四、使用選項卡(標簽頁)

    通過 $.fn.tabs.defaults 重寫默認的 defaults。
    這里寫圖片描述
    用法
    創建標簽頁(Tabs)

    1、通過標記創建標簽頁(Tabs)
    從標記創建標簽頁(Tabs)更容易,我們不需要寫任何 JavaScript 代碼。記住把 ‘easyui-tabs’ class 添加到

    標記。每個標簽頁面板(tab panel)通過子
    標記被創建,其用法與面板(panel)一樣。

    <div id="tt" class="easyui-tabs" style="width:500px;height:250px;">
        <div title="Tab1" style="padding:20px;display:none;">
            tab1
        </div>
        <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">
            tab2
        </div>
        <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">
            tab3
        </div>
    </div>

    2、編程創建標簽頁(Tabs)
    現在我們編程創建標簽頁(Tabs),我們同時捕捉 ‘onSelect’ 事件。

    $('#tt').tabs({
        border:false,
        onSelect:function(title){
            alert(title+' is selected');
        }
    });

    添加新的標簽頁面板(tab panel)

    通過迷你工具添加一個新的標簽頁面板(tab panel),迷你工具圖標(8x8)放置在關閉按鈕前。

    // 添加一個新的標簽頁面板(tab panel)
    $('#tt').tabs('add',{
        title:'New Tab',
        content:'Tab Body',
        closable:true,
        tools:[{
            iconCls:'icon-mini-refresh',
            handler:function(){
                alert('refresh');
            }
        }]
    });

    獲取選中的標簽頁(Tab)

    // 獲取選中的標簽頁面板(tab panel)和它的標簽頁(tab)對象
    var pp = $('#tt').tabs('getSelected');
    var tab = pp.panel('options').tab; // 相應的標簽頁(tab)對象 

    這里寫圖片描述
    這里寫圖片描述

    通常這個框架用作后臺管理的框架使用,結合屬性菜單控件ztree使用

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>Layout布局頁面</title>
            <!-- 導入JQuery-->
            <script type="text/javascript" src="../js/EasyUI/jquery-1.8.0.min.js" ></script>
             <!--導入EasyUI.js-->
            <script type="text/javascript" src="../js/EasyUI/jquery.easyui.min.js" ></script>
            <!--導入國際化文件-->
            <script type="text/javascript" src="../js/EasyUI/locale/easyui-lang-zh_CN.js" ></script>
            <!--導入默認的主題文件-->
            <link href="../js/EasyUI/themes/default/easyui.css" rel="stylesheet" type="text/css"  />
            <!--導入圖標文件-->
            <link href="../js/EasyUI/themes/icon.css" rel="stylesheet" type="text/css"  />
            <script type="text/javascript" src="../js/zTree_v3/js/jquery.ztree.all.js" ></script>
            <link rel="stylesheet" href="../js/zTree_v3/css/zTreeStyle/zTreeStyle.css" />
            <script type="text/javascript">
    //          文檔加載后執行
                $(function(){
    //              ztree控件
                    var setting ={
                         data: {
                             simpleData: {
                                  enable: true
                                }
                            },
                        callback:{
                            onClick:function(event,treeID,treeNode,clickFlag){
                                //alert(treeNode.page);
                                var content ='<div style="width:100%;height:100%;overflow:hidden;">'
                                +'<iframe src="'
                                +treeNode.page
                                +'"scrolling="auto" style="width:100%;height:100%;border:0;"></iframe></div>';
                                if(treeNode.page!=undefined&&treeNode.page!=""){
    //                              如果選項卡已經打開,選中選項卡
                                if($("#xxkmb").tabs('exists',treeNode.name)){
                                    $("#xxkmb").tabs('select',treeNode.name);
                                }else{
    
                                    $("#xxkmb").tabs('add',{
                                    title:treeNode.name,
                                    content:content,
                                    closable:true
                                });
                                }
    
                                }
    
    
                            }
                        }
                        }
                    var zNodes=[
                    {id: 1, pId: 0, name: "常用網站"},
                    {id: 2, pId: 0, name: "父節點二"},
                    {id: 11, pId: 1, name: "百度", page:"http://www.baidu.com"},
                    {id: 12, pId: 1, name: "安誠金融1+1貸",page:"http://www.yijiayidai.com"},
                    {id: 21, pId: 2, name: "二的子節點一"},
                    {id: 22, pId: 2, name: "二的子節點二"}
                    ]
    //              生成屬性菜單
                    var t =$("#ztreeMenu1");
                     $.fn.zTree.init(t, setting, zNodes);
    //               對選項卡注冊右鍵事件
                    $("#xxkmb").tabs({
                        onContextMenu:function(e,title,index){
    //                  取消默認的右鍵菜單的顯示
                        e.preventDefault();
    //                  顯示自定義菜單的顯示
                        $("#mm").menu('show',{
                        left:e.pageX,
                        top:e.pageY
                    });
                        }
                    });
    
    
    
                });
            </script>
    
        </head>
        <body class="easyui-layout">
            <!--north-->
            <div data-options="region:'north',title:'后臺管理系統'" style="height: 100px;">北部區域</div>
            <!--west-->
            <div data-options="region:'west',title:'菜單導航'" style="width: 180px;" >
                <!--菜單面板-->
                <div class="easyui-accordion" data-options="fit:'true'">
                    <div data-options="title:'基礎菜單'">
                        <!--通過ztree制作菜單樹-->
                        <ul class="ztree" id="ztreeMenu1">
    
                        </ul>
                    </div>
                    <div data-options="title:'系統設置'">面板二</div>
                </div>
            </div>
            <!--center-->
            <div data-options="region:'center'">
                <!--選項卡面板-->
                <div class="easyui-tabs" data-options="fit:'true'" id="xxkmb">
    
                </div>
    
            </div>
            <!--east-->
            <div data-options="region:'east'" style="width: 60px;">東部區域</div>
    
            <!--south-->
            <div data-options="region:'south'" style="animation-delay: 80px;">南部區域</div>
    
            <!--菜單區域,默認初始化都是隱藏的因為在布局外-->
            <div id="mm" class="easyui-menu" style="width:120px">
                <div>關閉當前窗口</div>
                <div>關閉其他窗口</div>
                <div class="menu-sep"></div><!--分割線-->
                <div data-options="iconCls:'icon-cancel'">關閉所有窗口</div>
            </div>
    
        </body>
    </html>
    
    版權聲明:本文為weixin_29414291原創文章,遵循 CC 4.0 BY-SA 版權協議,轉載請附上原文出處鏈接和本聲明。
    本文鏈接:https://blog.csdn.net/weixin_29414291/article/details/81046881

    智能推薦

    Mybatis框架入門

    Mybatis官網:http://www.mybatis.org/mybatis-3/ Mybatis的介紹 Mybatis是一個操作數據庫的框架。最開始叫做ibatis,從apache基金會脫離,加入googleCode正式更名為MyBatis。最終現在mybatis的代碼托管在github mybatis架構介紹 1、 mybatis配置SqlMapConfig.xml,此文件作為mybati...

    Spring框架入門

    文章目錄 Java Spring框架是什么?它有哪些好處? Spring體系結構詳解 Spring目錄結構和基礎JAR包介紹 Spring IoC容器:BeanFactory和ApplicationContext 第一個Spring程序 Spring DI(依賴注入)的實現方式:屬性注入和構造注入 Spring Bean的配置及常用屬性 Spring實例化Bean的三種方法 Spring中Bean...

    scrapy框架入門

    scrapy框架入門 一、Scrapy框架介紹 1.框架簡介 Scrapy是純Python開發的一個高效,結構化的網頁抓取框架 Scrapy使用了Twisted 異步網絡庫來處理網絡通訊 Scrapy是為了爬取網站數據,提取結構性數據而編寫的應用框架 Scrapy用途廣泛,可以用于數據挖掘、監測和自動化測試 2.模塊安裝 scrapy支持Python2.7和python3.4以上版本 python...

    Spring框架入門

    Spring 框架概述  1.1. 什么是Spring  Spring是分層的JavaSE/EE full-stack(一站式) 輕量級開源框架  分層: 來自JavaEE體系結構 (客戶端層、 web層、業務層、持久層 )  服務器端三層結構 (web層、業務層、持久層)  Servlet + JSP —- web層技術 &mdash...

    Spring《框架入門》

    Spring用的jar包之一部分 配置簡單的日志文件需要的jar包 Spring基本的xml配置文件 現在開始建java項目 新建Dao類,User類方便測試 測試類 其中ClassPathXmlApplicationContext通過將Spring的xml配置文件全名傳入構造方法中,返回一個實現ApplicationContext接口的對象,這時候配置文件中的信息已經全部掃描進去,生成的對象方法...

    猜你喜歡

    scrapy框架入門

    scrapy框架 Scrapy是用純Python實現一個為了爬取網站數據、提取結構性數據而編寫的應用框架,用途非常廣泛。 框架的力量,用戶只需要定制開發幾個模塊就可以輕松的實現一個爬蟲,用來抓取網頁內容以及各種圖片,非常之方便。 Scrapy 使用了 Twisted’tw?st?d異步網絡框架來處理網絡通訊,可以加快我們的下載速度,不用自己去實現異步框架,并且包含了各種中間件接口,可以...

    express框架入門

    本篇講述express框架入門 安裝express-generator(可以快速創建一個應用框架):npm install express-generator -g 創建一個express項目:在命令行輸入express --view=(模板名稱) 項目名稱 我這里使用的是ejs模板,port是我的項目名稱,其支持的模板有:ejs|hbs|hjs|jade|pug|twig|vash,根據自己的需...

    Hibernate框架入門

    導讀 本文主要介紹hibernate的入門,主要包括以下內容:hibernate介紹、hibernate環境搭建、hibernate簡單測試、測試涉及的api詳解。 一、hibernate介紹 JDBC是Java操作數據庫的工具,我們可以使用jdbc來書寫并執行sql語句來操作數據庫,對于普通的業務,jdbc工具是完全可以勝任的,但但當任務復雜,特別是數據庫中表格很多的時候,jdbc就會顯得力不從...

    scrapy框架入門

    最近在學習爬蟲,這里是MOOC北理嵩天老師的課程筆記,適合小白入門。 如果想自己寫一個scrapy框架出來,建議自己鉆研幾個實例,理解每一行語句的作用,應該三天左右就可以上手。 當然,我們還需要掌握re, xpath, BeautifulSoup 等基礎知識。 歡迎大佬指正~ 數據,包括用戶提供的網絡爬蟲請求,以及從網絡上獲取的相關內容,在這些結構直接相互流動形成了數據流。 路徑1:請求通過SPI...

    HTML中常用操作關于:頁面跳轉,空格

    1.頁面跳轉 2.空格的代替符...

    精品国产乱码久久久久久蜜桃不卡