初试jQuery EasyUI 使用介绍


Posted in Javascript onApril 01, 2010

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

初试jQuery EasyUI 使用介绍 

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

OK,下面就开始我们的初探之旅。
jQuery EasyUI---Accordion
手风琴效果,大家应该很熟悉。
基本代码:

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Accordion</title> 
<script src="../jquery-1.4.2.min.js" type="text/javascript"></script> 
<script src="../jquery.easyui.min.js" type="text/javascript"></script> 
<link href="../themes/default/easyui.css" rel="stylesheet" type="text/css" /> 
<link href="../themes/icon.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript"></script> 
</head> 
<body> 
<div style="overflow:auto;width:600px;height:300px;padding:10px;border:1px solid #ccc;"> 
<div id="aa" class="easyui-accordion" fit="true" style="width:300px;height:200px;"> 
<div title="Title1" style="overflow:auto;padding:10px;"> 
<h3>Accordion1</h3> 
</div> 
<div title="Title2" style="padding:10px;"> 
<h3>Accordion2</h3> 
</div> 
<div title="Title3"> 
<h3>Accordion3</h3> 
</div> 
</div> 
</div> 
</body> 
</html>

代码非常简单,只需要简单的html就可以实现。这里最重要的就是首先要引用jquery-1.4.2.min.js和jquery.easyui.min.js。
效果:
初试jQuery EasyUI 使用介绍
由于只是简单的html,所以我们可以通过js轻松的对Accordion进行操控,控制大小,位置等等。

jQuery EasyUI---DataGrid

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

