[转]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>
[转]JqueryEasyUI教程入门篇的更多相关文章
- JqueryEasyUI教程入门篇
什么是jQueryEasyUI? JqueryUI是一组基于jQuery的UI插件集合 学习jQueryEasyUI的条件? 必须掌握Jquery的基本语法知识 jQueryEasyUI的特点? 1. ...
- CE修改器使用教程 [入门篇]
Cheat Engine 一般简称CE,是一个开放源代码的作弊软件,其功能包括:内存扫描.十六进制编辑器.调试工具,Cheat Engine 自身附带了外挂制作工具,可以用它直接生成外挂工具,CE可以 ...
- [STemWin教程入门篇]第二期:emWin5.xx的详细移植步骤
转自:http://bbs.armfly.com/read.php?tid=1545 重要说明:(0)由于这个移植教程是去年过年的时候做的,用的是5.16,这就不再做个5.20的移植了,方法是一样的. ...
- [STemWin教程入门篇] 第一期:emWin介绍
转自:http://bbs.armfly.com/read.php?tid=1544 SEGGER公司介绍 了解emWin之前,先了解一下SEGGER这家公司,了解生产商才能对emWin有更加全面的认 ...
- OpenCV学习教程入门篇<一、介绍>
OpenCV,是Inter公司开发的免费开源专门因为图像处理和机器视觉的C/C++库,英文全称是Open Source Computer Vision. 1. 可视化语言Matlab与OpenCV都能 ...
- shell教程<入门篇>
由于我平时的工作环境是linux,所以无可避免的经常使用命令行模式和shell脚本,而且有些命令行每天都要输好多遍,比如ssh登录之类的,所以干脆把平时常用的命令都写成脚本文件,所以特意开了一个she ...
- 转:jQuery LigerUI 使用教程表格篇(3) 复选框、多表头、分组、汇总和明细
阅读目录 复选框 多表头 分组 汇总 明细 复选框 grid可以设置复选框模式进行多选,只需要简单的配置 checked:true 获取选中行 如果要获取选中的行,可以用getSelecteds方法: ...
- SQLAlchemy 教程 —— 基础入门篇
SQLAlchemy 教程 -- 基础入门篇 一.课程简介 1.1 实验内容 本课程带领大家使用 SQLAlchemy 连接 MySQL 数据库,创建一个博客应用所需要的数据表,并介绍了使用 SQLA ...
- Android Studio2.0 教程从入门到精通Windows版 - 入门篇
http://www.open-open.com/lib/view/open1468121363300.html 本文转自:深度开源(open-open.com)原文标题:Android Studio ...
随机推荐
- linux 输入java 出现中文乱码
http://jingyan.baidu.com/article/ab69b270de8b4f2ca7189f1d.html 1.查看当前linux的编码 没设置之前是:zh_CN.UTF_8 输入 ...
- Android轻量缓存框架--ASimpleCache
[转] 大神真面目 稀土掘金,这是一个针对技术开发者的一个应用,你可以在掘金上获取最新最优质的技术干货,不仅仅是Android知识.前端.后端以至于产品和设计都有涉猎,想成为全栈工程师的朋友不要错过! ...
- getComputedStyle()与currentStyle
getComputedStyle()与currentStyle计算元素样式 发表于 2011-10-27 由 admin “DOM2级样式”增强了document.defaultView,提供了get ...
- 如何在外网中访问自己在另一个局域网中的某个机器(SSH为例)
UBUNTU 14.04 LTS 为例 如何在外网中访问自己在另一个局域网中的某个机器(SSH为例) 2013-05-01 16:02 2693人阅读 评论(0) 收藏 举报 情景描述: 计算机C1放 ...
- BLE Device Monitor的使用
1 综述 BLE Device Monitor是一个用来显示任意蓝牙低功耗设备服务(services).特征(characteristics).属性(attributes)的windows程序.除了测 ...
- python环境搭建
Python下载 Python最新源码,二进制文档,新闻资讯等可以在Python的官网查看到: Python官网:http://www.python.org/ 你可以在一下链接中下载Python的文档 ...
- Redis学习笔记(7)-事务
package cn.com; import java.util.List; import redis.clients.jedis.Jedis; import redis.clients.jedis. ...
- zepto源码--matches--学习笔记
zepto的第一个函数,zepto.matches: 作用:用来匹配dom元素是否匹配某css selector. 它为后面的一些高级方法的实现提供了基础支持,比如事件代理,parent, close ...
- 高效的两段式循环缓冲区──BipBuffer
Simon Cooke,美国 (原作者) 北京理工大学 20981 陈罡(翻译) 写在前面的话: 循环缓冲区是一个非常常用的数据存储结构,已经被广泛地用于连续.流数据的存储和通信应用中.对于循环缓冲区 ...
- oracle 中的游标
oracle 中的游标 通俗易懂的sql代码直接上! --简单的游标使用滴呀 --使用FOR OBJ IN OBJS LOOP ......END LOOP; DECLARE CURSOR C_JOB ...