JqueryEasyUI教程入门篇

什么是jQueryEasyUI?

JqueryUI是壹组根据jQuery的UI插件集合

学习jQueryEasyUI的条件?

总得调整Jquery的骨干语法知识

jQueryEasyUI的特点?

1、支持HTML5

二、援救开始展览,能够依据自个儿的内需打开控件

3、源代码加密,商业版付费

其余的同类型产品?

1、国产的DWZ插件

2、独立的ExtJs插件

2个轻松的德姆o?

因此1个简短的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必须引进1些文件

<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调用加载

先创立2个JS文件,命名叫德姆o.js

$(function(){
    $("#box").dialog();
})

始建3个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  补帮手册