初试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 相关文章推荐
[Web]防止用户复制页面内容和另存页面的方法
Feb 06 Javascript
javascript 显示当前系统时间代码
Dec 28 Javascript
IE6-IE9不支持table.innerHTML的解决方法分享
Sep 14 Javascript
javascript的渐进增强与平稳退化浅谈
Nov 12 Javascript
简单时间提示DEMO从0开始一直进行计时
Nov 19 Javascript
javascript常用经典算法实例详解
Nov 25 Javascript
全面解析Bootstrap中form、navbar的使用方法
May 30 Javascript
微信JS-SDK选取手机照片上传功能
Apr 21 Javascript
JS 组件系列之BootstrapTable的treegrid功能
Jun 16 Javascript
详解微信小程序中的页面代码中的模板的封装
Oct 12 Javascript
详解使用webpack打包编写一个vue-toast插件
Nov 08 Javascript
vue弹窗消息组件的使用方法
Sep 24 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删除非空目录的函数代码小结
2013/02/28 PHP
PHP 验证登陆类分享
2015/03/13 PHP
laravel框架select2多选插件初始化默认选中项操作示例
2020/02/18 PHP
精解window.setTimeout()&amp;window.setInterval()使用方式与参数传递问题!
2007/11/23 Javascript
解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
2010/05/13 Javascript
js监听输入框值的即时变化onpropertychange、oninput
2011/07/13 Javascript
让元素在网页中可拖动示例代码
2013/08/13 Javascript
两个数组去重的JS代码
2013/12/04 Javascript
有效提高JavaScript执行效率的几点知识
2015/01/31 Javascript
Javascript中With语句用法实例
2015/05/14 Javascript
js+css实现文字散开重组动画特效代码分享
2015/08/21 Javascript
JS实现的3des+base64加密解密算法完整示例
2018/05/18 Javascript
vue better scroll 无法滚动的解决方法
2018/06/07 Javascript
jQuery实现图片随机切换、抽奖功能(实例代码)
2019/10/23 jQuery
js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】
2019/11/07 Javascript
Vue 中 filter 与 computed 的区别与用法解析
2019/11/21 Javascript
Javascript ParentNode和ChildNode接口原理解析
2020/03/16 Javascript
JavaScript基于用户照片姓名生成海报
2020/05/29 Javascript
Vue组件简易模拟实现购物车
2020/12/21 Vue.js
如何在vue中使用video.js播放m3u8格式的视频
2021/02/01 Vue.js
[04:16]DOTA2全国高校联赛16强抽签
2018/05/02 DOTA
python通过索引遍历列表的方法
2015/05/04 Python
初步讲解Python中的元组概念
2015/05/21 Python
python如何读写csv数据
2018/03/21 Python
Python模块的加载讲解
2019/01/15 Python
基于python进行抽样分布描述及实践详解
2019/09/02 Python
使用OpenCV获取图像某点的颜色值,并设置某点的颜色
2020/06/02 Python
美国东北部户外服装和设备零售商:Eastern Mountain Sports
2016/10/05 全球购物
Glamest意大利:女性在线奢侈品零售店
2019/04/28 全球购物
警察群众路线整改措施
2014/09/26 职场文书
标准离婚协议书(2014版)
2014/10/05 职场文书
工作作风懒散检讨书
2014/10/29 职场文书
破坏寝室公物检讨书
2014/11/17 职场文书
写给女朋友的保证书
2015/05/09 职场文书
离婚起诉书范文2016
2015/11/26 职场文书
Python深度学习之实现卷积神经网络
2021/06/05 Python