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
手风琴效果,大家应该很熟悉。

基本代码:

  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3. <title>Accordion</title>
  4. <script src="../jquery-1.4.2.min.js" type="text/javascript"></script>
  5. <script src="../jquery.easyui.min.js" type="text/javascript"></script>
  6.  
  7. <link href="../themes/default/easyui.css" rel="stylesheet" type="text/css" />
  8. <link href="../themes/icon.css" rel="stylesheet" type="text/css" />
  9.  
  10. <script type="text/javascript"></script>
  11. </head>
  12. <body>
  13. <div style="overflow:auto;width:600px;height:300px;padding:10px;border:1px solid #ccc;">
  14. <div id="aa" class="easyui-accordion" fit="true" style="width:300px;height:200px;">
  15. <div title="Title1" style="overflow:auto;padding:10px;">
  16. <h3>Accordion1</h3>
  17. </div>
  18. <div title="Title2" style="padding:10px;">
  19. <h3>Accordion2</h3>
  20. </div>
  21. <div title="Title3">
  22. <h3>Accordion3</h3>
  23. </div>
  24. </div>
  25. </div>
  26. </body>
  27. </html>

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

效果:

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

jQuery EasyUI---DataGrid

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

基本代码:

  1. 代码Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--><html xmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3. <title>DataGrid</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <script src="../jquery-1.4.2.min.js" type="text/javascript"></script>
  6. <script src="../jquery.easyui.min.js" type="text/javascript"></script>
  7.  
  8. <link href="../themes/default/easyui.css" rel="stylesheet" type="text/css" />
  9. <link href="../themes/icon.css" rel="stylesheet" type="text/css" />
  10.  
  11. <script type="text/javascript">
  12. $(function() {
  13. $('#test').datagrid({
  14. title: 'jQuery EasyUI---DataGrid',
  15. iconCls: 'icon-save',
  16. width: 500,
  17. height: 350,
  18. nowrap: false,
  19. striped: true,
  20. url: '../Data/datagrid_data.json',
  21. sortName: 'ID',
  22. sortOrder: 'desc',
  23. idField: 'ID',
  24. frozenColumns: [[
  25. { field: 'ck', checkbox: true },
  26. { title: 'ID', field: 'ID', width: 80, sortable: true }
  27. ]],
  28. columns: [[
  29. { title: '基本信息', colspan: 2 },
  30. { field: 'opt', title: '操作', width: 100, align: 'center', rowspan: 2,
  31. formatter: function(value, rec) {
  32. return '<span style="color:red">编辑 删除</span>';
  33. }
  34. }
  35. ], [
  36. { field: 'name', title: 'Name', width: 120 },
  37. { field: 'addr', title: 'Address', width: 120, rowspan: 2, sortable: true }
  38. ]],
  39. pagination: true,
  40. rownumbers: true,
  41. singleSelect: false,
  42. toolbar: [{
  43. text: '添加',
  44. iconCls: 'icon-add',
  45. handler: function() {
  46. alert('添加数据')
  47. }
  48. }, '-', {
  49. text: '保存',
  50. iconCls: 'icon-save',
  51. handler: function() {
  52. alert('保存数据')
  53. }
  54. }]
  55. });
  56. });
  57.  
  58. </script>
  59. </head>
  60. <body>
  61. <table id="test"></table>
  62. </body>
  63. </html>

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

效果:

jQuery EasyUI---Dialog

网页窗体效果。

基本代码:

  1. 代码Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--><html xmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3. <title>Dialog</title>
  4.  
  5. <script src="../jquery-1.4.2.min.js" type="text/javascript"></script>
  6. <script src="../jquery.easyui.min.js" type="text/javascript"></script>
  7.  
  8. <link href="../themes/default/easyui.css" rel="stylesheet" type="text/css" />
  9. <link href="../themes/icon.css" rel="stylesheet" type="text/css" />
  10.  
  11. <script>
  12. $(function(){
  13. $('#dd').dialog({
  14. toolbar:[{
  15. text:'添加',
  16. iconCls:'icon-add',
  17. handler:function(){
  18. alert('添加数据')
  19. }
  20. },'-',{
  21. text:'保存',
  22. iconCls:'icon-save',
  23. handler:function(){
  24. alert('保存数据')
  25. }
  26. }],
  27. buttons:[{
  28. text:'提交',
  29. iconCls:'icon-ok',
  30. handler:function(){
  31. alert('提交数据');
  32. }
  33. },{
  34. text:'取消',
  35. handler:function(){
  36. $('#dd').dialog('取消');
  37. }
  38. }]
  39. });
  40. });
  41.  
  42. </script>
  43. </head>
  44. <body>
  45. <div id="dd" style="padding:5px;width:400px;height:200px;">
  46. <p>jQuery EasyUI---Dialog</p>
  47. </div>
  48. </body>
  49. </html>

效果:

jQuery EasyUI---Tabs

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

