JqueryEasyUI教程入门篇
什么是jQueryEasyUI？
JqueryUI是一组基于jQuery的UI插件集合
学习jQueryEasyUI的条件？
必须掌握Jquery的基本语法知识
jQueryEasyUI的特点？
1、支持HTML5
2、支持拓展，可以根据自己的需要拓展控件
3、源代码加密，商业版付费
其他的同类型产品？
1、国产的DWZ插件
2、独立的ExtJs插件
一个简单的Demo?
通过一个简单的Demo来熟悉EasyUI
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript" src="easyUI/jquery.min.js"></script> <script type="text/javascript" src="easyUI/jquery.easyui.min.js"></script> <script type="text/javascript" src="easyUI/locale/easyui-lang-zh_CN.js"></script> <link rel="stylesheet" type="text/css" href="easyUI/themes/default/easyui.css" /> <link rel="stylesheet" type="text/css" href="easyUI/themes/icon.css" /> </head> <body> <h2>Basic Calendar</h2> <p>Click to select date.</p> <div style="margin:20px 0"></div> <div class="easyui-calendar" style="width:250px;height:250px;"></div> </body> </html>
从上面的例子中可以看出使用EasyUI必须引入一些文件
<script type="text/javascript" src="easyui/jquery.min.js"></script>
//引入jquery核心库
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
//引入jquery UI核心库
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
//引入EasyUI中文提示信息
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />
//引入EasyUI核心UI文件CSS
<linke rel="stylesheet" type="text/css" href="easyui/thems/icon.css" />
//引入EasyUI图标文件
如果有自己的JS文件的话，那么要引入自己定义的JS文件
JqueryEasyUI中文API文档下载地址
加载UI组件的方法
1、使用class方式加载
命名的方法为easyui-方法名
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript" src="easyUI/jquery.min.js"></script> <script type="text/javascript" src="easyUI/jquery.easyui.min.js"></script> <script type="text/javascript" src="easyUI/locale/easyui-lang-zh_CN.js"></script> <link rel="stylesheet" type="text/css" href="easyUI/themes/default/easyui.css" /> <link rel="stylesheet" type="text/css" href="easyUI/themes/icon.css" /> </head> <body> <div id="box" class="easyui-dialog" style="width:400px;height:200px">内容部分</div> </body> </html>
2、使用JS调用加载
先创建一个JS文件，命名为Demo.js
$(function(){ $("#box").dialog(); })
创建一个HTML文件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript" src="easyUI/jquery.min.js"></script> <script type="text/javascript" src="easyUI/jquery.easyui.min.js"></script> <script type="text/javascript" src="easyUI/locale/easyui-lang-zh_CN.js"></script> <script type="text/javascript" src="Demo.js"></script> <link rel="stylesheet" type="text/css" href="easyUI/themes/default/easyui.css" /> <link rel="stylesheet" type="text/css" href="easyUI/themes/icon.css" /> </head> <body> <div id="box" title="leslieDemo" style="width:400px;height:200px">内容部分</div> </body> </html>
使用easyload.js文件智能加载
在网速较慢的情况下可以使用，但是不建议使用，而且语法会稍微有些不同，你的难度会提高了
Parser解析器
Parser解析器是专门解析渲染各种UI组件
Parser属性
$.parser.auto=true 说明：定义是否自动解析EasyUI组件
$.parser.auto=false 关闭自动解析功能
这个方法不能在$(function(){})中存在
Parser方法
$.parser.parse 传参：空或者JQ选择器 说明：解析指定的UI组件
例如：
$.parser.parse() //解析全部的UI组件
$.parser.onComplete 传参：回调函数 说明：解析完毕后执行
onComplete的使用
$.parser.onComplete=function(){ alert('UI解析完毕'); };
PS:使用指定UI解析，必须设置父类容器才可以解析到，也就是说必须有子类的存在 比如：
上面的弹窗效果应该这样设置
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript" src="easyUI/jquery.min.js"></script> <script type="text/javascript" src="easyUI/jquery.easyui.min.js"></script> <script type="text/javascript" src="easyUI/locale/easyui-lang-zh_CN.js"></script> <script type="text/javascript" src="Demo.js"></script> <link rel="stylesheet" type="text/css" href="easyUI/themes/default/easyui.css" /> <link rel="stylesheet" type="text/css" href="easyUI/themes/icon.css" /> </head> <body> <div id="box" > <div title="leslieDemo" style="width:400px;height:200px">内容部分</div> </div> </body> </html>
其他的一些基本的介绍详见：jQuery Easy UI 帮助手册
