JqueryEasyUI教程入门篇

最新推荐文章于 2020-11-17 10:14:47 发布

Vincent8080

最新推荐文章于 2020-11-17 10:14:47 发布

阅读量176

点赞数

文章标签： ui xhtml javascript ViewUI

什么是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必须引入一些文件

//引入jquery核心库

//引入jquery UI核心库

//引入EasyUI中文提示信息

//引入EasyUI核心UI文件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>