1.JQuery EasyUI之LayOut布局

EasyUI是一款基于JQuery开发的前端框架，它集成很多漂亮的样式和相应的功能，大大方便了我们对前端开发的难度。对于web项目而言，主页面的一定是要进行良好的布局的，EasyUI中已经提供了一些LayOut的样式供我们修改。

对于前端框架的使用，我们要将它所需要的js文件和样式文件（图片文件，语言开发包）全部拷贝到我们的项目中，因为EasyUI是基于JQuery的所以我们首先得把JQuery的js文件引入，具体的相应的文件如下

  <link href="~/Content/themes/default/easyui.css" rel="stylesheet" />

     <link href="~/Content/themes/icon.css" rel="stylesheet" />

     <script src="~/Scripts/jquery-1.8.2.min.js"></script>

     <script src="~/Scripts/jquery.easyui.min.js"></script>

     <script src="~/Scripts/easyui-lang-zh_CN.js"></script>

1.EasyUI总的样式文件

2.EasyUI总的图片文件

3.JQuery文件

4.EasyUI的JS文件

5.中文语言包文件

将这些文件全部引入后，然后我们就可以找到EasuUI中关于LayOut布局的相关demo，将他们的代码全部拷贝过来，然后相应的修改，达到我们想要的效果

   <body class="easyui-layout">

         <!--上面-->

         <div data-options="region:'north',border:false" style="height:80px;background:#B3DFDA;padding:10px">

         <img  src="~/Content/Images/logo.jpg" style="height:60px;width:auto;margin:0px;float:left"/>

         <span class="txt" style="float:left">管理系统</span>

         </div>

         <!--左面-->

         <div data-options="region:'west',split:true,title:'管理选项卡'" style="width:150px;padding:3px;">

             <div  class="easyui-accordion" style="width:500px;height:300px;">

                 <div title="用户管理" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;">

                     <a href="javascript:void(0)" class="linkButton" url="/UserInfo/Index">用户管理</a>

                </div>

                 <div title="角色管理" data-options="iconCls:'icon-help'" style="padding:10px;">

                     <a href="javascript:void(0)" class="linkButton" url="/RoleInfo/Index">角色管理</a>

                  </div>

             </div>

         </div>

         <!--中间-->

         <div data-options="region:'center'">

             <div id="tt" class="easyui-tabs" style=" height: 100%; width: 100%;border:none ">

                 <div title="用户管理" style="padding:10px;height:100%;width:100%">

                     <iframe src="/UserInfo/Index" height="100%" width="100%" />

                 </div>

             </div>

         </div>

     </body>

2.EasyUI之Tabs

在实际的开发中我们经常遇到使用Tabs的功能，可以让我们在页面中实现不同内容的切换，减少Page的数量，具体的Easyui的demo效果，此时我们可以去查找可以动态添加Tabs的demo，把里面的Js代码拷贝过来加以使用。

我们可以把Tabs的内容显示在LayOut的中间的，如上面的代码中的25行所示，当我们每次点击左边中的条目的时候，在右边添加相应的Tabs，同时点击不同的左边内容添加不同的Tabs,同时替换ifame中的内容，如果某一Tabs已经存在了，再次点击的时候不应该继续创建，而是直接focus。

实现上面叙述的功能，需要查阅EasyUI的开发手册，里面有相关的属性和方法，具体用到的：add、exists、select

 <script >

         $(function () {

             //绑定单击选项卡事件

             $('.linkButton').click(function () {

                 var text = $(this).text();

                 var urlStr = $(this).attr("url");

                 var isExt = $('#tt').tabs('exists', text);

                 if (isExt)

                 {

                     $('#tt').tabs('select', text);

                     return;

                 }

                 $('#tt').tabs('add', {

                     title: text,

                     content:ShowUrl(urlStr),

                     closable: true

                 });

             });

         });

         function ShowUrl(url) {

             var content = '<iframe src="' + url + '" height="100%" width="100%" />';

             return content;

         }

     </script>

从这些代码中可以看出EasyUI的代码的格式：$('#tt').tabs('exists', text);第一个参数为方法的名称，第二个参数是传入需要的参数

最后的总结：这些前端框架（EasyUI、miniUI等）的使用，大都是这种开发模式，引入相应的css文件和Js文件，根据自己的需求，寻找相应的demo，然后在demo的基础上修改样式，同时根据开发手册查找相应的api，实现我们需要的一些功能。

