EasyUI之Layout布局和Tabs页签的使用

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;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="150px;padding:3px;">
11             <div  class="easyui-accordion" style="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%;  100%;border:none ">
26                 <div title="用户管理" style="padding:10px;height:100%;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，实现我们需要的一些功能。