jQuery EasyUI学习网址：http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html

jQuery MiniUI学习网址：http://www.miniui.com/index.html#tutorial

easyui 的入门学习：http://www.cnblogs.com/biehongli/p/6724953.html

一：jQuery EasyUI的入门指南：

1：实现的方法一

　　（a）：导入jquery.easyui.min.js和jquery.min.js这两个文件，以及theme这个文件；

　　（b）:创建一个html页面，源码如下所示：

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.  <meta charset="UTF-8">
  5.  <title>easyui的panel的使用练习</title>
  6.  
  7.  <!-- 引入css，不限制顺序 -->
  8.  <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
  9.  <link rel="stylesheet" type="text/css" href="../../themes/icon.css">   
  10.  
  11.  <!-- 引入js文件，限制顺序 -->
  12.  <script type="text/javascript" src="../../js/jquery.min.js"></script>
  13.  <script type="text/javascript" src="../../js/jquery.easyui.min.js"></script>  
  14.  
  15.  </head>
  16.  <body>
  17.  
  18.  <div id="p" style="width:500px;height:200px;padding:10px;"
  19.       title="我的面板"
  20.       class="easyui-panel"
  21.       data-options="iconCls:'icon-save',collapsible:'true',
  22.               closable:true,maximizable:true,minimizable:true"
  23.       >   
  24.  
  25.          我的面板 1
  26.  </div> 
  27.  
  28.  </body>
  29.  </html>

实现效果如下所示：

2：实现的方法二：

　　（a）：导入jquery.easyui.min.js和jquery.min.js这两个文件，以及theme这个文件；

　　  （b）:创建一个html页面，源码如下所示：

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.  <meta charset="UTF-8">
  5.  <title>easyui的panel的使用练习</title>
  6.  
  7.  <!-- 引入css，不限制顺序 -->
  8.  <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
  9.  <link rel="stylesheet" type="text/css" href="../../themes/icon.css">   
  10.  
  11.  <!-- 引入js文件，限制顺序 -->
  12.  <script type="text/javascript" src="../../js/jquery.min.js"></script>
  13.  <script type="text/javascript" src="../../js/jquery.easyui.min.js"></script>  
  14.  
  15.  <script type="text/javascript">
  16.      $(document).ready(function(){
  17.          $("#p1").panel({
  18.              width:500,
  19.              height:150,
  20.              title:'我的第二个面板',
  21.              tools:[{
  22.                  iconCls:'icon-add',
  23.                  handler:function(){
  24.                      alert("搞笑的弹出框.....")}
  25.              },{
  26.                  iconCls:'icon-save',
  27.                  handler:function(){
  28.                      alert("搞笑的弹出框2......")
  29.                  }
  30.              }]
  31.          });
  32.  
  33.      });
  34.  
  35.  </script>
  36.  
  37.  </head>
  38.  <body>
  39.  
  40.  <div id="p1" style="padding:10px">
  41.      <h1>第二个面板测试</h1>
  42.  
  43.  </div>
  44.  
  45.  </body>
  46.  </html>

实现效果如下所示：

二：layout布局的练习的使用：

