Introduction to using jQuery EasyUI for the first time_jquery

jQuery EasyUI is a collection of UI plug-ins based on jQuery, and the goal of jQuery EasyUI is to help web developers more easily create feature-rich and beautiful UI interfaces. Developers do not need to write complex javascript, nor do they need to have an in-depth understanding of css styles. All developers need to know are some simple html tags.

jQuery EasyUI provides us with the use of most UI controls, such as: accordion, combobox, menu, dialog, tabs, tree, window, etc.

OK, let’s start our initial exploration journey.
jQuery EasyUI---Accordion
The accordion effect should be familiar to everyone.
Basic code:

Copy code The code is as follows:

Accordion1

< ;h3>Accordion2

Accordion3

The code is very simple, just simple html It can be achieved. The most important thing here is to first reference jquery-1.4.2.min.js and jquery.easyui.min.js.
Effect:

Since it is just simple html, we can easily control the Accordion, control size, position, etc. through js.

jQuery EasyUI---DataGrid

As you can tell from the name, this is a data binding and display control.

Basic code:

Copy code The code is as follows:

这里我们从datagrid_data.json中获取数据，代码的编写风格同EXTIS十分相似。ExtJS开发实践

效果：
 
jQuery EasyUI---Dialog
网页窗体效果。
基本代码：

复制代码 代码如下:

<script> <br>$(function(){ <br>$('#dd').dialog({ <br>toolbar:[{ <br>text:'添加', <br>iconCls:'icon-add', <br>handler:function(){ <br>alert('添加数据') <br>} <br>},'-',{ <br>text:'保存', <br>iconCls:'icon-save', <br>handler:function(){ <br>alert('保存数据') <br>} <br>}], <br>buttons:[{ <br>text:'提交', <br>iconCls:'icon-ok', <br>handler:function(){ <br>alert('提交数据'); <br>} <br>},{ <br>text:'取消', <br>handler:function(){ <br>$('#dd').dialog('取消'); <br>} <br>}] <br>}); <br>}); <br></script>

jQuery EasyUI---Dialog

效果：
 
jQuery EasyUI---Tabs
无论是网站还是管理软件，我们越来越多的使用Tabs，EasyUI自然也进行了支持。
基本代码：

复制代码 代码如下:

Tab1 Content

Content 1

Content 2

Content 3

效果：
 
jQuery EasyUI---Messager
信息提示控件，可以很好的进行数据的提示，推荐。
基本代码：

复制代码 代码如下:

<script> <br>function show1() { <br>$.messager.show({ <br>title: '提示信息1', <br>msg: '信息1', <br>showType: 'show' <br>}); <br>} <br>function show2() { <br>$.messager.show({ <br>title: '提示信息2', <br>msg: '信息5分钟后消失.', <br>timeout: 5000, <br>showType: 'slide' <br>}); <br>} <br>function show3() { <br>$.messager.show({ <br>title: '渐进显示信息3', <br>msg: '渐进显示信息3', <br>timeout: 0, <br>showType: 'fade' <br>}); <br>} <br></script>

信息提示

显示 |
滑动 |
渐进显示 |

效果：

页面左下角信息提示
jQuery EasyUI---ValidateBox
数据验证控件，可以很好的对表单数据进行验证。
基本代码：

复制代码 代码如下:

姓名:
电子邮件:
URL:
说明:

不需要写任何函数，只需对要验证的控件required="true" validType="url"就可以。
效果：
 
jQuery EasyUI---LayOut
页面布局，可以将整个页面划分成几个区域。类似ExtJS中的Border布局。
基本代码：

复制代码 代码如下:

http://www.w3.org/1999/xhtml">

   
   
   
   
   


   

       

           

Border布局

       

       

       

       

       

       

       

       

       

   

Effect:

jQuery EasyUI---skin change

jQuery EasyUI uses a unified CSS style, which is also very convenient for modification:

As shown in the figure, for each control, there is a proprietary CSS. Just modify it accordingly, all you need is a simple understanding of CSS.

Summary: The experience of jQuery EasyUI ends here. There are still some controls not introduced here, such as: combobox, splitbutton, etc.

Official website: http://jquery-easyui.wikidot.com/start

Download address: http://jquery-easyui.wikidot.com/download

Download the code package of this article
Author of the article: Gao Weipeng (Brian)