1.JQuery EasyUI之LayOut布局
EasyUI是一款基於JQuery開發的前端框架，它集成很多漂亮的樣式和相應的功能，大大方便了我們對前端開發的難度。對於web項目而言，主頁面的一定是要進行良好的布局的，EasyUI中已經提供了一些LayOut的樣式供我們修改。
對於前端框架的使用，我們要將它所需要的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總的樣式文件
2.EasyUI總的圖片文件
3.JQuery文件
4.EasyUI的JS文件
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，實現我們需要的一些功能。