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页面，源码如下所示：

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>easyui的panel的使用练习</title>

 <!-- 引入css，不限制顺序 -->

 <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">

 <link rel="stylesheet" type="text/css" href="../../themes/icon.css">   

 <!-- 引入js文件，限制顺序 -->

 <script type="text/javascript" src="../../js/jquery.min.js"></script>

 <script type="text/javascript" src="../../js/jquery.easyui.min.js"></script>  

 </head>

 <body>

 <div id="p" style="width:500px;height:200px;padding:10px;"

      title="我的面板"

      class="easyui-panel"

      data-options="iconCls:'icon-save',collapsible:'true',

              closable:true,maximizable:true,minimizable:true"

      >   

         我的面板 1

 </div> 

 </body>

 </html>

实现效果如下所示：

2：实现的方法二：

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

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

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>easyui的panel的使用练习</title>

 <!-- 引入css，不限制顺序 -->

 <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">

 <link rel="stylesheet" type="text/css" href="../../themes/icon.css">   

 <!-- 引入js文件，限制顺序 -->

 <script type="text/javascript" src="../../js/jquery.min.js"></script>

 <script type="text/javascript" src="../../js/jquery.easyui.min.js"></script>  

 <script type="text/javascript">

     $(document).ready(function(){

         $("#p1").panel({

             width:500,

             height:150,

             title:'我的第二个面板',

             tools:[{

                 iconCls:'icon-add',

                 handler:function(){

                     alert("搞笑的弹出框.....")}

             },{

                 iconCls:'icon-save',

                 handler:function(){

                     alert("搞笑的弹出框2......")

                 }

             }]

         });

     });

 </script>

 </head>

 <body>

 <div id="p1" style="padding:10px">

     <h1>第二个面板测试</h1>

 </div>

 </body>

 </html>

实现效果如下所示：

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

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

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>easyui的layout的使用练习</title>

 <!-- 引入css，不限制顺序 -->

 <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">

 <link rel="stylesheet" type="text/css" href="../../themes/icon.css">   

 <!-- 引入js文件，限制顺序 -->

 <script type="text/javascript" src="../../js/jquery.min.js"></script>

 <script type="text/javascript" src="../../js/jquery.easyui.min.js"></script>  

 </head>

 <body>

 <div id="layoutId" class="easyui-layout"

     style="width:700px;height:500px;"

     data-options="fit:true">  

     <!-- 北 -->

     <div data-options="region:'north',title:'北边的标题',split:true,border:true,iconCls:'icon-edit',collapsible:true,minHeight:180,maxHeight:600" style="height:100px;"></div>   

     <!-- 南 -->

     <div data-options="region:'south',title:'南边的标题',split:true,border:true,iconCls:'icon-add'" style="height:100px;"></div>   

     <!-- 东 -->

     <div data-options="region:'east',iconCls:'icon-reload',title:'东边的标题',split:true,border:true" style="width:100px;"></div>   

        <!-- 西 -->

     <div data-options="region:'west',title:'西边的标题',split:true,border:true" style="width:100px;"></div>   

     <!-- 中间 -->

     <div data-options="region:'center',title:'中间的标题',border:true,href:'../../images/huang.png'" style="padding:5px;background:#eee;"></div>   

 </div>

 <script type="text/javascript">

     $(document).ready(function(){

         //easyui调用方法的语法如下所示：

         //调用方法的语法：$('selector').plugin('method', parameter);

         $('#layoutId').layout('collapse','north');

         //休息三秒

         window.setTimeout(function(){

             //将南边折叠起来

             $('#layoutId').layout('collapse','south');

             //将南边展开

             $('#layoutId').layout('expand','north');

             //休息三秒

             window.setTimeout(function(){

                 //将南边展开

                 $("#layoutId").layout('expand','south');

             }, 3000);

         }, 3000);

     });

 </script>

 </body>

 </html>

演示效果如下所示：

　　（2）创建嵌套布局：

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

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>easyui的layout的使用练习</title>

 <!-- 引入css，不限制顺序 -->

 <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">

 <link rel="stylesheet" type="text/css" href="../../themes/icon.css">   

 <!-- 引入js文件，限制顺序 -->

 <script type="text/javascript" src="../../js/jquery.min.js"></script>

 <script type="text/javascript" src="../../js/jquery.easyui.min.js"></script>  

 </head>

 <body>

     <div id="easyuiId" class="easyui-layout"

         style="width:700;height:500"

         data-options="fit:true">

         <!-- 北边的布局 -->

         <div data-options="region:'north',title:'北边的布局',collapsible:true" style="height:100px"></div>

         <!-- 中间的布局 -->

         <div data-options="region:'center',title:'中间的布局',collapsible:true" style="height:100px">

              <!-- 又一个布局 -->

              <div class="easyui-layout" data-options="fit:true">

                 <div data-options="region:'west',title:'左边的布局'" style="width:180px"></div>

                 <div data-options="region:'center',title:'中间的布局'"></div>

              </div> 

         </div>

     </div>

 </body>

 </html>

