首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

初试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）

初试jQuery EasyUI 使用介绍

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jQuery实现分章节锚点“回到顶部”动画特效代码
Oct 23 Javascript
js判断图片加载完成后获取图片实际宽高的方法
Feb 25 Javascript
Bootstrap网格系统详解
Apr 26 Javascript
jQuery Easyui加载表格出错时在表格中间显示自定义的提示内容
Dec 08 Javascript
利用JQuery实现datatables插件的增加和删除行功能
Jan 06 Javascript
微信小程序使用video组件播放视频功能示例【附源码下载】
Dec 08 Javascript
js中的 || 与 &amp;&amp; 运算符详解
May 24 Javascript
javascript实现计算指定范围内的质数示例
Dec 29 Javascript
Angular 多级路由实现登录页面跳转(小白教程)
Nov 19 Javascript
详解JavaScript修改注册表的方法
Jan 05 Javascript
react使用CSS实现react动画功能示例
May 18 Javascript
Ajax获取node服务器数据的完整步骤
Sep 20 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
条形码(1) tree shaking(1) GPU(1) 分布式追踪(1) kubernetes(1) delete in(1) Express(1) Three.js(1) HBuilder(1) group by(1)
You might like
PHP 转义使用详解
2013/07/15 PHP
php 截取中英文混合字符串的方法
2018/05/31 PHP
关于B/S判断浏览器断开的问题讨论
2008/10/29 Javascript
获取URL地址中的文件名和参数的javascript代码
2009/09/02 Javascript
javascript 面向对象全新理练之原型继承
2009/12/03 Javascript
jQuery点击自身以外地方关闭弹出层的简单实例
2013/12/24 Javascript
JQuery对表格进行操作的常用技巧总结
2014/04/23 Javascript
可编辑下拉框的2种实现方式
2014/06/13 Javascript
javascript异步编程代码书写规范Promise学习笔记
2015/02/11 Javascript
JS延时提示框实现方法详解
2015/11/26 Javascript
使用OpenLayers3 添加地图鼠标右键菜单
2015/12/29 Javascript
理解Angular数据双向绑定
2016/01/10 Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
2016/07/24 Javascript
AngularJS入门教程之Helloworld示例
2016/12/25 Javascript
Javascript DOM事件操作小结(监听鼠标点击、释放，悬停、离开等)
2017/01/20 Javascript
javascript实现复选框全选或反选
2017/02/04 Javascript
js实现自定义进度条效果
2017/03/15 Javascript
ES6中Array.find()和findIndex()函数的用法详解
2017/09/16 Javascript
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
2017/12/18 jQuery
JavaScript时间与时间戳的转换操作实例分析
2018/12/07 Javascript
详解vue中router-link标签所必备了解的属性
2019/04/15 Javascript
配置node服务器并且链接微信公众号接口配置步骤详解
2019/06/21 Javascript
vue 通过绑定事件获取当前行的id操作
2020/07/27 Javascript
基于Python实现的扫雷游戏实例代码
2014/08/01 Python
Python爬取京东的商品分类与链接
2016/08/26 Python
Python使用sftp实现上传和下载功能(实例代码)
2017/03/14 Python
python爬虫之urllib,伪装,超时设置,异常处理的方法
2018/12/19 Python
Python3中对json格式数据的分析处理
2021/01/28 Python
中间件分为哪几类
2016/09/18 面试题
《蚂蚁和蝈蝈》教学反思
2014/02/24 职场文书
爽歪歪广告词
2014/03/20 职场文书
小学生新年寄语
2014/04/03 职场文书
小学生手册家长评语
2014/04/16 职场文书
大学新闻系求职信
2014/06/03 职场文书
Js类的构建与继承案例详解
2021/09/15 Javascript
Python使用MapReduce进行简单的销售统计
2022/04/22 Python