首页 > 代码库 > jQuery Easy UI的使用

jQuery Easy UI的使用

2024-07-19 17:23:48   219人阅读

一、初步认识

1、什么是jQuery Easy UI 

jQuery Easy UI是一组基于jQuery的UI插件集合，而jQuery Easy UI 的目标就是帮助Web 开发者更轻松的打造出功能丰富并且美观的 UI 界面。

官方网站http://www.jeasyui.com

2、jQuery EasyUI有哪些特点

（1）、基于 jquery 用户界面插件的集合；

（2）、源代码加密、商业版付费

（3）、使用 EasyUI 你不需要写很多的 javascript 代码，通常只需要写 HTML 标记来定义用户界面即可；

（4）、支持 HTML5

（5）、简单，但很强大，开发产品时可节省时间和资源；

（6）、支持拓展，可根据自己的需求拓展控件

3、是否兼容低版本IE ,本人使用的是1.3.6版本，不支持IE8及以下版本。

二、引入必要的文件：

引入 jQuery 核心库，这里采用的是 2.0

<script type="text/javascript" src=http://www.mamicode.com/"easyui/jquery.min.js"></script>

引入 jQuery EasyUI 核心库，这里采用的是 1.3.6

<script type="text/javascript" src=http://www.mamicode.com/"easyui/jquery.easyui.min.js"></script>

引入 EasyUI 中文提示信息

<script type="text/javascript" src=http://www.mamicode.com/"easyui/locale/easyui-lang-zh_CN.js"></script>

引入自己开发的 JS 文件

<script type="text/javascript" src=http://www.mamicode.com/"js/index.js"></script>

引入 EasyUI 核心 UI 文件 CSS

<link rel="stylesheet" type="text/css" href=http://www.mamicode.com/"easyui/themes/default/easyui.css" />

引入 EasyUI 图标文件

<link rel="stylesheet" type="text/css" href=http://www.mamicode.com/"easyui/themes/icon.css" />

三、加载UI组件的方式：

1、使用class方式加载

使用 class 加载，格式为：easyui-组件名

<div class="easyui-dialog" id="box" title="标题" style="width:400px;height:200px;">

内容部分

</div>

示例：

<!DOCTYPE html>
<html>
<head>
<title>jQuery Easy UI</title>
<meta charset="UTF-8" />
<script type="text/javascript" src=http://www.mamicode.com/"easyui/jquery.min.js"></script>>
PS：使用了规定的格式就可以生成一个 UI 组件，这是由于 jQuery EasyUI 的一个解析器（Parser）的起到了作用。解析之后，从 Firebug 里面可以看到 
UI 组件变化后的HTML。
2、使用JS调用加载
$(‘#box‘).dialog();
示例：
<!DOCTYPE html>
<html>
<head>
<title>jQuery Easy UI</title>
<meta charset="UTF-8" />
<script type="text/javascript" src=http://www.mamicode.com/"easyui/jquery.min.js"></script>>
PS：一般推荐使用第二种 JS 调用加载，因为一个 UI 组件有很多属性和方法，如果使用 class 的用法将极大的不方便。并且根据 JS 和 HTML 分离的原则，
第二种提高了代码的可读性。
3、使用easyload.js智能加载
//删除 jQuery EasyUI 的 JS 核心文件及 CSS，引入 easyloader.js 文件
<script type="text/javascript" src=http://www.mamicode.com/"easyui/easyloader.js"></script>
//JS 代码
easyloader.load(‘dialog‘, function () {
$(‘#box‘).dialog();
});
示例：
<!DOCTYPE html>
<html>
<head>
<title>jQuery Easy UI</title>
<meta charset="UTF-8" />
<script type="text/javascript" src=http://www.mamicode.com/"easyui/jquery.min.js"></script>>四、Parser解析器使用场景及注意事项
parser，故名意思，就是解析器的意思，别看他只有那么几行代码，jQuery Easyui 能够根据class就能正常渲染页面全靠它了。一般情况下，我们并用不到解
析器，本文主要讨论一下，什么情况下会用到它，如何使用。
1、自动调用parser：
我们之所以在页面中，只要书写相应的class，Easyui就能成功渲染页面，这是因为解析器在默认情况下，会在文档装载完成的时候($(document).ready)被调用
一次，而且是渲染整个页面。
2、手动调用parper：
当页面DOM已经装载完毕，我们通过JavaScript代码再去创建class属性为easyui相应值的节点的时候，那么该节点不会被渲染，因为parser只是在页面装载完的
时候渲染一下整个页面，而不会一直监视着整个页面。所以需要我们手动调用parser去渲染。
parser示例：
<!DOCTYPE html>
<html>
<head>
<title>parserDemo</title>
<meta charset="UTF-8" />
<script type="text/javascript" src=http://www.mamicode.com/"easyui/jquery.min.js"></script>>
点击下载源代码



jQuery Easy UI的使用


联系
我们