EasyUI之Layout佈局和Tabs頁籤的使用

時間 2019-11-19

標籤 easyui layout 佈局 tabs 使用简体版

原文原文鏈接

1.JQuery EasyUI之LayOut佈局javascript

EasyUI是一款基於JQuery開發的前端框架，它集成不少漂亮的樣式和相應的功能，大大方便了咱們對前端開發的難度。對於web項目而言，主頁面的必定是要進行良好的佈局的，EasyUI中已經提供了一些LayOut的樣式供咱們修改。css

對於前端框架的使用，咱們要將它所須要的js文件和樣式文件（圖片文件，語言開發包）所有拷貝到咱們的項目中，由於EasyUI是基於JQuery的因此咱們首先得把JQuery的js文件引入，具體的相應的文件以下前端

1  <link href="~/Content/themes/default/easyui.css" rel="stylesheet" />
2     <link href="~/Content/themes/icon.css" rel="stylesheet" />
3     <script src="~/Scripts/jquery-1.8.2.min.js"></script>
4     <script src="~/Scripts/jquery.easyui.min.js"></script>
5     <script src="~/Scripts/easyui-lang-zh_CN.js"></script>

1.EasyUI總的樣式文件java

2.EasyUI總的圖片文件jquery

3.JQuery文件web

4.EasyUI的JS文件api

5.中文語言包文件前端框架

將這些文件所有引入後，而後咱們就能夠找到EasuUI中關於LayOut佈局的相關demo，將他們的代碼所有拷貝過來，而後相應的修改，達到咱們想要的效果框架

 1   <body class="easyui-layout">
 2         <!--上面-->
 3         <div data-options="region:'north',border:false" style="height:80px;background:#B3DFDA;padding:10px">
 4         <img  src="~/Content/Images/logo.jpg" style="height:60px;width:auto;margin:0px;float:left"/>
 5         <span class="txt" style="float:left">管理系統</span>
 6         </div>
 7 
 8 
 9         <!--左面-->
10         <div data-options="region:'west',split:true,title:'管理選項卡'" style="width:150px;padding:3px;">
11             <div  class="easyui-accordion" style="width:500px;height:300px;">
12                 <div title="用戶管理" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;">
13                     <a href="javascript:void(0)" class="linkButton" url="/UserInfo/Index">用戶管理</a>
14                </div>
15                 <div title="角色管理" data-options="iconCls:'icon-help'" style="padding:10px;">
16                     <a href="javascript:void(0)" class="linkButton" url="/RoleInfo/Index">角色管理</a>
17                  </div>
18                
19             </div>
20         </div>
21 
22         
23         <!--中間-->
24         <div data-options="region:'center'">
25             <div id="tt" class="easyui-tabs" style=" height: 100%; width: 100%;border:none ">
26                 <div title="用戶管理" style="padding:10px;height:100%;width:100%">
27                     <iframe src="/UserInfo/Index" height="100%" width="100%" />
28                 </div>
29 
30             </div>
31             
32         </div>
33     </body>

2.EasyUI之Tabs佈局

在實際的開發中咱們常常遇到使用Tabs的功能，可讓咱們在頁面中實現不一樣內容的切換，減小Page的數量，具體的Easyui的demo效果，此時咱們能夠去查找能夠動態添加Tabs的demo，把裏面的Js代碼拷貝過來加以使用。

咱們能夠把Tabs的內容顯示在LayOut的中間的，如上面的代碼中的25行所示，當咱們每次點擊左邊中的條目的時候，在右邊添加相應的Tabs，同時點擊不一樣的左邊內容添加不一樣的Tabs,同時替換ifame中的內容，若是某一Tabs已經存在了，再次點擊的時候不該該繼續建立，而是直接focus。

實現上面敘述的功能，須要查閱EasyUI的開發手冊，裏面有相關的屬性和方法，具體用到的：add、exists、select

 1 <script >
 2         $(function () {
 3             //綁定單擊選項卡事件
 4             $('.linkButton').click(function () {
 5                 var text = $(this).text();
 6                 var urlStr = $(this).attr("url");
 7                 var isExt = $('#tt').tabs('exists', text);
 8 
 9                 if (isExt)
10                 {
11                     $('#tt').tabs('select', text);
12                     return;
13                 }
14                 $('#tt').tabs('add', {
15                     title: text,
16                     content:ShowUrl(urlStr),
17                     closable: true
18                 });
19             });
20 
21         });
22         function ShowUrl(url) {
23             var content = '<iframe src="' + url + '" height="100%" width="100%" />';
24             return content;
25         }
26     </script>

從這些代碼中能夠看出EasyUI的代碼的格式：$('#tt').tabs('exists', text);第一個參數爲方法的名稱，第二個參數是傳入須要的參數

最後的總結：這些前端框架（EasyUI、miniUI等）的使用，大都是這種開發模式，引入相應的css文件和Js文件，根據本身的需求，尋找相應的demo，而後在demo的基礎上修改樣式，同時根據開發手冊查找相應的api，實現咱們須要的一些功能。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。