首页
所有分类
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 相关文章推荐
js focus不起作用的解决方法(主要是因为dom元素是否加载完成)
Nov 05 Javascript
纯js实现背景图片切换效果代码
Nov 14 Javascript
JS 页面计时器示例代码
Oct 28 Javascript
JS画线(实例代码)
Nov 20 Javascript
jquery live()重复绑定的解决方法介绍
Jan 03 Javascript
input禁止键盘及中文输入,但可以点击
Feb 13 Javascript
jquery实现tab选项卡切换效果（悬停、下方横线动画位移）
May 05 jQuery
JavaScript设计模式之策略模式详解
Jun 09 Javascript
node+koa2+mysql+bootstrap搭建一个前端论坛
May 06 Javascript
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
Aug 24 Javascript
微信小程序发布新版本时自动提示用户更新的方法
Jun 07 Javascript
js实现多个标题吸顶效果
Jan 08 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
岗位职责(1324) 职业生涯规划书(234) 推荐信(292) 思想汇报(404) 演讲稿(869) 心得体会(660) 证婚词(21) 求职信(1029) 创业计划书(312) 欢迎词(65)
You might like
探究Laravel使用env函数读取环境变量为null的问题
2016/12/06 PHP
PHP简单实现冒泡排序的方法
2016/12/26 PHP
Laravel框架实现model层的增删改查(CURD)操作示例
2018/05/12 PHP
JS中style属性
2006/10/11 Javascript
Extjs学习笔记之六 面版
2010/01/08 Javascript
JS.GetAllChild(element,deep,condition)使用介绍
2013/09/21 Javascript
jquery设置text的值示例(设置文本框 DIV 表单值)
2014/01/06 Javascript
javascript中直接引用Microsoft的COM生成Word
2014/01/20 Javascript
jQuery统计上传文件大小的方法
2015/01/24 Javascript
jquery衣服颜色选取插件效果代码分享
2015/08/28 Javascript
jquery实现倒计时功能
2015/12/28 Javascript
JavaScript中Number对象的toFixed() 方法详解
2016/09/02 Javascript
Vue.js实现简单动态数据处理
2017/02/13 Javascript
详解nodejs中express搭建权限管理系统
2017/09/15 NodeJs
ionic选择多张图片上传的示例代码
2017/10/10 Javascript
JavaScript编程设计模式之构造器模式实例分析
2017/10/25 Javascript
vue-cli 组件的导入与使用教程详解
2018/04/11 Javascript
vue.js 实现点击展开收起动画效果
2018/07/07 Javascript
vue使用v-if v-show页面闪烁,div闪现的解决方法
2018/10/12 Javascript
Vue解析带html标签的字符串为dom的实例
2019/11/13 Javascript
Python中比较特别的除法运算和幂运算介绍
2015/04/05 Python
详解Python中的Cookie模块使用
2015/07/06 Python
Python 专题二 条件语句和循环语句的基础知识
2017/03/19 Python
django框架之cookie/session的使用示例(小结)
2018/10/15 Python
Python发送邮件的实例代码讲解
2019/10/16 Python
详解在python操作数据库中游标的使用方法
2019/11/12 Python
python 实现dict转json并保存文件
2019/12/05 Python
Python3获取cookie常用三种方案
2020/10/05 Python
pandas统计重复值次数的方法实现
2021/02/20 Python
调用HTML5的Canvas API绘制图形的快速入门指南
2016/06/17 HTML / CSS
12月小学生校园广播稿
2014/02/04 职场文书
机械专业技术员求职信
2014/06/14 职场文书
计算机多媒体专业自荐信
2014/07/04 职场文书
因个人原因离职的辞职信范文
2015/05/12 职场文书
导游词之西递宏村
2019/12/10 职场文书
SQL SERVER中常用日期函数的具体使用
2021/04/08 SQL Server