基本代码:

  1. 代码Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--><html xmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3. <title>Tabs</title>
  4.  
  5. <script src="../jquery-1.4.2.min.js" type="text/javascript"></script>
  6. <script src="../jquery.easyui.min.js" type="text/javascript"></script>
  7.  
  8. <link href="../themes/default/easyui.css" rel="stylesheet" type="text/css" />
  9. <link href="../themes/icon.css" rel="stylesheet" type="text/css" />
  10. </head>
  11. <body>
  12. <div id="tt" class="easyui-tabs" style="width:500px;height:250px;">
  13. <div title="Tab1" style="padding:20px;display:none;">
  14. <h1>Tab1 Content</h1>
  15. </div>
  16.  
  17. <div title="Tab5" closable="true" style="padding:10px;display:none;">
  18. <div class="easyui-tabs" fit="true" plain="true" style="height:100px;width:300px;">
  19. <div title="Title1">Content 1</div>
  20. <div title="Title2">Content 2</div>
  21. <div title="Title3">Content 3</div>
  22. </div>
  23. </div>
  24. </div>
  25. </body>
  26. </html>

效果:

jQuery EasyUI---Messager

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

基本代码:

  1. 代码Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--><html xmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3. <title>Messager</title>
  4. <script src="../jquery-1.4.2.min.js" type="text/javascript"></script>
  5. <script src="../jquery.easyui.min.js" type="text/javascript"></script>
  6.  
  7. <link href="../themes/default/easyui.css" rel="stylesheet" type="text/css" />
  8. <link href="../themes/icon.css" rel="stylesheet" type="text/css" />
  9. <script>
  10. function show1() {
  11. $.messager.show({
  12. title: '提示信息1',
  13. msg: '信息1',
  14. showType: 'show'
  15. });
  16. }
  17. function show2() {
  18. $.messager.show({
  19. title: '提示信息2',
  20. msg: '信息5分钟后消失.',
  21. timeout: 5000,
  22. showType: 'slide'
  23. });
  24. }
  25. function show3() {
  26. $.messager.show({
  27. title: '渐进显示信息3',
  28. msg: '渐进显示信息3',
  29. timeout: 0,
  30. showType: 'fade'
  31. });
  32. }
  33. </script>
  34. </head>
  35. <body>
  36. <h1>信息提示</h1>
  37. <div>
  38. <a href="javascript:void(0)" onclick="show1()">显示</a> |
  39. <a href="#" onclick="show2()">滑动</a> |
  40. <a href="#" onclick="show3()">渐进显示</a> |
  41. </div>
  42. </body>
  43. </html>

效果:

 页面左下角信息提示

jQuery EasyUI---ValidateBox

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

基本代码:

  1. 代码Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--><html xmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3. <title>ValidateBox</title>
  4.  
  5. <script src="../jquery-1.4.2.min.js" type="text/javascript"></script>
  6. <script src="../jquery.easyui.min.js" type="text/javascript"></script>
  7.  
  8. <link href="../themes/default/easyui.css" rel="stylesheet" type="text/css" />
  9. <link href="../themes/icon.css" rel="stylesheet" type="text/css" />
  10. </head>
  11. <body>
  12. <div>
  13. <table>
  14. <tr>
  15. <td>姓名:</td>
  16. <td><input class="easyui-validatebox" required="true" validType="length[1,3]"></td>
  17. </tr>
  18. <tr>
  19. <td>电子邮件:</td>
  20. <td><input class="easyui-validatebox" required="true" validType="email"></td>
  21. </tr>
  22. <tr>
  23. <td>URL:</td>
  24. <td><input class="easyui-validatebox" required="true" validType="url"></td>
  25. </tr>
  26. <tr>
  27. <td>说明:</td>
  28. <td><textarea class="easyui-validatebox" required="true" style="height:100px;"></textarea></td>
  29. </tr>
  30. </table>
  31. </div>
  32. </body>
  33. </html>

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

效果:

jQuery EasyUI---LayOut

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

基本代码:

  1. 代码Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--><html xmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3. <title>LayOut</title>
  4. <script src="../jquery-1.4.2.min.js" type="text/javascript"></script>
  5. <script src="../jquery.easyui.min.js" type="text/javascript"></script>
  6.  
  7. <link href="../themes/default/easyui.css" rel="stylesheet" type="text/css" />
  8. <link href="../themes/icon.css" rel="stylesheet" type="text/css" />
  9. </head>
  10. <body>
  11. <div class="easyui-layout" style="width:600px;height:400px;">
  12. <div region="north" border="false" style="overflow:hidden;height:60px;background:#A4BED4;">
  13. <h2>Border布局</h2>
  14. </div>
  15. <div region="south" split="true" style="height:50px;background:#efefef;">
  16. </div>
  17. <div region="east" icon="icon-reload" title="Menu2" split="true" style="width:180px;">
  18. </div>
  19. <div region="west" split="true" title="Menu1" style="width:100px;">
  20. </div>
  21. <div region="center" title="Main Form" style="background:#eee;">
  22. </div>
  23. </div>
  24. </body>
  25. </html>

