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  帮助手册

你可能感兴趣的:(JqueryEasyUI教程入门篇)