前端框架easyui layout, Tabs,tree
Posted chenjiahao9527
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端框架easyui layout, Tabs,tree相关的知识,希望对你有一定的参考价值。
一.三大前端框架的
1.easyui=jquery+html4(用来做后台的管理界面)
不要钱,开发速度快,不好看,不支持响应式
2.bootstrap=jquery+html5
好看,开发速度快,部分免费,支持响应式
3.alyui
好看,开发速度快,免费,支持响应式c
二.jQuery EasyUI (layout, Tabs,tree)
下载程序库并导入EasyUI和javascript文件
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"> <script type="text/javascript" src="easyui/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
1.layout(布局)
1.布局容器有5个区域:北、南、东、西和中间。
中间区域面板是必须的,边缘的面板都是可选的。
每个边缘区域面板都可以通过拖拽其边框改变大小,也可以点击折叠按钮将面板折叠起来。
布局可以进行嵌套,用户可以通过组合布局构建复杂的布局结构。
注意:嵌套在内部的布局面板的左侧(西面)面板是折叠的。
创建布局:
为<div/>标签增加名为‘easyui-layout‘的类ID
<body class="easyui-layout"> <div data-options="region:‘north‘,border:false" style="height:60px;background:#B3DFDA;padding:10px">north region</div> <div data-options="region:‘west‘,split:true,title:‘West‘" style="width:150px;padding:10px;">west content</div> <div data-options="region:‘east‘,split:true,collapsed:true,title:‘East‘" style="width:100px;padding:10px;">east region</div> <div data-options="region:‘south‘,border:false" style="height:50px;background:#A9FACD;padding:10px;">south region</div> <div data-options="region:‘center‘,title:‘Center‘"></div> </body>
2.Tabs(工具菜单)
通过标签可以更容易的创建选项卡,我们不需要写任何Javascript代码。只需要给<div/>标签添加一个类ID‘easyui-tabs‘。每个选项卡面板都通过子<div/>标签进行创建,用法和panel(面板)相同。
<div id="tt" class="easyui-tabs" style="width:500px;height:250px;"> <div title="Tab1" style="padding:20px;display:none;"> tab1 </div> <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;"> tab2 </div> <div title="Tab3" data-options="iconCls:‘icon-reload‘,closable:true" style="padding:20px;display:none;"> tab3 </div> </div>
3.tree(树形展示)
树控件在web页面中一个将分层数据以树形结构进行显示。它提供用户展开、折叠、拖拽、编辑和异步加载等功能。
<ul id="tt" class="easyui-tree"> <li> <span>Folder</span> <ul> <li> <span>Sub Folder 1</span> <ul> <li> <span><a href="#">File 11</a></span> </li> <li> <span>File 12</span> </li> <li> <span>File 13</span> </li> </ul> </li> <li> <span>File 2</span> </li> <li> <span>File 3</span> </li> </ul> </li> <li> <span>File21</span> </li> </ul>
树控件也可以定义在一个空<ul>元素中并使用Javascript加载数据。
<ul id="tt"></ul> $(‘#tt‘).tree( url:‘tree_data.json‘ );
使用loadFilter函数处理来自Web Services的JSON数据。
$(‘#tt‘).tree( url: ..., loadFilter: function(data) if (data.d) return data.d; else return data; );
树控件数据格式化
每个节点都具备以下属性:
-
id:节点ID,对加载远程数据很重要。
-
text:显示节点文本。
-
state:节点状态,‘open‘ 或 ‘closed‘,默认:‘open‘。如果为‘closed‘的时候,将不自动展开该节点。
-
checked:表示该节点是否被选中。
-
attributes: 被添加到节点的自定义属性。
-
children: 一个节点数组声明了若干节点。
一些案例:
[ "id":1, "text":"Folder1", "iconCls":"icon-save", "children":[ "text":"File1", "checked":true , "text":"Books", "state":"open", "attributes": "url":"/demo/book/abc", "price":100 , "children":[ "text":"PhotoShop", "checked":true , "id": 8, "text":"Sub Bookds", "state":"closed" ] ] , "text":"Languages", "state":"closed", "children":[ "text":"Java" , "text":"C#" ]
以上是关于前端框架easyui layout, Tabs,tree的主要内容,如果未能解决你的问题,请参考以下文章
JS-jQuery-EasyUI-Layout-Tabs:Tabs 标签页/选项卡
jQuery EasyUI 中文API Layout(Tabs)
网站前端_EasyUI.基础入门.0002.带你玩转jQuery EasyUI Panel组件 ?
jQueryeasyui的easyui-tabs相互嵌套问题,图中MMMM包含了 abcd区域 其中bd区域为空闲区,现在我只想要ac