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，实现咱们须要的一些功能。