EasyUI之Layout布局和Tabs页签的使用的更多相关文章

  1. 第二百零二节，jQuery EasyUI，Layout(布局)组件

    jQuery EasyUI,Layout(布局)组件 学习要点: 1.加载方式 2.布局属性 3.区域面板属性 4.方法列表 本节课重点了解 EasyUI 中 Layout(布局)组件的使用方法,这个 ...

  2. easyui tabs页签显示在底部属性

    data-options="tabPosition:'bottom'" 如果没有该属性  页签默认显示在最上面,效果如下 当加上了该属性  ,页签会出现在底部

  3. CI 笔记3 （easyui 的layout布局，最小化layout原型）

    在做easyui的layout的布局时,最小化一个原型,分2步,一个是div的父标签,一个是body做父标签,全屏的. 步骤分别为: 在设置的5个区中,div的最后一个,必须是data-options ...

  4. java web前端easyui（layout+tree+双tabs）布局+树+2个选项卡tabs

    1.列出要实现的样式: 2.实现的代码: 分三大部分: 1):页面主体部分:mian.vm <html> <head> <title>Ks UI</title ...

  5. 布局-EasyUI Panel 面板、EasyUI Tabs 标签页/选项卡、EasyUI Accordion 折叠面板、EasyUI Layout 布局

    EasyUI Panel 面板 通过 $.fn.panel.defaults 重写默认的 defaults. 面板(panel)当做其他内容的容器使用.它是创建其他组件(比如:Layout 布局.Ta ...

  6. 经历：easyui的layout自适应高度布局

    在使用easyui的layout布局的时候,在某种情况下,我们会在后续的逻辑中修改一下layout的某个region的高度,那么该怎么做呢?  我就遇到了这样的情况,今天需求经理提出了一个需求:认证用 ...

  7. easyui实现树形菜单Tab功能、layout布局

    一:常见三种前端ui框架 在初学者入门的状态下,我们常见的前端框架有三种且都有自己的官方网站: 1.easyui:官方网站(http://www.jeasyui.net/) 基于jquery的用户页面 ...

  8. 7.Layout布局(tabs、accordion、layout)

    一.tabs选项卡: 二.accordion手风琴: 三.经由div标记创建layout布局: 注意:center不是定位得到的,而是通过其他的几个位置计算得到的,如果不写center整个布局就无法初 ...

  9. MVC之LayOut布局页

    LayOut布局页,就是相当于WebForm中母版页,实现了一个代码的共用和公共布局的作用. 布局页的使用 (1)添加新项,选择MVC布局页 <!DOCTYPE html> <htm ...

随机推荐

  1. C中入栈顺序和运算顺序有关系吗？

    如下代码会怎么执行? printf( "%c,%c,%c\n", getchar(), getchar(), getchar() ); 实际测试,是倒序执行,感觉上符合“C函数的形 ...

  2. nodejs基础 -- 模块系统

    为了让nodejs的文件可以相互调用,nodejs提供了一个简单的模块系统. 模块:是nodejs应用程序的基本组成部分,文件和模块一一对应.即,一个nodejs文件就是一个模块,这个文件可能是jav ...

  3. Android ListView使用BaseAdapter与ListView的优化 (转至 http://www.open-open.com/lib/view/open1339485728006.html)

    在ListView的使用中,有时候还需要在里面加入按钮等控件,实现单独的操作.也就是说,这个ListView不再只是展示数据,也不仅仅是这一行要来处理用户的操作,而是里面的控件要获得用户的焦点.读者可 ...

  4. SVN版本冲突，导致出现Files 的值“ < < < < < < < .mine”无效。路径中具有非法字符。

    SVN版本冲突,导致出现Files 的值“ < < < < < < < .mine”无效.路径中具有非法字符. 右键编辑.... 打开并删除含有'<&l ...

  5. react新手入门(序)

    之前在软件园使用的是react,当时为了做个集光推送,自己去搭过react,这次项目中继续使用react,于是又重新操作了遍,恰巧公司买了本react的书籍,这本书写的非常好,看着并不觉得拗口,很容易 ...

  6. layer弹出层效果

    layer是一款近年来备受青睐的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验. http://layer.layui.com/ 演示:h ...

  7. R基本介绍

    一.基本介绍:1. 警告:在输入命令前请切换到英文模式.否则你的一大段代码可能因为一个中文状态的括号而报错,R语言的报错并不智能无法指出错误的具体位置.最可怕的是不报错但就是无法输出正确结果.2. 警 ...

  8. How many virtual users do I need? 计算需要的vuser

    基本公式:--------English:Total Transations = TPS * Vuser==>Vuser = Total Transations / TPS=========== ...

  9. C#委托和事件定义和使用

    委托 定义委托的语法和定义方法比较相似,只是比方法多了一个关键字delegate ,我们都知道方法就是将类型参数化,所谓的类型参数化就是说该方法接受一个参数,而该参数是某种类型的参数,比如int.st ...

  10. linux中，如何设置每隔2个小时就执行一次某个脚本？

    需求描述: 今天同事问了一个linux上crontab定时任务的问题,说,如何调整一个定时任务每2个小时 执行一次,在此记录下. 操作过程: 1.通过以下的方式设置,每2个小时执行一次脚本 */ * ...