Use of JQuery EasyUI_jquery

jQuery EasyUI is a jQuery-based framework that integrates various user interface plug-ins.

EasyUI Introduction

easyui is a collection of user interface plug-ins based on jQuery.

easyui provides the necessary functionality for creating modern, interactive, JavaScript applications.

Using easyui, you don’t need to write a lot of code. You only need to define the user interface by writing some simple HTML tags.

easyui is a complete framework that perfectly supports HTML5 web pages.

easyui saves the time and scale of your web development.

easyui is very simple but powerful.

This article focuses on two ways to use EasyUI, including different loading and easyload intelligent on-demand loading. Finally, learn how to use the Parser parser.

Note: All codes will be introduced on the last page of the article

1. Import necessary files

Since jQuery EasyUI1.4.4 has just been updated, the update of this small version is mainly internal optimization and some fine-tuning of the UI, which does not affect learning. Before, we used the 1.2.4 version of the Chinese manual to learn 1.3.5 without any obstacles, so there is no need to worry about version issues.

The directory structure of JQuery EasyUI throughout our article is as shown below

The easyui folder is where all the files to be used by JQuery EasyUI are saved

The JS folder stores our own JS files

index.html is to save the html code we wrote ourselves

//引入 jQuery 核心库，这里采用的是 .
<script type="text/javascript" src="easyui/jquery.min.js"></script>
//引入 jQuery EasyUI 核心库，这里采用的是 ..
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
//引入 EasyUI 中文提示信息
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
//引入自己开发的 JS 文件
<script type="text/javascript" src="js/index.js"></script>
//引入 EasyUI 核心 UI 文件 CSS
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />
//引入 EasyUI 图标文件
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />

PS: After the introduction is complete, we can write jQuery EasyUI code.

2. How to load UI components

There are two ways to load UI components: 1. Load using class method; 2. Load using JS call.

//使用 class 加载，格式为：easyui-组件名
<div class="easyui-dialog" id="box" title="标题" style="width:px;height:px;">
内容部分
</div>

PS: A UI component can be generated using the specified format. This is due to the role of a parser (Parser) of jQuery EasyUI. After parsing, you can see the changed HTML of the UI components from Firebug.

//使用 JS 调用加载
$('#box').dialog();

PS: It is generally recommended to use the second JS call to load, because a UI component has many properties and methods, and it will be extremely inconvenient to use class. And based on the principle of separation of JS and HTML, the second one improves the readability of the code.

3. Use easyload.js to intelligently load

//删除 jQuery EasyUI 的 JS 核心文件及 CSS，引入 easyloader.js 文件
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/easyloader.js"></script>
//JS 代码
easyloader.load('dialog', function () {
$('#box').dialog();
});

PS: Use easyloader to intelligently load, which loads on demand according to the UI components you use. We can view the HTML through Firebug and find that a lot of js files are loaded. These js are all necessary conditions for the dialog component. Therefore, using easyloader to load will reduce unnecessary content loading. But the problem is that with smart loading, the difficulty and cost of your coding are increased, and the efficiency is reduced. Moreover, the number of js files that are intelligently loaded is still very large, which will not increase the speed too much. On the contrary, because there are more js files, it will be blocked. Search engines require merge optimization.

4. Parser

The Parser parser is specialized in parsing and rendering various UI components. Generally speaking, we do not need to use it to automatically complete the parsing of UI components. Of course, sometimes manual parsing may be required under certain circumstances.
Manual parsing is generally effective when using class, such as setting class="easyui-dialog".

Parser attribute

Attribute name Default value Description

$.parser.auto true 定义是否自动解析 EasyUI 组件
//关闭自动解析功能，放在$(function() {})外
$.parser.auto = false;

Parser method

Attribute name Parameter description

$.parser.parse 空或 JQ 选择器 解析指定的 UI 组件
$.parser.onComplete 回调函数 解析完毕后执行
//解析所有 UI
$.parser.parse();
//解析指定的 UI
$.parser.parse('#box');

PS: To use the specified UI to parse, you must set a parent class container to parse it. For example:

<div id="box">
<div class="easyui-dialog" title="标题" style="width:400px;height:200px;">
<span>内容部分</span>
</div>
</div>
//UI 组件解析完毕后执行，放在$(function () {})外
$.parser.onComplete = function () {
alert('UI 组件解析完毕！');
};

The above content introduces you to the use of JQuery EasyUI, I hope it will be helpful to you!