一、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>上

　　<body class="easyui-layout">
　　　　<div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
　　　　<div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>
　　　　<div data-options="region:'east',title:'East',split:true" style="width:100px;"></div>
　　　　<div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
　　　　<div data-options="region:'center',title:'center title'" style="background:#eee;"></div>
　　</body>

十三、datagrid数据表格

　　属性：url、pagination、toolbar、loadFilter

　　方法：load、reload

　　<table class="easyui-datagrid"
　　　　data-options="title:'用户管理',pagination:true,width:600" >
　　　　<thead>
　　　　　　<tr>
　　　　　　　　<th data-options="field:'email',width:140">登录邮箱</th>
　　　　　　　　<th data-options="field:'name',width:120">真实姓名</th>
　　　　　　　　<th data-options="field:'phone',width:120">手机号码</th>
　　　　　　　　<th data-options="field:'school',width:120">毕业院校</th>
　　　　　　</tr>
　　　　</thead>
　　</table>

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

十四、结束语

　　EasyUI的主要内容就是主要组件的用法：panel、linkbutton、form、window、tabs、tree、layout、datagrid等

　　这些组件基本满足我们对于后台管理系统项目的布局、导航、列表、添加、修改、删除等功能

　　学习的时候只要学习这些组件就可以了，如果在以后的工作中使用到EasyUI的其他组件，可以参考官方文档

如鹏网学习笔记（十三）EasyUI的更多相关文章

  1. 如鹏网学习笔记（十五）ASP.NET MVC核心基础笔记

    一.ASP.Net MVC简介 1,什么是ASP.NET MVC? HttpHandler是ASP.net的底层机制,如果直接使用HttpHandler进行开发难度比较大.工作量大.因此提供了ASP. ...

  2. 如鹏网学习笔记（七）HTML基础

    HTML笔记 一.HTML简介 1,HTML (Hyper Text Mark-up Language) 超文本标记语言,是一种编程语言,也可以说是一种标准.规范. 2,HTML提供了一系列标记(标签 ...

  3. 如鹏网学习笔记（四）.Net常用类库

    .Net常用类库 一.String成员方法(常用) 1,bool Contains(string str) 判断字符串对象是否包含给定的内容 2,bool StartsWith(String str) ...

  4. 如鹏网学习笔记（十）DOM

    DOM笔记一.DOM简介 Document Object Model 文档对象模型 DOM的节点树模型:整个文档按照从大到小的节点划分,每一个内容都算作一个节点 DOM API 编程接口 可以用来操作 ...

  5. 如鹏网学习笔记（九）JavaScript

    JavaScript笔记 一.JavaScript简介 1,JavaScript是一种计算机编程语言,可以像等其他编程语言那样定义变量,执行循环等. 2,JavaScript代码主要执行在浏览器上,为 ...

  6. 如鹏网学习笔记（十四）ASP.NET

    Asp.net笔记 一.Socket类 进行网络编程的类,可以在两台计算机之间进行网络通讯 过程: 向服务器发送指令: GET /index.html HTTP/1.1 Host:127.0.0.1: ...

  7. 如鹏网学习笔记（五）MySql基础

    MySQL基础 一.数据库概念 1,网友装备信息.论坛帖子信息.QQ好友关系信息.学籍管理系统中的学生信息等都要“持久化”的保存到一个地方, 如果通过IO写到文件中,那么会非常麻烦,而且不利于多人共享 ...

  8. 如鹏网学习笔记（十一）JQuery

    一.jQuery简介 jQuery是一个JavaScript库,特性丰富,包含若干对象和很多函数,可以替代传统DOM编程的操作方式和操作风格 jQuery通过对DOM API.DOM事件的封装,提供了 ...

  9. 如鹏网学习笔记（八）CSS

    CSS 一.CSS简介 1,CSS (Cascading Style Sheets) 级联样式表 ,是一种计算机语言,用来控制HTML内容的显示效果 2,CSS预先定义了众多的和显示效果有关的样式属性 ...

随机推荐

  1. BZOJ3210: 花神的浇花集会（坐标系变换）

    题面 传送门 题解 坐标系变换把切比雪夫距离转化为曼哈顿距离 那么对于所有的\(x\)坐标中,肯定是中位数最优了,\(y\)坐标同理 然而有可能这个新的点不合法,也就是说不存在\((x+y,x-y)\ ...

  2. ecshop后台0day漏洞原理+利用方法 XSS+Getshll

    发布日期:2012-10.25 发布作者:dis9@ztz 漏洞类型:跨站攻击 代码执行 0x0 后台getshell 在 includes/cls_template.php fetch函数 /** ...

  3. java使用memcached2--集群部署

    一.集群安装 1.编译安装magent-0.5到/usr/local/下 # cd /usr/local # mkdir magent # cd magent/ # wget http://memag ...

  4. PHP 访问链接的3种方式

    对于php访问url的方法比价多,对于一些防护比较低的网站,可以轻易的实现刷网站浏览量的可能 1.fopen方式 function access_url($url) { if ($url=='') r ...

  5. 实例的初始化由JVM装载类的时候进行，保证了线程的安全性

    在23种设计模式中,单例是最简单的设计模式,但是也是很常用的设计模式.从单例的五种实现方式中我们可以看到程序员对性能的不懈追求.下面我将分析单例的五种实现方式的优缺点,并对其在多线程环境下的性能进行测 ...

  6. js的语言的理解

    1.所谓字面量,就是语言语法 2.在js编译器读到语法时候,执行时候创建对象:在赋值的时候创建一个对象,或者是一个匿名对象. 3.函数定义本身是一个对象:执行时候不产生实例对象:这跟python类不一 ...

  7. FlowPortal-BPM——数据库交互：创建新接口（类库）—将数据提交给其他程序使用

    使用到的是“流程设计”→“自定义插件” 一.创建新类库 (1)新建类库→引用文件 (2)新建ado.net数据访问类(要操作的数据库) (3)右键类库名称→属性→生成→输出→路径:安装目录下UserD ...

  8. Web篇之JS性能优化

    首先,性能优化分好几个方面,本章我们从js方面来优化. 1:垃圾收集 日常中的某些情况下垃圾收集器无法回收无用变量,导致的一个结果就是——内存使用率不断增高,以下为对应的情况以及处理方法. ①对象相互 ...

  9. Python 求“元组、列表、字典、数组和矩阵”的大小

    总结: 首先 import numpy as np A = np.random.randint(1,100,size = (4,5)) >>A>>array([[56, 96, ...

  10. Mac 10.12安装图片标注工具PxCook

    说明:现在基本是PxCook最好用,其余都是收费的,并且支持Android标注dp,主要是用于App开发时坐标定位,求到比例等等. 下载: (链接: https://pan.baidu.com/s/1 ...