easyui

時間 2019-12-07

標籤 easyui 简体版

原文原文鏈接

1，準備

　　http://www.jeasyui.com/download/index.php下載最新的easyui包，裏面有個demo文件夾，開發的時候儘可能別刪了，咱們在作的過程當中能夠參照裏面的demo示例，使用easyui須要引用下面四個css和js：php

1     <link href="EasyUI/themes/default/easyui.css" rel="stylesheet" />
2     <link href="EasyUI/themes/icon.css" rel="stylesheet" />
3     <script src="EasyUI/jquery.min.js"></script>
4     <script src="EasyUI/jquery.easyui.min.js"></script>

　　第一個easyui.css是基本的樣式，咱們在themes文件夾下會發現有幾種皮膚，能夠切換樣式更換不一樣的控件風格。css

　　第二個icon.css是圖標樣式，增長圖標按照已有規則建立，下面兩個js引用就很少說了。html

2，佈局Layout

　　後臺管理系統通常都是分爲四個部分，上部是logo或標題，左部是菜單，下部是版權信息，右部是內容信息。在easyui中咱們可使用Layout進行佈局，在demo文件夾-Layout文件夾下的basic.html，基本上是咱們須要的效果，複製一下，把高度和寬度修改一下（設置百分比）：jquery

　　可是瀏覽一下會發現頁面什麼也沒有，當時很莫名奇妙，試了很久才發現，class="easyui-layout"必須放在body標籤裏面，經過上面截圖能夠看到north、south、west、east和center分別表明五個部分，咱們不須要east導航能夠直接刪掉，簡單修改下就是咱們想要的效果，示例代碼：web

View Code

　　效果：json

3，菜單樹Tree

　　基本的佈局建立好了以後，咱們須要在左部添加菜單樹，咱們選取的是demo文件夾-tree文件夾下的lines.html，複製一下添加在west左部div下，lines示例是從json文件中讀取樹的，咱們能夠從basic.html中看到建立tree的格式，state:'closed'表示此接單關閉，默認是打開。ide

　　關於tree自定義節點圖標，icons.html是自定義節點圖標示例，可是從json讀取的，格式爲："iconCls":"icon-remove"；運行能夠看到源代碼：佈局

　　當時設置覺得在span標籤設置圖標樣式，可是並不起做用，花了不少時間嘗試，發現原來要在li標籤設置，經過這個示例須要提醒你們的是，在用easyui佈局的時候，不要查看樣式佈局，由於運行後都是easyui生成的源代碼，並非原始的，按照這個設置起來會有些問題。測試

　　簡單設置一下，就是咱們要的效果，示例代碼：ui

View Code

　　效果：

4，內容頁Tabs

　　菜單tree建立好了，接下來就是center部分的內容頁，咱們選取的是demo文件夾-tabs文件夾下的tabstools.html，此示例有tools方便咱們擴展，在作添加tabs的時候花了不少時間，一個是tabs添加center裏面，另外一個是tools樣式問題，關於第一個還好，通過屢次嘗試，嵌套裏面去了，第二個問題咱們先看下截圖：

　　不知怎的？在ie是能夠，谷歌和火狐不行，去掉樣式height: 26px;就是好的，但高度就不對了，嘗試了很久，最後沒辦法，建立一個新的webform，一段一段代碼貼過去測試，最後發現是頭部標籤：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">問題，新建的webform：<!DOCTYPE html>就是好的，真沒想到是這樣的緣由致使。

　　下面示例代碼中的addPanel()和removePanel()是添加tab的js方法，固然也能夠在頁面加載的時候動態的建立tab，須要注意的是在tabs_div中有data-options="tools:'#tab-tools'"屬性，tab-tools要和下面tools的id對應，表示tabs對應的tools，設置好了自動設置樣式，不須要你手動的設置。

　　示例代碼：

View Code

　　效果：

5，右鍵菜單Menu

　　tab建立好以後，咱們須要在tab添加右鍵menu，以便咱們的tab操做，demo文件夾-menu文件夾下的basic.html，咱們把代碼複製過來，能夠看到先建立一個div指示右鍵menu，js綁定右擊代碼：

1         $(function(){
2             $(document).bind('contextmenu',function(e){
3                 e.preventDefault();
4                 $('#mm').menu('show', {
5                     left: e.pageX,
6                     top: e.pageY
7                 });
8             });
9         });

　　上面代碼是綁定區域是整個頁面，咱們須要修改一下：把$(document) 改爲$(".tabs-inner")，.tabs-inner是每一個tab的css，查看頁面源代碼咱們就能夠看到。