不规则布局的演示图：

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

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>easyui的accordion的使用练习</title>

 <!-- 引入css，不限制顺序 -->

 <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">

 <link rel="stylesheet" type="text/css" href="../../themes/icon.css">   

 <!-- 引入js文件，限制顺序 -->

 <script type="text/javascript" src="../../js/jquery.min.js"></script>

 <script type="text/javascript" src="../../js/jquery.easyui.min.js"></script>  

 </head>

 <body>

     <!-- 通过标签创建分类，给<div/>标签添加一个名为'easyui-accordion'的类ID。 -->

     <!-- 容器 -->

     <div id="acordionId" class="easyui-accordion"

         data-options="fit:false,border:true,animate:true,multiple:false,selected:1"

         style="width:300px;height:200px;">

         <!-- 面板 -->

         <div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">

                 河南

         </div>   

         <!-- 面板 -->

         <div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">

                 河北

         </div>   

         <!-- 面板 -->

         <div title="Title3" data-options="iconCls:'icon-add'">

                 上海

         </div>  

         <!-- 面板 -->

         <div title="Title4" data-options="iconCls:'icon-add',collapsible:false">

                 北京

         </div>

     </div>  

     <script type="text/javascript">

         //当浏览器加载web页面时触发

         $(document).ready(function(){

             //$('selector').plugin('method', parameter);

             //增加一个面板

             $("#acordionId").accordion("add",{

                 "title":"标题五",

                 "iconCls":"icon-add",

                 "selected":false,

                 "content":"深圳"

             });

             //休息三秒

             window.setTimeout(function(){

                 //删除一个面板

                 $("#acordionId").accordion("remove","Title1");

             }, 3000)

             //都不选中

             window.setTimeout(function(){

                 $("#acordionId").accordion("unselect","Title2");

             }, 3000)

         });

     </script>

 </body>

 </html>

演示效果如下所示:

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

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>easyui的linkbutton的练习和使用</title>

 <!-- 引入css，不限制顺序 -->

 <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">

 <link rel="stylesheet" type="text/css" href="../../themes/icon.css">   

 <!-- 引入js文件，限制顺序 -->

 <script type="text/javascript" src="../../js/jquery.min.js"></script>

 <script type="text/javascript" src="../../js/jquery.easyui.min.js"></script>  

 </head>

 <body>

     <!-- 使用标签创建按钮更加简单。 -->

     <a id="add" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',disabled:true">

         增加部门

     </a>  

     <a id="find" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search',toggle:true">

         查询部门

     </a>  

     <a id="update" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',selected:true">

         修改部门

     </a>  

     <a id="delete" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true">

         删除部门

     </a>  

     <script type="text/javascript">

         $(document).ready(function(){

             //定位四个按钮

             $("a").click(function(){

                 //获取你所单击的按钮的标题

                 var title = $(this).text();

                 //去空格

                 $.trim(title);

                 //打印输出

                 alert(title);

             });

         });

     </script>

 </body>

 </html>

演示效果如下所示：

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

　　5.1：通过标签创建选项卡

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

 <!-- 容器面板 -->

     <div id="tt" class="easyui-tabs" style="width:500px;height:250px;"

         data-options="plain:false,fit:false,border:true,scrollIncrement:20,tools:[

             {

                 iconCls:'icon-add',

                 handler:function(){

                     alert('添加')

                 }

             },

             {

                 iconCls:'icon-save',

                 handler:function(){

                     alert('保存')

                 }

             }

         ],toolPosition:'right',selected:0"

         >   

         <!-- 选项卡 -->

         <div title="Tab1" style="padding:20px;display:none;">

                 标题一    <br/>

                 标题一    <br/>

                 标题一    <br/>

                 标题一    <br/>

                 标题一    <br/>

                 标题一    <br/>

                 标题一    <br/>

                 标题一    <br/>

                 标题一    <br/>

                 标题一    <br/>

                 标题一    <br/>

                 标题一    <br/>

                 标题一    <br/>

                 标题一    <br/>

                 标题一    <br/>

                 标题一    <br/>

         </div>

         <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">

                 标题二

         </div>

         <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">

                 标题三

         </div>

     </div>

