如鹏网学习笔记（十三）EasyUI

一、EasyUI简介

　　是一组依据JQuery的UI插件集合

　　主要作用：为JQuery对象提供新的不二法门，达成新的听从

　　可以快捷创设出简洁、友好、美观的页面，卓殊适合做网站后台管理页面（不够理想，不相符做前台页面）

　　官方文档：http://www.jeasyui.com/documentation/index.php

二、panel组件的创制

　　分两步：
　　　　1，引入要求的体制文件和js文件
　　　　　　<link rel=”styleSheet” type=”text/css”
href=”easyui的体制地址”>
　　　　　　<link rel=”styleSheet” type=”text/css”
href=”easyui的图标样式地址”>
　　　　　　<script type=”text/javascript”
src=”easyui/jquery.min.js”></script>
　　　　　　<script type=”text/javascript”
src=”easyui/jquery.easyui.min.js”></script>
　　　　2，
　　　　　　格局一,通过安装元素的class属性创设EasyUI控件
　　　　　　　　示例代码：
　　　　　　　　<div class=”easyui-panel”
data-options=”title:’面板组件’,width:300,height:185″>
　　　　　　　　　　<p>内容</p>
　　　　　　　　</div>

　　　　　　情势二，通过js代码创立EasyUI控件
　　　　　　　　//调用对象的panel属性，利用{key1:value1,key2:value2}键值对的花样举行添加
　　　　　　　　$(document).ready(function(){
　　　　　　　　　　$(“#div01”).panel({
　　　　　　　　　　　　width:300,
　　　　　　　　　　　　height:185,
　　　　　　　　　　　　title:’面板组件’,
　　　　　　　　　　　　context:’内容’
　　　　　　　　　　});
　　　　　　　　});

三、panel的属性

　　EasyUI组件的习性用来指定组件的体制、结构、内容等

　　title:　　指定panel的标题

　　width　　指定panel的宽度

　　height　　指定panel的高度

　　fit 　　设置panel的尺寸是或不是适应父容器，值是true只怕false
//注意是父容器

　　border 　　设置panel是都显得边框值是true或然false

　　collapsible 　　设置是还是不是出示可折叠按钮，值是true可能false

　　closeable 　　设置是还是不是出示关闭按钮，值是true只怕false

　　href　　加载另一个页面的内容
注意：被加载页面的body之外的故事情节会被忽略！！

　　注意：很多组件属性的成效也足以选用HTML成分属性可能CSS样式属性的办法来促成
　　在标签内部写style属性，大概<style></style>写CSS代码

四、panel的轩然大波性质

　　onBeforeCollapse panel折叠前触发，可以在事件处理函数中截留折叠

　　onCollapse panel折叠后触发

　　注意：panel事件属于组件的习性，使用上也是以键值对的花样
　　

　　示例代码：
　　　　onBeforeCollapse: function () {
　　　　　　var ss = confirm(“是不是真的要折叠”);
　　　　　　if(ss){

　　　　　　}else{
　　　　　　　　return false;
　　　　　　}
　　　　}

五、panel的方法

　　setTitle 　　设置标题

　　open　　打开

　　close 　　关闭

　　options 　　可以查看参数

　　组件的主意的调用格式：
　　　　jQuery对象.panel方法(方法名,参数列表);
　　　　示例代码：
　　　　$(“#btn01”).click(function () {
　　　　　　$(“#input01”).panel(“setTitle”,”新标题”)
　　　　});

　　　　$(“#btn02”).click(function () {
　　　　　　$(“#input01”).panel(“close”);
　　　　});

　　　　$(“#btn03”).click(function () {
　　　　　　$(“#input01”).panel(“open”);
　　　　});

六、EasyUI的图标

　　使用方式：data-options属性中指定iconCls:’图标名称’
　　示例代码：
　　　　iconCls:’icon-add’

七、链接按钮

　　EasyUI经常把一个超链接改造成一个按钮的体裁使用，称之为linkbutton组件。
　　注意，是将一个超链接举行更改

　　特点：圆角、可添加图标、美观、可以增进事件

　　连接按钮属性：
　　disable 是或不是可以点击，值是true只怕false，true为不得以被点击

　　iconCls 可以选拔图标

　　示例代码：
　　　　<a class=”easyui-linkbutton”
data-options=”disable:true,iconCls:icon-add”>add</a>
　　注意：不要遗忘导入easyui的文本（多个样式属性、jQuery和easyUI）

　　事件性质：
　　onClick
　　示例代码：
　　　　$(document).ready(function(){
　　　　　　$(“a”).linkbutton(“disable”,true);
　　　　});

八、表单控件

　　EasyUI封装了很多表单控件，主如若提供数据有效性校验效率

　　validatebox控件　　
属性：required、validType、invalidMessage、validateOnBlur

　　textbox控件

　　datebox控件　　属性：formatter

　　datetimebox控件

　　form控件　　属性：url、success、onSubmit 方法：submit、validate

九、window组件

　　window组件用来弹出一个子窗口，方便添加、修改等操作

　　窗口组件基于panel组件

　　常用属性：href、width、height

十、tabs标签页组件

　　tabs标签页可以当做由七个panel组成，但同一时间只展示一个panel的内容

　　tabs组件的机要操作有：成立新tab页、接纳tab页

　　<div id=”tt” class=”easyui-tabs”
data-options=”width:600,height:371″>
　　　　<div title=”Tab1″>
　　　　　　tab1 content
　　　　</div>
　　　　<div title=”Tab2″ data-options=”closable:true”>
　　　　　　tab2 content
　　　　</div>
　　</div>

　　属性：fit是不是填充父成分
　　方法：add、exists、select

十一、tree组件

　　tree组件一般用来做系统导航栏

　　<ul class=”easyui-tree”>
　　　　<li>
　　　　　　<span>Folder1</span>
　　　　　　<ul>
　　　　　　　　<li><span>File1</span></li>
　　　　　　　　<li><span>File2</span></li>
　　　　　　</ul>
　　　　</li>
　　　　<li>
　　　　　　<span>Folder2</span>
　　　　　　<ul>
　　　　　　　　<li><span>File4</span></li>
　　　　　　　　<li><span>File5</span></li>
　　　　　　</ul>
　　　　</li>
　　</ul>

　　很多时候使用那种方式为节点添加点击动作：
　　<li>
　　　　<span>
　　　　　　<a href=”#” onClick=”xx()”>File1</a>
　　　　</span>
　　</li>

十二、layout布局组件

　　EasyUI布局组件把页面分为上、下、左、右、中间5个区域，分别名为north、south、west、east、center，每一种区域实际是个panel组件

　　layout组件可以行使在<body>上也可以动用在<div>上

十三、datagrid数据表格

　　属性：url、pagination、toolbar、loadFilter

　　方法：load、reload

　　每回进行分有人操作，都会向url属性指定的路线发送请求，请求参数有page、rows

十四、结束语

　　EasyUI的机要内容就是非同一般组件的用法：panel、linkbutton、form、window、tabs、tree、layout、datagrid等

　　这几个组件基本满意大家对此后台管理体系项目标布局、导航、列表、添加、修改、删除等作用

　　学习的时候假设学习那么些组件就可以了，假若在其后的干活中接纳到EasyUI的其余零件，可以参见官方文档

如鹏网学习笔记（十三）EasyUI

相关文章