效果:

jQuery EasyUI---换肤

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

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

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

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

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

本文代码:/Files/gaoweipeng/EasyUITest.rar

初试jQuery EasyUI的更多相关文章

  1. 套用JQuery EasyUI列表显示数据、分页、查询

    声明,本博客从csdn搬到cnblogs博客园了,以前的csdn不再更新,朋友们可以到这儿来找我的文章,更多的文章会发表,谢谢关注! 有时候闲的无聊,看到extjs那么肥大,真想把自己的项目改了,最近 ...

  2. Jquery EasyUI 开发实录

    有好几年没有用过EasyUI了,最近在外包做的一个项目中新增功能时,又用到了,本以为和按照以前那样用就可以了,可当我真正用的时候,发现许多地方不一样了,就连官网的文档都更新了,最突出的就是不知道什么时 ...

  3. jQuery UI与jQuery easyUI的冲突解决办法

    jQuery UI与jQuery easyUI都是基于jQuery开发的.难免里面会有些方法名冲突! 因此对jQuery.easyui其中的两个方法名:resizable 和 draggable进行替 ...

  4. jquery easyui 动态绑定数据列

    function doSearch2() { var strsql = $('#sssql').val(); $.ajax({ url: "../HttpHandler/DownloadHa ...

  5. jquery easyui使用(四)······添加,编辑,删除

    前端: <div style="font-size: 25px; font-weight: 700; margin: 50px 0 10px 10px;"> 车辆登记 ...

  6. jquery easyui使用(二)······可折叠面板动态加载无效果

    先上代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"& ...

  7. jquery easyui使用(一)······可折叠面板的布局,手风琴

    <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...

  8. jquery easyui菜单树显示

    目前做了一个easyui项目需要显示多级菜单,菜单配置到数据库中,因此每级菜单都需要到数据库中取,用了jQuery EasyUI方便多了. 效果体验:http://hovertree.com/texi ...

  9. 第 1 章 jQuery EasyUI 入门

    学习要点: 1.什么是 jQuery EasyUI 2.学习 jQuery EasyUI 的条件 3.jQuery EasyUI 的功能和优势 4.其他的 UI 插件 5.是否兼容低版本 IE 6.下 ...

随机推荐

  1. Axure RP 8.0 中继器初体验

    为了解决增删等复杂交互的问题,中继器是个不错的选择. 拖拽出一个默认的中继器 中继器的数据集感觉就像是数据库一样,在右边检视窗口中可以看到中继器的默认数据集,可以理解成一张二维表.默认有1列,现成的3 ...

  2. 软件缺陷分析方法:ODC

    资料 Orthogonal Defect Classification:简要描述. ODC-5-2.pdf :详细说明了ODC对于缺陷属性分类的描述,以及具体应该怎么划分. ODC-5-2-Exten ...

  3. JavaScript运行机制浅析

    从一个简单的问题谈起: <script type="text/javascript"> alert(i); var i = 1; </script> 输出结 ...

  4. Why should i use url.openStream instead of of url.getContent?

    I would like to retrieve the content of a url. Similar to pythons: html_content = urllib.urlopen(&qu ...

  5. FZU2138-久违的月赛之一

    Problem Description 好久没举月赛了,这次lqw给大家出了5道题,因为hsy学长宣传的很到位,吸引了n个DDMM们来做,另一位kk学长说,全做对的要给金奖,做对4题要给银奖,做对3题 ...

  6. Zend Framework 2参考Zend\Authentication(HTTP认证适配器)

    Zend Framework 2参考Zend\Authentication(HTTP认证适配器) 介绍 Zend\Authentication\Adapter\Http提供了RFC-2617, Bas ...

  7. ios 记录支付宝集成遇到的坑及解决方法

    今天项目中要开始动手集成支付宝支付,在此小结一下.(目前新版的支付宝SDK有较大改版,去集成还需要自己去开发平台详细的按照集成步骤来完成https://doc.open.alipay.com/docs ...

  8. C# 枚举 字符串 转换

    普通方法 这种方法尽管很SB但确实可以解决问题 private void comboBox1_SelectedIndexChanged(object sender, EventArgs e) { st ...

  9. ADO.NET与Oracle(一):获取多行记录集

    近期接触ADO.NET和Oracle.将我寻常遇到的一些问题和大家共享. 我认为要想入门ADO.NET操作Oracle,最主要的要求就是要会通过ADO.NET更新Oracle中的数据. 该文简单讲些利 ...

  10. MP算法和OMP算法及其思想

    主要介绍MP(Matching Pursuits)算法和OMP(Orthogonal Matching Pursuit)算法[1],这两个算法尽管在90年代初就提出来了,但作为经典的算法,国内文献(可 ...