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;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，实现我们需要的一些功能。