初试jQuery EasyUI 使用介绍

　　jQuery EasyUI是一组基于jQuery的UI插件集合，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。

　　jQuery EasyUI为我们提供了大多数UI控件的使用，如：accordion，combobox，menu，dialog，tabs，tree，window等等。

　　OK，下面就开始我们的初探之旅。

　　jQuery EasyUI---Accordion

　　手风琴效果，大家应该很熟悉。

　　基本代码：

复制代码代码如下:

　　<head>

　　<title>Accordion</title>

　　</head>

　　<body>

　　<h3>Accordion1</h3>

　　</div>

　　<h3>Accordion2</h3>

　　</div>

　　<h3>Accordion3</h3>

　　</div>

　　</body>

　　</html>

　　代码非常简单，只需要简单的html就可以实现。这里最重要的就是首先要引用jquery-1.4.2.min.js和jquery.easyui.min.js。

　　效果：

初试jQuery EasyUI 使用介绍

　　由于只是简单的html，所以我们可以通过js轻松的对Accordion进行操控，控制大小，位置等等。

　　jQuery EasyUI---DataGrid

　　从名字就可以知道这是个数据的绑定和显示控件。

　　基本代码：

复制代码代码如下:

　　<head>

　　<title>DataGrid</title>

　　$(function() {

　　$('#test').datagrid({

　　title: 'jQuery EasyUI---DataGrid',

　　iconCls: 'icon-save',

　　width: 500,

　　height: 350,

　　nowrap: false,

　　striped: true,

　　url: '../Data/datagrid_data.json',

　　sortName: 'ID',

　　sortOrder: 'desc',

　　idField: 'ID',

　　frozenColumns: [[

　　{ field: 'ck', checkbox: true },

　　{ title: 'ID', field: 'ID', width: 80, sortable: true }

　　]],

　　columns: [[

　　{ title: '基本信息', colspan: 2 },

　　{ field: 'opt', title: '操作', width: 100, align: 'center', rowspan: 2,

　　formatter: function(value, rec) {

　　return '<span style="color:red">编辑删除</span>';

　　}

　　], [

　　{ field: 'name', title: 'Name', width: 120 },

　　{ field: 'addr', title: 'Address', width: 120, rowspan: 2, sortable: true }

　　]],

　　pagination: true,

　　rownumbers: true,

　　singleSelect: false,

　　toolbar: [{

　　text: '添加',

　　iconCls: 'icon-add',

　　handler: function() {

　　alert('添加数据')

　　}

　　}, '-', {

　　text: '保存',

　　iconCls: 'icon-save',

　　handler: function() {

　　alert('保存数据')

　　}

　　}]

　　});

　　</script>

　　</head>

　　<body>

　　</body>

　　</html>

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

　　效果：

初试jQuery EasyUI 使用介绍

　　jQuery EasyUI---Dialog

　　网页窗体效果。

　　基本代码：

复制代码代码如下:

　　<head>

　　<title>Dialog</title>

　　$(function(){

　　$('#dd').dialog({

　　toolbar:[{

　　text:'添加',

　　iconCls:'icon-add',

　　handler:function(){

　　alert('添加数据')

　　}

　　},'-',{

　　text:'保存',

　　iconCls:'icon-save',

　　handler:function(){

　　alert('保存数据')

　　}

　　}],

　　buttons:[{

　　text:'提交',

　　iconCls:'icon-ok',

　　handler:function(){

　　alert('提交数据');

　　}

　　},{

　　text:'取消',

　　handler:function(){

　　$('#dd').dialog('取消');

　　}

　　}]

　　});

　　</script>

　　</head>

　　<body>

　　<p>jQuery EasyUI---Dialog</p>

　　</div>

　　</body>

　　</html>

　　效果：

初试jQuery EasyUI 使用介绍

　　jQuery EasyUI---Tabs

　　无论是网站还是管理软件，我们越来越多的使用Tabs，EasyUI自然也进行了支持。

　　基本代码：

复制代码代码如下:

　　<head>

　　</head>

　　<body>

　　<h1>Tab1 Content</h1>

　　</div>

　　<div title="Title1">Content 1</div>

　　<div title="Title2">Content 2</div>

　　<div title="Title3">Content 3</div>

　　</div>

　　</body>

　　</html>

　　效果：

初试jQuery EasyUI 使用介绍

　　jQuery EasyUI---Messager

　　信息提示控件，可以很好的进行数据的提示，推荐。

　　基本代码：

复制代码代码如下:

　　<head>

　　<title>Messager</title>

　　function show1() {

　　$.messager.show({

　　title: '提示信息1',

　　msg: '信息1',

　　showType: 'show'

　　});

　　}

　　function show2() {

　　$.messager.show({

　　title: '提示信息2',

　　msg: '信息5分钟后消失.',

　　timeout: 5000,

　　showType: 'slide'

　　});

　　}

　　function show3() {

　　$.messager.show({

　　title: '渐进显示信息3',

　　msg: '渐进显示信息3',

　　timeout: 0,

　　showType: 'fade'

　　});

　　}

　　</script>

　　</head>

　　<body>

　　<div>

　　<a href="javascript:void(0)" onclick="show1()">显示</a> |

　　<a href="#" onclick="show2()">滑动</a> |

　　<a href="#" onclick="show3()">渐进显示</a> |

　　</div>

　　</body>

　　</html>

　　效果：

初试jQuery EasyUI 使用介绍

　　页面左下角信息提示

　　jQuery EasyUI---ValidateBox

　　数据验证控件，可以很好的对表单数据进行验证。

　　基本代码：

复制代码代码如下:

　　<head>

　　<title>ValidateBox</title>

　　</head>

　　<body>

　　<div>

　　<table>

　　<tr>

　　</tr>

　　<tr>

　　</tr>

　　<tr>

　　</tr>

　　<tr>

　　</tr>

　　</table>

　　</div>

　　</body>

　　</html>

　　不需要写任何函数，只需对要验证的控件required="true" validType="url"就可以。

　　效果：

初试jQuery EasyUI 使用介绍

　　jQuery EasyUI---LayOut

　　页面布局，可以将整个页面划分成几个区域。类似ExtJS中的Border布局。

　　基本代码：

复制代码代码如下:

　　<head>

　　<title>LayOut</title>

　　</head>

　　<body>

　　<h2>Border布局</h2>

　　</div>

　　</div>

　　</div>

　　</div>

　　</div>

　　</body>

　　</html>

　　效果：

初试jQuery EasyUI 使用介绍

　　jQuery EasyUI---换肤

　　jQuery EasyUI使用了统一的CSS样式，在修改方面也很是方便：

初试jQuery EasyUI 使用介绍

　　如图所示，对于每一个控件，都有专有的CSS。相应对其修改就可以，只需简单的了解CSS即可。

　　小结：jQuery EasyUI的体验就到这里，还有一些控件这里没有介绍，比如：combobox，splitbutton等等。

　　官方网站：http://jquery-easyui.wikidot.com/start

　　下载地址：http://jquery-easyui.wikidot.com/download

　　本文代码打包下载

　　文章作者：高维鹏（Brian）

教程首页更多教程