　　（1）：布局容器有5个区域：北、南、东、西和中间。中间区域面板是必须的，边缘的面板都是可选的。每个边缘区域面板都可以通过拖拽其边框改变大小，也可以点击折叠按钮将面板折叠起来。布局可以进行嵌套，用户可以通过组合布局构建复杂的布局结构。

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.  <meta charset="UTF-8">
  5.  <title>easyui的layout的使用练习</title>
  6.  
  7.  <!-- 引入css，不限制顺序 -->
  8.  <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
  9.  <link rel="stylesheet" type="text/css" href="../../themes/icon.css">   
  10.  
  11.  <!-- 引入js文件，限制顺序 -->
  12.  <script type="text/javascript" src="../../js/jquery.min.js"></script>
  13.  <script type="text/javascript" src="../../js/jquery.easyui.min.js"></script>  
  14.  
  15.  </head>
  16.  <body>
  17.  
  18.  <div id="layoutId" class="easyui-layout"
  19.      style="width:700px;height:500px;"
  20.      data-options="fit:true">  
  21.  
  22.      <!-- 北 -->
  23.      <div data-options="region:'north',title:'北边的标题',split:true,border:true,iconCls:'icon-edit',collapsible:true,minHeight:180,maxHeight:600" style="height:100px;"></div>   
  24.  
  25.      <!-- 南 -->
  26.      <div data-options="region:'south',title:'南边的标题',split:true,border:true,iconCls:'icon-add'" style="height:100px;"></div>   
  27.  
  28.      <!-- 东 -->
  29.      <div data-options="region:'east',iconCls:'icon-reload',title:'东边的标题',split:true,border:true" style="width:100px;"></div>   
  30.  
  31.         <!-- 西 -->
  32.      <div data-options="region:'west',title:'西边的标题',split:true,border:true" style="width:100px;"></div>   
  33.  
  34.      <!-- 中间 -->
  35.      <div data-options="region:'center',title:'中间的标题',border:true,href:'../../images/huang.png'" style="padding:5px;background:#eee;"></div>   
  36.  
  37.  </div>
  38.  
  39.  <script type="text/javascript">
  40.  
  41.      $(document).ready(function(){
  42.          //easyui调用方法的语法如下所示：
  43.          //调用方法的语法：$('selector').plugin('method', parameter);
  44.          $('#layoutId').layout('collapse','north');
  45.          //休息三秒
  46.          window.setTimeout(function(){
  47.              //将南边折叠起来
  48.              $('#layoutId').layout('collapse','south');
  49.  
  50.              //将南边展开
  51.              $('#layoutId').layout('expand','north');
  52.  
  53.              //休息三秒
  54.              window.setTimeout(function(){
  55.                  //将南边展开
  56.                  $("#layoutId").layout('expand','south');
  57.              }, 3000);
  58.          }, 3000);
  59.  
  60.      });
  61.  
  62.  </script>
  63.  
  64.  </body>
  65.  </html>

演示效果如下所示：

　　（2）创建嵌套布局：

　　　　 注意：嵌套在内部的布局面板的左侧(西面)面板是折叠的。

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.  <meta charset="UTF-8">
  5.  <title>easyui的layout的使用练习</title>
  6.  
  7.  <!-- 引入css，不限制顺序 -->
  8.  <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
  9.  <link rel="stylesheet" type="text/css" href="../../themes/icon.css">   
  10.  
  11.  <!-- 引入js文件，限制顺序 -->
  12.  <script type="text/javascript" src="../../js/jquery.min.js"></script>
  13.  <script type="text/javascript" src="../../js/jquery.easyui.min.js"></script>  
  14.  
  15.  </head>
  16.  <body>
  17.  
  18.      <div id="easyuiId" class="easyui-layout"
  19.          style="width:700;height:500"
  20.          data-options="fit:true">
  21.  
  22.          <!-- 北边的布局 -->
  23.          <div data-options="region:'north',title:'北边的布局',collapsible:true" style="height:100px"></div>
  24.  
  25.          <!-- 中间的布局 -->
  26.          <div data-options="region:'center',title:'中间的布局',collapsible:true" style="height:100px">
  27.               <!-- 又一个布局 -->
  28.               <div class="easyui-layout" data-options="fit:true">
  29.                  <div data-options="region:'west',title:'左边的布局'" style="width:180px"></div>
  30.                  <div data-options="region:'center',title:'中间的布局'"></div>
  31.               </div> 
  32.  
  33.          </div>
  34.      </div>
  35.  
  36.  </body>
  37.  </html>

不规则布局的演示图：