演示效果如下所示：

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

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>easyui的layout的使用练习</title>

 <!-- 引入css，不限制顺序 -->

 <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">

 <link rel="stylesheet" type="text/css" href="../../themes/icon.css">   

 <!-- 引入js文件，限制顺序 -->

 <script type="text/javascript" src="../../js/jquery.min.js"></script>

 <script type="text/javascript" src="../../js/jquery.easyui.min.js"></script>

 <script type="text/javascript" src="../../js/easyui-lang-zh_CN.js"></script>  

 </head>

 <body>

     <!-- 使用标签创建分页控件 -->

     <!--

     <div id="paginationId" class="easyui-pagination"

         data-options="total:2000,pageSize:10"

         style="background:#efefef;border:1px solid #ccc;"></div>

      -->

     <div id="paginationId" style="background:#efefef;border:1px solid #ccc;"></div> 

     <script type="text/javascript">

         $(function(){

             //total表示总记录数

             //pagesize表示每页显示多少条记录

             //pagenumber表示当前页号

             //pagelist表示可供选择的每页显示多少条记录，pagesize变量的值必须属于pagelist集合中之一

             $('#paginationId').pagination({

                 "total":2000,

                 "pageSize":10,

                 "pageNumber":2,

                 "pageList":[10,20,30]

             });

         });

     </script>

     <script type="text/javascript">

         $(function(){

             //total表示总记录数

             //pagesize表示每页显示多少条记录

             //pagenumber表示当前页号

             //pagelist表示可供选择的每页显示多少条记录，pagesize变量的值必须属于pagelist集合中之一

             $("#paginationId").pagination({

                 onSelectPage:function(pageNumber, pageSize){

                     //alert("aaa");

                     alert("pageNumber:"+pageNumber);

                     alert("pageSize:"+pageSize);

                 }

             });

         });

     </script>

 </body>

 </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. NODE_ENV不是内部或外部命令,也不是可运行的程序

    NODE_ENV不是内部或外部命令,也不是可运行的程序 解决办法:安装across-env:npm install cross-env –save-dev 在运行命令加前缀:在NODE_ENV=xxx ...

  2. C++著名程序库的比较和学习经验

    内容目录:1.C++各大有名库的介绍——C++标准库2.C++各大有名库的介绍——准标准库Boost3.C++各大有名库的介绍——GUI4.C++各大有名库的介绍——网络通信5.C++各大有名库的介绍 ...

  3. u3d发送邮件

    http://gad.qq.com/article/detail/22810 https://www.douban.com/note/655356118/ http://gad.qq.com/arti ...

  4. 使用C++编写linux多线程程序

    前言 在这个多核时代,如何充分利用每个 CPU 内核是一个绕不开的话题,从需要为成千上万的用户同时提供服务的服务端应用程序,到需要同时打开十几个页面,每个页面都有几十上百个链接的 web 浏览器应用程 ...

  5. UR#13 SRAND

    总感觉这位大仙讲的很清楚:bztminamoto 题意 题目讲的是求 l~r 内所有数的次大质因子,这里设 f(x) 为 x 的次大质因子 我们差分一下就变成求两个前缀和信息了 按照套路,我们考虑 S ...

  6. 037_nginx第三方扩展

    一.ngx_func_limit_req.conf(nginx限制请求数配置) # limit req zone limit_req_zone $binary_remote_addr $http_us ...

  7. 任意N位二进制的补码实现——队列存放

    正在学习计算机组织与结构,为了写一些底层的算术操作模拟,比如一个二进制补码数的加减乘除,发现这很麻烦,因为不管是什么语言,都只提供了8位.32.64位等部分位数的补码形式,那么怎么实现任意任意位的补码 ...

  8. hash·余数hash和一致性hash

    网站的伸缩性架构中,分布式的设计是现在的基本应用. 在memcached的分布式架构中,key-value缓存的命中通常采用分布式的算法 一.余数Hash     简单的路由算法可以使用余数Hash: ...

  9. The word 'localhost' is not correctly spelled 这个问题怎么解决

    The word 'localhost' is not correctly spelled 这个问题怎么解决 有时工程中有下划线并提示 The word is not correctly spelle ...

  10. Windows下Oracle 11g创建数据库

    以前开发的时候用得比较多的是mysql和sql server,oracle用的比较少,用起来比较生疏,mysql和sql server用起来比较类似,就oracle的使用方式和他们不同,oracle在 ...