Easy UI 1.3.2
以前听说Easy
UI很不错,当了一个dome,闲着没事就看了一下,也整理一下为了自己更好的记忆,也希望对象我这样小菜有帮助吧
先从后台管理的主页面开始,如要要做主页需要了解以下几项
data-options是jQuery
Easyui 最近两个版本才加上的一个特殊属性。通过这个属性,我们可以对easyui组件的实例化可以完全写入到html中,例如:
<div
class="easyui-dialog"
style="width:400px;height:200px"
data-options="title:‘My
Dialog‘,collapsible:true,iconCls:‘icon-ok‘,onOpen:function(){}"> dialog
content.</div>
属性,事件,都可以直接写在data-options里面,这样就方便多了。
来自:http://easyui.btboys.com/the-use-of-easyui-data-options.html
<col>
名称
类型
说明
默认值
title
string
Layout panel 的标题文字。
null
region
定义 layout panel
的位置,其值是下列之一:north、south、east、west、center。
border
boolean
True 就显示 layout panel 的边框。
true
split
True 就显示拆分栏,用户可以用它改变panel 的尺寸。
false
iconCls
在panel 头部显示一个图标的CSS 类。
href
从远程站点加载数据的 URL 。
然后找到EasyUi
中的Layout文件夹Full.html,打开代码如
<head>
<meta charset="UTF-8">
<title>Full Layout - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<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‘,split:true,border:false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>
<div data-options="region:‘center‘,title:‘Center‘"></div>
</body>
</html>
看到以上就知道怎么去做了,直接copy就行了。
之后我想在west中添加菜单栏,实现单击左边的菜单栏在center中显示指定页面,也就是往center中添加tabs
首先了解一下tabs的属性:
该Tab的标题文字。
content
该Tab面板内容
一个URL,加载远程内容以填充Tab面板。
cache
当true时,缓存Tab面板,当href 属性设置后有效
icon
增加一个CSS class图标以显示在Tab面板的标题旁。
closable
当true时,该Tab面板将显示可关闭按钮,点击能关闭该Tab面板。
selected
当true时,该Tab面板将被选中。
width
int
面板宽度,自动列宽。
height
面板高度,自动列高。
tabs的方法:
1)resize:重绘该Tab容器的布局。
2)add:新增加一个Tab面板,该选项参数是一个配置对象,看Tab面板属性可获取更多信息。
3)close:关闭该Tab面板,标题参数显示你要关闭的对象。
4)select:选择一个Tab面板。
5)exists:如果该Tab面板存在即显示。
demo中代码如下:
<div class="easyui-tabs" style="width:700px;height:250px">
<div title="About" style="padding:10px">
<p style="font-size:14px">jQuery EasyUI framework help you build your web page easily.</p>
<ul>
<li>easyui is a collection of user-interface plugin based on jQuery.</li>
<li>complete framework for HTML5 web page.</li>
<li>easyui save your time and scales while developing your products.</li>
<li>easyui is very easy but powerful.</li>
</ul>
</div>
<div title="My Documents" style="padding:10px">
<ul class="easyui-tree" data-options="url:‘../tabs/tree_data1.json‘,animate:true"></ul>
<div title="Help" data-options="iconCls:‘icon-help‘,closable:true" style="padding:10px">
This is the help content.
</div>
步骤也不难,指定tabs的容器(设置class="easyui-tabs"),之后只要在该容器下放一个div就是一个tab,当然只是下面一级div有效
例如在help后面加上一个test
运行效果如下
接下来就可以通过点击菜单栏创建tabs,在center显示
// 增加一个新的 tab panel
$(‘#tt‘).tabs(‘add‘, {
title: ‘New Tab‘,
content: ‘Tab Body‘,
closable: true
});
加好菜单栏,就可以完成了,效果如下
最后有个疑问:就是Layout
Panel的herf属性,我试着给了一个网址,却一直在load...,询问下
整个代码如下:
View Code