三：分类空间允许用户使用多面板，但在同一时间只会显示一个。每个面板都内建支持展开和折叠功能。点击一个面板的标题将会展开或折叠面板主体。面板内容可以通过指定的'href'属性使用ajax方式读取面板内容。用户可以定义一个被默认选中的面板，如果未指定，那么第一个面板就是默认的。

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.  <meta charset="UTF-8">
  5.  <title>easyui的accordion的使用练习</title>
  6.  
  7.  <!-- 引入css，不限制顺序 -->
  8.  <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
  9.  <link rel="stylesheet" type="text/css" href="../../themes/icon.css">   
  10.  
  11.  <!-- 引入js文件，限制顺序 -->
  12.  <script type="text/javascript" src="../../js/jquery.min.js"></script>
  13.  <script type="text/javascript" src="../../js/jquery.easyui.min.js"></script>  
  14.  
  15.  </head>
  16.  <body>
  17.  
  18.      <!-- 通过标签创建分类，给<div/>标签添加一个名为'easyui-accordion'的类ID。 -->
  19.      <!-- 容器 -->
  20.      <div id="acordionId" class="easyui-accordion"
  21.          data-options="fit:false,border:true,animate:true,multiple:false,selected:1"
  22.          style="width:300px;height:200px;">
  23.          <!-- 面板 -->
  24.          <div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">
  25.                  河南
  26.          </div>   
  27.  
  28.          <!-- 面板 -->
  29.          <div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">
  30.                  河北
  31.          </div>   
  32.  
  33.          <!-- 面板 -->
  34.          <div title="Title3" data-options="iconCls:'icon-add'">
  35.                  上海
  36.          </div>  
  37.  
  38.          <!-- 面板 -->
  39.          <div title="Title4" data-options="iconCls:'icon-add',collapsible:false">
  40.                  北京
  41.          </div>
  42.      </div>  
  43.  
  44.      <script type="text/javascript">
  45.          //当浏览器加载web页面时触发
  46.          $(document).ready(function(){
  47.              //$('selector').plugin('method', parameter);
  48.              //增加一个面板
  49.              $("#acordionId").accordion("add",{
  50.                  "title":"标题五",
  51.                  "iconCls":"icon-add",
  52.                  "selected":false,
  53.                  "content":"深圳"
  54.              });
  55.  
  56.              //休息三秒
  57.              window.setTimeout(function(){
  58.                  //删除一个面板
  59.                  $("#acordionId").accordion("remove","Title1");
  60.              }, 3000)
  61.  
  62.              //都不选中
  63.              window.setTimeout(function(){
  64.                  $("#acordionId").accordion("unselect","Title2");
  65.              }, 3000)
  66.  
  67.          });
  68.      </script>
  69.  </body>
  70.  </html>

演示效果如下所示:

四：按钮组件使用超链接按钮创建。它使用一个普通的<a>标签进行展示。它可以同时显示一个图标和文本,或只有图标或文字。按钮的宽度可以动态和折叠/展开以适应它的文本标签。

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.  <meta charset="UTF-8">
  5.  <title>easyui的linkbutton的练习和使用</title>
  6.  
  7.  <!-- 引入css，不限制顺序 -->
  8.  <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
  9.  <link rel="stylesheet" type="text/css" href="../../themes/icon.css">   
  10.  
  11.  <!-- 引入js文件，限制顺序 -->
  12.  <script type="text/javascript" src="../../js/jquery.min.js"></script>
  13.  <script type="text/javascript" src="../../js/jquery.easyui.min.js"></script>  
  14.  
  15.  </head>
  16.  <body>
  17.      <!-- 使用标签创建按钮更加简单。 -->
  18.      <a id="add" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',disabled:true">
  19.          增加部门
  20.      </a>  
  21.  
  22.      <a id="find" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search',toggle:true">
  23.          查询部门
  24.      </a>  
  25.  
  26.      <a id="update" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',selected:true">
  27.          修改部门
  28.      </a>  
  29.  
  30.      <a id="delete" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true">
  31.          删除部门
  32.      </a>  
  33.  
  34.      <script type="text/javascript">
  35.          $(document).ready(function(){
  36.              //定位四个按钮
  37.              $("a").click(function(){
  38.                  //获取你所单击的按钮的标题
  39.                  var title = $(this).text();
  40.                  //去空格
  41.                  $.trim(title);
  42.                  //打印输出
  43.                  alert(title);
  44.              });
  45.  
  46.          });
  47.  
  48.      </script>
  49.  </body>
  50.  </html>

演示效果如下所示：

五：选项卡显示一批面板。但在同一个时间只会显示一个面板。每个选项卡面板都有头标题和一些小的按钮工具菜单，包括关闭按钮和其他自定义按钮。

　　5.1：通过标签创建选项卡

　　　　通过标签可以更容易的创建选项卡，我们不需要写任何Javascript代码。只需要给<div/>标签添加一个类ID'easyui-tabs'。每个选项卡面板都通过子<div/>标签进行创建，用法和panel(面板)相同。

  1.  <!-- 容器面板 -->
  2.      <div id="tt" class="easyui-tabs" style="width:500px;height:250px;"
  3.          data-options="plain:false,fit:false,border:true,scrollIncrement:20,tools:[
  4.              {
  5.                  iconCls:'icon-add',
  6.                  handler:function(){
  7.                      alert('添加')
  8.                  }
  9.              },
  10.              {
  11.                  iconCls:'icon-save',
  12.                  handler:function(){
  13.                      alert('保存')
  14.                  }
  15.              }
  16.          ],toolPosition:'right',selected:0"
  17.          >   
  18.  
  19.          <!-- 选项卡 -->
  20.          <div title="Tab1" style="padding:20px;display:none;">
  21.                  标题一    <br/>
  22.                  标题一    <br/>
  23.                  标题一    <br/>
  24.                  标题一    <br/>
  25.                  标题一    <br/>
  26.                  标题一    <br/>
  27.                  标题一    <br/>
  28.                  标题一    <br/>
  29.                  标题一    <br/>
  30.                  标题一    <br/>
  31.                  标题一    <br/>
  32.                  标题一    <br/>
  33.                  标题一    <br/>
  34.                  标题一    <br/>
  35.                  标题一    <br/>
  36.                  标题一    <br/>
  37.  
  38.          </div>
  39.          <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">
  40.                  标题二
  41.          </div>
  42.          <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">
  43.                  标题三
  44.          </div>
  45.      </div>