　　綁定右擊事件後，下面就是關閉tab了，easyui提供了關閉tab的接口：$('#tabs').tabs('close', tab標題);根據此接口咱們能夠擴展其餘的菜單，好比關閉所有，除此以外所有關閉等等，就像vs的tab管理同樣。

　　tab管理代碼：

 1 //關閉tab
 2 function closeTab(action) {
 3     var alltabs = $('#tabs').tabs('tabs');
 4     var currentTab = $('#tabs').tabs('getSelected');
 5     var allTabtitle = [];
 6     $.each(alltabs, function (i, n) {
 7         allTabtitle.push($(n).panel('options').title);
 8     })
 9     switch (action) {
10         case "refresh":
11             var iframe = $(currentTab.panel('options').content);
12             var src = iframe.attr('src');
13             $('#tabs').tabs('update', {
14                 tab: currentTab,
15                 options: {
16                     content: createFrame(src)
17                 }
18             })
19             break;
20         case "close":
21             var currtab_title = currentTab.panel('options').title;
22             $('#tabs').tabs('close', currtab_title);
23             break;
24         case "closeall":
25             $.each(allTabtitle, function (i, n) {
26                 if (n != onlyOpenTitle) {
27                     $('#tabs').tabs('close', n);
28                 }
29             });
30             break;
31         case "closeother":
32             var currtab_title = currentTab.panel('options').title;
33             $.each(allTabtitle, function (i, n) {
34                 if (n != currtab_title && n != onlyOpenTitle) {
35                     $('#tabs').tabs('close', n);
36                 }
37             });
38             break;
39         case "closeright":
40             var tabIndex = $('#tabs').tabs('getTabIndex', currentTab);
41 
42             if (tabIndex == alltabs.length - 1) {
43                 alert('親，後邊沒有啦 ^@^!!');
44                 return false;
45             }
46             $.each(allTabtitle, function (i, n) {
47                 if (i > tabIndex) {
48                     if (n != onlyOpenTitle) {
49                         $('#tabs').tabs('close', n);
50                     }
51                 }
52             });
53             break;
54         case "closeleft":
55             var tabIndex = $('#tabs').tabs('getTabIndex', currentTab);
56             if (tabIndex == 1) {
57                 alert('親，前邊那個上頭有人，咱惹不起哦。 ^@^!!');
58                 return false;
59             }
60             $.each(allTabtitle, function (i, n) {
61                 if (i < tabIndex) {
62                     if (n != onlyOpenTitle) {
63                         $('#tabs').tabs('close', n);
64                     }
65                 }
66             });
67             break;
68         case "exit":
69             $('#closeMenu').menu('hide');
70             break;
71     }
72 }