基本代码:

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>DataGrid</title> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<script src="../jquery-1.4.2.min.js" type="text/javascript"></script> 
<script src="../jquery.easyui.min.js" type="text/javascript"></script> 
<link href="../themes/default/easyui.css" rel="stylesheet" type="text/css" /> 
<link href="../themes/icon.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript"> 
$(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> 
<table id="test"></table> 
</body> 
</html>

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

效果:
初试jQuery EasyUI 使用介绍 
jQuery EasyUI---Dialog
网页窗体效果。
基本代码:

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Dialog</title> 
<script src="../jquery-1.4.2.min.js" type="text/javascript"></script> 
<script src="../jquery.easyui.min.js" type="text/javascript"></script> 
<link href="../themes/default/easyui.css" rel="stylesheet" type="text/css" /> 
<link href="../themes/icon.css" rel="stylesheet" type="text/css" /> 
<script> 
$(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> 
<div id="dd" style="padding:5px;width:400px;height:200px;"> 
<p>jQuery EasyUI---Dialog</p> 
</div> 
</body> 
</html>

效果:
初试jQuery EasyUI 使用介绍 
jQuery EasyUI---Tabs
无论是网站还是管理软件,我们越来越多的使用Tabs,EasyUI自然也进行了支持。
基本代码:
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Tabs</title> 
<script src="../jquery-1.4.2.min.js" type="text/javascript"></script> 
<script src="../jquery.easyui.min.js" type="text/javascript"></script> 
<link href="../themes/default/easyui.css" rel="stylesheet" type="text/css" /> 
<link href="../themes/icon.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
<div id="tt" class="easyui-tabs" style="width:500px;height:250px;"> 
<div title="Tab1" style="padding:20px;display:none;"> 
<h1>Tab1 Content</h1> 
</div> 
<div title="Tab5" closable="true" style="padding:10px;display:none;"> 
<div class="easyui-tabs" fit="true" plain="true" style="height:100px;width:300px;"> 
<div title="Title1">Content 1</div> 
<div title="Title2">Content 2</div> 
<div title="Title3">Content 3</div> 
</div> 
</div> 
</div> 
</body> 
</html>

效果:
初试jQuery EasyUI 使用介绍 
jQuery EasyUI---Messager
信息提示控件,可以很好的进行数据的提示,推荐。
基本代码:
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Messager</title> 
<script src="../jquery-1.4.2.min.js" type="text/javascript"></script> 
<script src="../jquery.easyui.min.js" type="text/javascript"></script> 
<link href="../themes/default/easyui.css" rel="stylesheet" type="text/css" /> 
<link href="../themes/icon.css" rel="stylesheet" type="text/css" /> 
<script> 
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> 
<h1>信息提示</h1> 
<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
数据验证控件,可以很好的对表单数据进行验证。
基本代码:
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>ValidateBox</title> 
<script src="../jquery-1.4.2.min.js" type="text/javascript"></script> 
<script src="../jquery.easyui.min.js" type="text/javascript"></script> 
<link href="../themes/default/easyui.css" rel="stylesheet" type="text/css" /> 
<link href="../themes/icon.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
<div> 
<table> 
<tr> 
<td>姓名:</td> 
<td><input class="easyui-validatebox" required="true" validType="length[1,3]"></td> 
</tr> 
<tr> 
<td>电子邮件:</td> 
<td><input class="easyui-validatebox" required="true" validType="email"></td> 
</tr> 
<tr> 
<td>URL:</td> 
<td><input class="easyui-validatebox" required="true" validType="url"></td> 
</tr> 
<tr> 
<td>说明:</td> 
<td><textarea class="easyui-validatebox" required="true" style="height:100px;"></textarea></td> 
</tr> 
</table> 
</div> 
</body> 
</html>

不需要写任何函数,只需对要验证的控件required="true" validType="url"就可以。
效果:
初试jQuery EasyUI 使用介绍 
jQuery EasyUI---LayOut
页面布局,可以将整个页面划分成几个区域。类似ExtJS中的Border布局。
基本代码:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>LayOut</title>
    <script src="../jquery-1.4.2.min.js" type="text/javascript"></script>
    <script src="../jquery.easyui.min.js" type="text/javascript"></script>
    <link href="../themes/default/easyui.css" rel="stylesheet" type="text/css" />
    <link href="../themes/icon.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div class="easyui-layout" style="width:600px;height:400px;">
        <div region="north" border="false" style="overflow:hidden;height:60px;background:#A4BED4;">
            <h2>Border布局</h2>
        </div>
        <div region="south" split="true" style="height:50px;background:#efefef;">
        </div>
        <div region="east" icon="icon-reload" title="Menu2" split="true" style="width:180px;">
        </div>
        <div region="west" split="true" title="Menu1" style="width:100px;">
        </div>
        <div region="center" title="Main Form" style="background:#eee;">
        </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)

Javascript 相关文章推荐
xml分页+ajax请求数据源+dom取结果实例代码
Oct 31 Javascript
Node.js中require的工作原理浅析
Jun 24 Javascript
简单对比分析JavaScript中的apply,call与this的使用
Dec 04 Javascript
js实现卡片式项目管理界面UI设计效果
Dec 08 Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
Jan 12 Javascript
全面理解JavaScript中的继承(必看)
Jun 16 Javascript
js中字符型和数值型数字的互相转化方法(必看)
Apr 25 Javascript
详解Vue-cli webpack移动端自动化构建rem问题
Apr 07 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
Jun 17 Javascript
ES6 Class中实现私有属性的一些方法总结
Jul 08 Javascript
js实现简单的日历显示效果函数示例
Nov 25 Javascript
Vue学习之常用指令实例详解
Jan 06 Javascript
跟我一起学写jQuery插件开发方法(附完整实例及下载)
Apr 01 #Javascript
基于jquery的获取mouse坐标插件的实现代码
Apr 01 #Javascript
Jquery+JSon 无刷新分页实现代码
Apr 01 #Javascript
基于jQuery的消息提示插件之旅 DivAlert(三)
Apr 01 #Javascript
基于jQuery的消息提示插件 DivAlert之旅(二)
Apr 01 #Javascript
基于jQuery的弹出消息插件 DivAlert之旅(一)
Apr 01 #Javascript
基于jquery的tab切换 js原理
Apr 01 #Javascript
You might like
PHP生成便于打印的网页
2006/10/09 PHP
CentOS 上搭建 PHP7 开发测试环境
2017/02/26 PHP
thinkphp整合系列之极验滑动验证码geetest功能
2019/06/18 PHP
AutoSave/自动存储功能实现
2007/03/24 Javascript
用js实现手把手教你月入万刀(转贴)
2007/11/07 Javascript
javascript 触发HTML元素绑定的函数
2010/09/11 Javascript
Javascript面向对象编程(二) 构造函数的继承
2011/08/28 Javascript
JavaScript对象创建及继承原理实例解剖
2013/02/28 Javascript
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
2013/06/24 Javascript
javascript检测是否联网的实现代码
2014/09/28 Javascript
JavaScript动态提示输入框输入字数的方法
2015/07/27 Javascript
jQuery简单入门示例之用户校验demo示例
2016/07/09 Javascript
jQuery序列化表单成对象的简单实现
2016/11/29 Javascript
微信小程序中多个页面传参通信的学习与实践
2017/05/05 Javascript
基于JavaScript实现百度搜索框效果
2020/06/28 Javascript
基于jQuery的左滑出现删除按钮的示例
2017/08/29 jQuery
微信小程序Flex布局用法深入浅出分析
2019/04/25 Javascript
vue-property-decorator用法详解
2019/12/12 Javascript
js中火星坐标、百度坐标、WGS84坐标转换实现方法示例
2020/03/02 Javascript
打印出python 当前全局变量和入口参数的所有属性
2009/07/01 Python
python比较2个xml内容的方法
2015/05/11 Python
Python实现线程池代码分享
2015/06/21 Python
python实现线程池的方法
2015/06/30 Python
将pip源更换到国内镜像的详细步骤
2019/04/07 Python
Python完成哈夫曼树编码过程及原理详解
2019/07/29 Python
PHP经典面试题
2016/09/03 面试题
Linux的主要特性
2016/09/03 面试题
党校自我鉴定范文
2013/10/02 职场文书
春季防火方案
2014/05/10 职场文书
幼师个人总结范文
2015/02/28 职场文书
市场部岗位职责范本
2015/04/15 职场文书
旗帜观后感
2015/06/08 职场文书
2016高考感言
2015/08/01 职场文书
学习杨善洲同志先进事迹心得体会
2016/01/23 职场文书
MySQL事务的隔离级别详情
2022/07/15 MySQL
Java实现超大Excel文件解析(XSSF,SXSSF,easyExcel)
2022/07/15 Java/Android