演示效果如下所示：

六：该分页控件允许用户导航页面的数据。它支持页面导航和页面长度选择的选项设置。用户可以在分页控件上添加自定义按钮，以增强其功能。

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.  <meta charset="UTF-8">
  5.  <title>easyui的layout的使用练习</title>
  6.  
  7.  <!-- 引入css，不限制顺序 -->
  8.  <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
  9.  <link rel="stylesheet" type="text/css" href="../../themes/icon.css">   
  10.  
  11.  <!-- 引入js文件，限制顺序 -->
  12.  <script type="text/javascript" src="../../js/jquery.min.js"></script>
  13.  <script type="text/javascript" src="../../js/jquery.easyui.min.js"></script>
  14.  <script type="text/javascript" src="../../js/easyui-lang-zh_CN.js"></script>  
  15.  
  16.  </head>
  17.  <body>
  18.  
  19.      <!-- 使用标签创建分页控件 -->
  20.      <!--
  21.      <div id="paginationId" class="easyui-pagination"
  22.          data-options="total:2000,pageSize:10"
  23.          style="background:#efefef;border:1px solid #ccc;"></div>
  24.       -->
  25.  
  26.      <div id="paginationId" style="background:#efefef;border:1px solid #ccc;"></div> 
  27.  
  28.      <script type="text/javascript">
  29.          $(function(){
  30.              //total表示总记录数
  31.              //pagesize表示每页显示多少条记录
  32.              //pagenumber表示当前页号
  33.              //pagelist表示可供选择的每页显示多少条记录，pagesize变量的值必须属于pagelist集合中之一
  34.              $('#paginationId').pagination({
  35.                  "total":2000,
  36.                  "pageSize":10,
  37.                  "pageNumber":2,
  38.                  "pageList":[10,20,30]
  39.              });
  40.          });
  41.      </script>
  42.  
  43.      <script type="text/javascript">
  44.          $(function(){
  45.              //total表示总记录数
  46.              //pagesize表示每页显示多少条记录
  47.              //pagenumber表示当前页号
  48.              //pagelist表示可供选择的每页显示多少条记录，pagesize变量的值必须属于pagelist集合中之一
  49.              $("#paginationId").pagination({
  50.                  onSelectPage:function(pageNumber, pageSize){
  51.                      //alert("aaa");
  52.                      alert("pageNumber:"+pageNumber);
  53.                      alert("pageSize:"+pageSize);
  54.                  }
  55.              });
  56.          });
  57.      </script>
  58.  
  59.  </body>
  60.  </html>

演示效果如下所示：

未完待续....