　　整合js代碼：

  1 var onlyOpenTitle = "主頁";//不容許關閉的標籤的標題
  2 $(function () {
  3     tabClose();
  4     tabCloseEven();
  5 })
  6 
  7 function tabClose() {
  8     /*雙擊關閉TAB選項卡*/
  9     $(".tabs-inner").dblclick(function () {
 10         var subtitle = $(this).children(".tabs-closable").text();
 11         $('#tabs').tabs('close', subtitle);
 12     })
 13     /*爲選項卡綁定右鍵*/
 14     $(".tabs-inner").bind('contextmenu', function (e) {
 15         $('#mm').menu('show', {
 16             left: e.pageX,
 17             top: e.pageY
 18         });
 19         var subtitle = $(this).children(".tabs-closable").text();
 20         $('#mm').data("currtab", subtitle);
 21         $('#tabs').tabs('select', subtitle);
 22         return false;
 23     });
 24 }
 25 //綁定右鍵菜單事件
 26 function tabCloseEven() {
 27     $('#mm').menu({
 28         onClick: function (item) {
 29             closeTab(item.id);
 30         }
 31     });
 32     return false;
 33 }
 34 
 35 //建立/移除tab
 36 var index = 0;
 37 function addTab(subtitle, url, icon) {
 38     index++;
 39     if (!$('#tabs').tabs('exists', subtitle)) {
 40         $('#tabs').tabs('add', {
 41             title: 'Tab' + index,
 42             content: createFrame('http://www.baidu.com/'),
 43             closable: true,
 44             icon: ''
 45         });
 46     } else {
 47         $('#tabs').tabs('select', subtitle);
 48         $('#mm-tabupdate').click();
 49     }
 50     tabClose();
 51 }
 52 function removeTab() {
 53     var tab = $('#tabs').tabs('getSelected');
 54     if (tab) {
 55         var index = $('#tabs').tabs('getTabIndex', tab);
 56         $('#tabs').tabs('close', index);
 57     }
 58 }
 59 //建立Frame
 60 function createFrame(url) {
 61     var s = '<iframe scrolling="auto" frameborder="0"  src="' + url + '" style="width:100%;height:100%;"></iframe>';
 62     return s;
 63 }
 64 
 65 //關閉tab
 66 function closeTab(action) {
 67     var alltabs = $('#tabs').tabs('tabs');
 68     var currentTab = $('#tabs').tabs('getSelected');
 69     var allTabtitle = [];
 70     $.each(alltabs, function (i, n) {
 71         allTabtitle.push($(n).panel('options').title);
 72     })
 73     switch (action) {
 74         case "refresh":
 75             var iframe = $(currentTab.panel('options').content);
 76             var src = iframe.attr('src');
 77             $('#tabs').tabs('update', {
 78                 tab: currentTab,
 79                 options: {
 80                     content: createFrame(src)
 81                 }
 82             })
 83             break;
 84         case "close":
 85             var currtab_title = currentTab.panel('options').title;
 86             $('#tabs').tabs('close', currtab_title);
 87             break;
 88         case "closeall":
 89             $.each(allTabtitle, function (i, n) {
 90                 if (n != onlyOpenTitle) {
 91                     $('#tabs').tabs('close', n);
 92                 }
 93             });
 94             break;
 95         case "closeother":
 96             var currtab_title = currentTab.panel('options').title;
 97             $.each(allTabtitle, function (i, n) {
 98                 if (n != currtab_title && n != onlyOpenTitle) {
 99                     $('#tabs').tabs('close', n);
100                 }
101             });
102             break;
103         case "closeright":
104             var tabIndex = $('#tabs').tabs('getTabIndex', currentTab);
105 
106             if (tabIndex == alltabs.length - 1) {
107                 alert('親，後邊沒有啦 ^@^!!');
108                 return false;
109             }
110             $.each(allTabtitle, function (i, n) {
111                 if (i > tabIndex) {
112                     if (n != onlyOpenTitle) {
113                         $('#tabs').tabs('close', n);
114                     }
115                 }
116             });
117             break;
118         case "closeleft":
119             var tabIndex = $('#tabs').tabs('getTabIndex', currentTab);
120             if (tabIndex == 1) {
121                 alert('親，前邊那個上頭有人，咱惹不起哦。 ^@^!!');
122                 return false;
123             }
124             $.each(allTabtitle, function (i, n) {
125                 if (i < tabIndex) {
126                     if (n != onlyOpenTitle) {
127                         $('#tabs').tabs('close', n);
128                     }
129                 }
130             });
131             break;
132         case "exit":
133             $('#closeMenu').menu('hide');
134             break;
135     }
136 }

　　html代碼：

View Code

　　效果：

6，表單Form

　　內容管理少不了form表單，其實在easyui使用form表單最簡單，樣式、驗證、佈局等都是提供的，只要咱們簡單設置一下屬性就能夠了，demo文件夾-form文件夾下的basic.html，咱們看下文本框的代碼：

1  <input class="easyui-validatebox" type="text" name="email" data-options="required:true,validType:'email'"></input>

　　easyui-validatebox指示驗證文本控件，data-options="required:true,validType:'email'"，required表示文本框必輸，validType表示驗證文本框方式，固然也支持其餘url、電話驗證等，詳細的驗證信息能夠在demo文件夾-validatebox文件夾查看示例。form表單沒什麼說的，你們看示例demo就能夠找到想要的東西。

　　這邊須要注意的是驗證默認是英文，中文的話須要引用中文包：<script src="EasyUI/locale/easyui-lang-zh_CN.js"></script>

　　html代碼：

View Code

　　效果：

7，對話框Dialog

　　使用dialog和使用form同樣簡單，demo文件夾-Dialog文件夾下的toolbarbuttons.html，咱們建立一個表單提交後對話框提示。

 1     <div id="dlg" class="easyui-dialog" title="dialog" style="width: 250px; height: 120px; padding: 10px"
 2         data-options="
 3                 iconCls: 'icon-save',
 4                 buttons: [{
 5                     text:'Ok',
 6                     iconCls:'icon-ok',
 7                     handler:function(){
 8                         alert('ok');
 9                     }
10                 },{
11                     text:'Cancel',
12                     handler:function(){
13                         alert('cancel');;
14                     }
15                 }]
16             ">
17         確認提交嗎？
18     </div>

　　在data-options-buttons選項，表示對話框下方的按鈕集合，也有在標題下方的按鈕集合，屬性是toolbar，打開dialog代碼：$('#dlg').dialog('open')，關閉參數改成：close便可。dialog裏的內容能夠嵌套div，也能夠嵌套frame，這個能夠隨意擴展。

　　html代碼：

View Code

　　效果：