easyUI自学02

Posted on 2017-11-26 21:43 疯狂麦麦麦阅读(168) 评论(0) 收藏举报

　　一直想做一个后台界面，看过了面板、布局后就可以做一个简单的页面了。　

　　布局容器easyui-layout有5个区域：北(north)、南(south)、东(east)、西(west)和中间(center)。中间区域面板是必须的，边缘的面板都是可选的。每个边缘区域面板都可以通过拖拽其边框改变大小，也可以点击折叠按钮将面板折叠起来。布局可以进行嵌套，用户可以通过组合布局构建复杂的布局结构。

　　这里用到的一些属性：

　　region：就是north、south、west、east、center中的值，定义布局面板位置。

　　title：标题栏，可以通过设置noheader:true来不创建标题栏，easyui-layout是和panel和resizable有依赖关系的可以理解为继承，所以有些属性和他们是一样的，noheader就是；

　　split：默认值为false，如果为true，是可以拉拽改变边框大小；

　　fit：默认值为false，如果设置为true，布局组件将自适应父容器。当使用'body'标签创建布局的时候，整个页面会自动最大。

　　给div的class设置了easyui-accordion样式，div就成了一个分类面板了。

　　分类面板的一些属性：

　　animate：默认值为true，定义在展开和折叠的时候是否显示动画效果。

　　selected：设置初始化时默认选中的面板索引号。

　　给div的class设置了easyui-tabs样式，div就成了一个选项卡面板了。　　

　　选项卡面板的属性：

　　content：选项卡面板的内容；

　　tools：可以给选项卡里添加工具栏；　　

　　可以通过两种方式添加工具栏：；

　　1、通过数组定义工具菜单。

　　$('#tt').tabs({ 　　　　　　　　　
　　　　　　tools:[{
　　　　　　　　　　iconCls:'icon-add', //添加的第一个工具的图标
　　　　　　　　　　handler:function(){ //点击第一个图标时触发的事件
　　　　　　　　　　　　alert('添加')
　　　　　　　　　　}
　　　　　　　　　},{
　　　　　　　　　　iconCls:'icon-save',  //添加的第二个工具的图标
　　　　　　　　　　handler:function(){  //点击第二个图标时触发的事件
　　　　　　　　　　　　alert('保存')
　　　　　　　　　　}
　　　　　　　　　}]
　　});

　　2：通过存在的DOM容器定义工具菜单。

　　$('#tt').tabs({
　　　　tools:'#tab-tools'
　　});
　　<div id="tab-tools">
　　　　<a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-add"></a>
　　　　<a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-save"></a>
　　</div>

　　这里如果给添加的工具添加点击事件，直接onclick()就可以了

 1 <html>
 2     <head>
 3         <title>学生管理系统</title>
 4         <!--要想在页面中使用EasyUI，那么首先要做的就是在页面中引入必要js和css样式文件，以在jsp文件中使用EasyUI为例，文件引入的顺序如下所示-->
 5         <!-- 引入JQuery -->
 6         <script src="easyUI/jquery.min.js"></script>
 7         <!-- 引入EasyUI -->
 8         <script src="easyUI/jquery.easyui.min.js"></script>
 9         <!-- 引入EasyUI的中文国际化js，让EasyUI支持中文 -->
