一、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. 微信小店调用api代码示例

    刚开始调用微信小店api的时候,可能大家会遇到问题.系统总是提示system error,归根结底还是发送的参数不正确. 下面给出几个调用例子: 例子写得不全. <?php function c ...

  2. 深入了解java虚拟机（JVM） 第八章 常见的jvm调优策略

    一般来说,jvm的调优策略是没有一种固定的方法,只有依靠我们的知识和经验来对项目中出现的问题进行分析,正如吉德林法则那样当你已经把问题清楚写出来,就已经解决了一半.虽然JVM调优中没有固定的策略,但是 ...

  3. “全栈2019”Java第一百零一章：局部内部类覆盖作用域内成员详解

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  4. Hibernate 框架学习

    什么是hibernate框架? 1.它是应用在javaee 三层架构中的dao层 它的底层就是JDBC 它对JDBC进行了封装,好处就是不用写jdbc的代码,和sql语句,它是一个开源的轻量级框架,现 ...

  5. python接口自动化发送get请求 详解（一）

    前言:接口自动化实现自动化脚本比较稳定,主要用到requests模块,后面我会把这个模块单独拉出来写一下. 一.环境安装 1.用pip安装requests模块 >>pip install ...

  6. 4、TensorFlow基础（二）常用API与变量作用域

    1.图.操作和张量 TensorFlow 的计算表现为数据流图,所以 tf.Graph 类中包含一系列表示计算的操作对象(tf.Operation),以及在操作之间流动的数据 — 张量对象(tf.Te ...

  7. 【性能测试】：操作NMON的shell脚本

    nmon是监控服务器的一个工具,可以自动生成快照,每次执行命令就可以了 这里写了一个小的shell脚本,练习一下 #!/bin/sh OSType=`uname` #判断系统类型,选择不同命令 if ...

  8. [性能测试]：关于消费类ISO8583协议脚本的开发

    一,要发送的报文,转化成16进制的,报文如下 "\x01\x52"//报文长度338 "\x60\x00\x24\x00\x00"//TPDU "\x ...

  9. Q72 编辑距离

    给定两个单词 word1 和 word2,计算出将 word1 转换成 word2 所使用的最少操作数 . 你可以对一个单词进行如下三种操作: 插入一个字符 删除一个字符 替换一个字符 示例 1: 输 ...

  10. 搭建django环境

    一.安装django(两种方式) 1.pip install django 2.python setup.py install(下载gjango包:https://www.djangoproject. ...