jQuery EasyUI一个基于 jQuery 的框架(创建网页所需的一切)的更多相关文章

  1. 一个基于jQuery的简单树形菜单

    在工作中的项目使用的是一个前端基于 jQuery easyui 的一个系统,其中左侧的主菜单使用的是 easyui 中的 tree 组件,不是太熟悉,不过感觉不是太好用. 比如 easyui 中的 t ...

  2. [smartMenu.js] 一个基于jquery的实用的右键拓展菜单栏插件

    正在为电子书阅读器添加精准易用的标记功能,其中一个方案是扩展阅读器界面的右键菜单栏,使得用户右键点击某个词.子句.段落的时候可以进行扩展操作. 右键菜单栏有很多基于jQuery的插件,其中灵活性比较强 ...

  3. JAVA WEB快速入门之从编写一个基于SpringBoot+Mybatis快速创建的REST API项目了解SpringBoot、SpringMVC REST API、Mybatis等相关知识

    JAVA WEB快速入门系列之前的相关文章如下:(文章全部本人[梦在旅途原创],文中内容可能部份图片.代码参照网上资源) 第一篇:JAVA WEB快速入门之环境搭建 第二篇:JAVA WEB快速入门之 ...

  4. jQuery补充，基于jQuery的bxslider轮播器插件

    基于jQuery的bxslider轮播器插件 html <!DOCTYPE html> <html lang="zh-cn"> <head> & ...

  5. 福利到~分享一个基于jquery的智能提示控件intellSeach.js

    一.需求 我们经常会遇到[站内搜索]的需求,为了提高用户体验,我们希望能做到像百度那样的即时智能提示.例如:某公司人事管理系统,想搜索李XX,只要输入“李”,系统自然会提示一些姓李的员工,这样方便用户 ...

  6. 一个基于jquery的智能提示控件intellSeach.js

    一.需求 我们经常会遇到[站内搜索]的需求,为了提高用户体验,我们希望能做到像百度那样的即时智能提示.例如:某公司人事管理系统,想搜索李XX,只要输入“李”,系统自然会提示一些姓李的员工,这样方便用户 ...

  7. 介绍一个基于jQuery的Cookie操作插件

    在网页客户端,我们经常会遇到读取或者设置cookie的情况,如果用纯生的js我们可能会遇到一些兼容性带来的麻烦,这里给大家介绍一个比较实用jquery操作cookie的插件,插件的源代码如下: jQu ...

  8. 一个基于jQuery写的弹窗效果(附源码)

    最近项目中频繁遇到需要弹出窗口的功能,一直使用浏览器默认的Alert和Confirm弹窗,感觉视觉效果不是那么好,而从网上下载的话又找不到合适的,找到的话有些也是十分臃肿,有时候感觉学习配置的功夫自己 ...

  9. JQuery Easyui/TopJUI 基本树形表格的创建

    <table data-toggle="topjui-treegrid" data-options="id:'menuTg', idField:'id', tree ...

随机推荐

  1. Pytorch中RoI pooling layer的几种实现

    Faster-RCNN论文中在RoI-Head网络中,将128个RoI区域对应的feature map进行截取,而后利用RoI pooling层输出7*7大小的feature map.在pytorch ...

  2. 前段基础之CSS

    本文参考:https://www.cnblogs.com/ctztake/p/7577436.html CSS 语法 CSS规则由两个主要的部分构成:选择器,以及一条或多条声明. ''' select ...

  3. 题解 SP26045 【GCDMAT2 - GCD OF MATRIX (hard)】

    承接一下洛咕上的题解,这里基本就是谈谈优化,放个代码的 我们发现这里的常数主要来自于除法,那么我们优化除法次数,把所有的 \(n/1...n/s\) (\(s=\sqrt n\))存下来,然后归并排( ...

  4. BZOJ3224/LOJ104 普通平衡树 treap(树堆)

    您需要写一种数据结构,来维护一些数,其中需要提供以下操作:1. 插入x2. 删除x(若有多个相同的数,因只删除一个)3. 查询x的排名(若有多个相同的数,因输出最小的排名)4. 查询排名为x的数5. ...

  5. web@css引入方式，基本选择器,3大特性,高效运行

    4.高效的css 所谓高效就是让浏览器查找更少的元素标签来确定匹配的style元素.      1.不要再ID选择器前使用标签名        解释:ID选择是唯一的,加上标签名相当于画蛇添足了,没必 ...

  6. kafka manager安装配置和使用

    kafka manager安装配置和使用 .安装yum源 curl https://bintray.com/sbt/rpm/rpm | sudo tee /etc/yum.repos.d/bintra ...

  7. struct/class等内存字节对齐问题详解

    问题引入 定义一个结构体的一般形式为: struct 结构体名 { //类型说明符 成员名; }; 例如有如下结构体: struct Stu { int id; char sex; float hig ...

  8. 使用Gitblit 在Windows上部署Git Server

    Windows平台下Git服务器搭建 首先要下载Java JDK,安装完成后设置环境变量,先把java环境配好,接下来才是下面的gitblit.关于java环境配置请看上一篇文章 gitblit下载 ...

  9. GZip、deflate和sdch压缩（网摘整理）

    GZip和deflate: gzip是一种数据格式,默认且目前仅使用deflate算法压缩data部分:deflate是一种压缩算法,是huffman编码的一种加强. deflate与gzip解压的代 ...

  10. GDOI2018 涛涛摘苹果 [CDQ分治]

    传送门我会让你知道哪里有题面吗(逃 思路 显然不能模拟苹果下掉的过程,考虑计算每个苹果对询问的贡献. 显然一开始就有的苹果可以看做第0天变出来的,于是只需要考虑变出来的苹果了. 设当前询问节点\(x\ ...