10         <script type="text/javascript" src="easyUI/locale/easyui-lang-zh_CN.js"></script>
11         <!-- 引入EasyUI的样式文件-->
12         <link href="easyUI/themes/default/easyui.css" rel="stylesheet" />
13         <!-- 引入EasyUI的图标样式文件-->
14         <link href="easyUI/themes/icon.css" rel="stylesheet" />    
15         <script type="text/javascript">
16             $(function(){
17                 $("#divcenter").tabs({
18                     tools:[
19                     {
20                         iconCls:'icon-add',
21                         handler:function(){
22                             $("#divcenter").tabs('add',{
23                                 title:'new',
24                                 content:'我是添加的新标签',
25                                 closable:true
26                             })
27                         }
28                     },
29                     {
30                         iconCls:'icon-remove',
31                         handler:function(){
32                             var tab = $('#divcenter').tabs('getSelected');
33                             var index = $('#divcenter').tabs('getTabIndex',tab);
34                             //alert(index);
35                             $("#divcenter").tabs('close',index);
36                         }
37                     }
38                     ]                    
39                 })
40             })
41         </script>
42     </head>
43     <body class="easyui-layout">
44         <div data-options="region:'north',title:'上北',noheader:true" style="height:80px;background-color:gray">
45             <div style="width: 260px;height: 50px;line-height: 50px;text-align: center;font-weight: bold;font-size:20px;color:#fff;margin-left:165px">
46             疯狂麦麦麦学校管理系统
47             </div>
48             <div style="float:right;padding: 0 60px 0 0;font-size:15px;color:#fff">
49                 XXX，欢迎登陆 | <a href="#">退出</a>
50             </div>
51         </div>
52         <div class="easyui-accordion" data-options="region:'west',title:'菜单栏',split:true,collapsible:false"style="width:180px;">
53             <div title="west-accordion1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">
54                 <h2>我是处于布局west里的折叠面板1</h2>
55             </div>   
56             <div title="west-accordion2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">
57                 <h2>我是处于布局west里默认初始化选中打开的折叠面板2</h2>
58             </div>   
59             <div title="west-accordion3" data-options="iconCls:'icon-help'">
60                 <h2>我是处于布局west里的折叠面板3</h2>
61             </div>       
62         </div>
63         <div id="divcenter" class="easyui-tabs" data-options="region:'center',title:'中发财',split:true,noheader:true"style="width:180px;">
64             <div title="tab1" data-options="iconCls:'icon-man',closable:true" style="overflow:auto;"></div>
65         </div>
66     </body>
67 </html>

View Code

　　效果如上图，由布局容器里的北，西和中间部分组成，给西设置成分类面板的样式，给中设置成选项卡的样式，就可以达到这种效果。

　　除了属性，还有方法，这里就用到了选项卡面板里的四个方法：

　　 add:添加一个面板　

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

　　　　　　title:'New Tab',

　　　　　　content:'Tab Body',

　　　　　　closable:true,

　　　　　　tools:[{

　　　　　　　　iconCls:'icon-mini-refresh',

　　　　　　　　handler:function(){

　　　　　　　　　　alert('你点击的是新添加的标签');

　　　　　　　　 }

　　　　　　 }]

　　}); 这里要注意tools是属性，他的写法是tools[{iconCls1：样式1，方法1()},{iconCls2：样式2，方法2()},.......]

　　以上代码就是添加了一个标题栏是New Tab，内容是Tab Body，可以关闭，标题栏里还含有一个具有图标的工具栏的新的选项，点击图标会输出你点击的是新添加的标签

　　getSelected:方法参数是tab，获取选择的选项卡面板。

　　getTabIndex:获取指定选项卡面板的索引。一般情况下getSelected和getTabIndex会一起使用，下面官方给出的例子就是获取到选定的选项卡面板的索引：

　　 var tab = $('#tt').tabs('getSelected');
　　 var index = $('#tt').tabs('getTabIndex',tab);
　　 alert(index);

　　close:关闭一个面板

　　看完官方的例子，可以看出在easyui里使用它的方法的时候的格式是：$("#div01").+tabs('方法名'，参数)如果是多个参数的情况下就是用json的格式：　　$("#div01").+tabs('方法名'，{参数1：值，参数二：值，....}) ,这里的tabs是根据你的方法属于哪个面板来确定的，如class等于easyui-panel时，用到他里面的方法resize（设置面板大小和布局。参数对象包含下列属性：width：新的面板宽度。height：新的面板高度。left：新的面板左边距位置。top：新的面板上边距位置,可以不用设置全部参数），就写成：

　　$('#pp').panel('resize',{
　　width: 600,
　　height: 400

　　});

刷新页面返回顶部