前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >jQuery EasyUI一个基于 jQuery 的框架(创建网页所需的一切)

jQuery EasyUI一个基于 jQuery 的框架(创建网页所需的一切)

作者头像
别先生
发布2018-01-02 14:30:04
4.3K1
发布2018-01-02 14:30:04
举报
文章被收录于专栏:别先生

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

代码语言:javascript
复制
 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 
19 <div id="p" style="width:500px;height:200px;padding:10px;"   
20      title="我的面板"
21      class="easyui-panel"  
22      data-options="iconCls:'icon-save',collapsible:'true',
23              closable:true,maximizable:true,minimizable:true"
24      >   
25      
26         我的面板 1   
27 </div> 
28 
29 
30 </body>
31 </html>

实现效果如下所示:

2:实现的方法二:

(a):导入jquery.easyui.min.js和jquery.min.js这两个文件,以及theme这个文件;

(b):创建一个html页面,源码如下所示:

代码语言:javascript
复制
 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 
36 </script>
37 
38 </head>
39 <body>
40 
41 
42 
43 <div id="p1" style="padding:10px">
44     <h1>第二个面板测试</h1>
45         
46 </div>
47 
48 
49 
50 </body>
51 </html>

实现效果如下所示:

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

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

代码语言:javascript
复制
 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 
19 <div id="layoutId" class="easyui-layout"
20     style="width:700px;height:500px;"
21     data-options="fit:true">  
22     
23     <!-- 北 -->
24     <div data-options="region:'north',title:'北边的标题',split:true,border:true,iconCls:'icon-edit',collapsible:true,minHeight:180,maxHeight:600" style="height:100px;"></div>   
25     
26     <!-- 南 -->
27     <div data-options="region:'south',title:'南边的标题',split:true,border:true,iconCls:'icon-add'" style="height:100px;"></div>   
28     
29     <!-- 东 -->
30     <div data-options="region:'east',iconCls:'icon-reload',title:'东边的标题',split:true,border:true" style="width:100px;"></div>   
31    
32        <!-- 西 -->
33     <div data-options="region:'west',title:'西边的标题',split:true,border:true" style="width:100px;"></div>   
34     
35     <!-- 中间 -->
36     <div data-options="region:'center',title:'中间的标题',border:true,href:'../../images/huang.png'" style="padding:5px;background:#eee;"></div>   
37     
38 </div>
39 
40 
41 <script type="text/javascript">
42     
43     $(document).ready(function(){
44         //easyui调用方法的语法如下所示:
45         //调用方法的语法:$('selector').plugin('method', parameter); 
46         $('#layoutId').layout('collapse','north');
47         //休息三秒
48         window.setTimeout(function(){
49             //将南边折叠起来
50             $('#layoutId').layout('collapse','south');
51             
52             //将南边展开
53             $('#layoutId').layout('expand','north');
54             
55             //休息三秒
56             window.setTimeout(function(){
57                 //将南边展开
58                 $("#layoutId").layout('expand','south');
59             }, 3000);
60         }, 3000);
61         
62     });
63     
64 
65 
66 </script>
67 
68 </body>
69 </html>

演示效果如下所示:

  (2)创建嵌套布局:

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

代码语言:javascript
复制
 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方式读取面板内容。用户可以定义一个被默认选中的面板,如果未指定,那么第一个面板就是默认的。

代码语言:javascript
复制
 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>标签进行展示。它可以同时显示一个图标和文本,或只有图标或文字。按钮的宽度可以动态和折叠/展开以适应它的文本标签。

代码语言:javascript
复制
 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 
16 </head>
17 <body>
18     <!-- 使用标签创建按钮更加简单。 -->
19     <a id="add" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',disabled:true">
20         增加部门
21     </a>  
22     
23     <a id="find" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search',toggle:true">
24         查询部门
25     </a>  
26     
27     <a id="update" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',selected:true">
28         修改部门
29     </a>  
30     
31     <a id="delete" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true">
32         删除部门
33     </a>  
34 
35 
36     <script type="text/javascript">
37         $(document).ready(function(){
38             //定位四个按钮
39             $("a").click(function(){
40                 //获取你所单击的按钮的标题
41                 var title = $(this).text();
42                 //去空格
43                 $.trim(title);
44                 //打印输出
45                 alert(title);
46             });
47             
48         });
49     
50     </script>
51 </body>
52 </html>

演示效果如下所示:

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

   5.1:通过标签创建选项卡

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

代码语言:javascript
复制
 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>

演示效果如下所示:

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

代码语言:javascript
复制
 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     
27     <div id="paginationId" style="background:#efefef;border:1px solid #ccc;"></div> 
28     
29     <script type="text/javascript">
30         $(function(){
31             //total表示总记录数
32             //pagesize表示每页显示多少条记录
33             //pagenumber表示当前页号
34             //pagelist表示可供选择的每页显示多少条记录,pagesize变量的值必须属于pagelist集合中之一
35             $('#paginationId').pagination({ 
36                 "total":2000, 
37                 "pageSize":10,
38                 "pageNumber":2,
39                 "pageList":[10,20,30]
40             });
41         });
42     </script>
43     
44     <script type="text/javascript">
45         $(function(){
46             //total表示总记录数
47             //pagesize表示每页显示多少条记录
48             //pagenumber表示当前页号
49             //pagelist表示可供选择的每页显示多少条记录,pagesize变量的值必须属于pagelist集合中之一
50             $("#paginationId").pagination({ 
51                 onSelectPage:function(pageNumber, pageSize){
52                     //alert("aaa");
53                     alert("pageNumber:"+pageNumber);
54                     alert("pageSize:"+pageSize);
55                 }
56             });
57         });
58     </script>
59     
60 </body>
61 </html>

演示效果如下所示:

未完待续....

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017-07-08 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档