首页 > 代码库 > jQuery EasyUI一个基于 jQuery 的框架(创建网页所需的一切)
jQuery EasyUI一个基于 jQuery 的框架(创建网页所需的一切)
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 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页面，源码如下所示：
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布局的练习的使用：
布局容器有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="http://www.mamicode.com/themes/default/easyui.css"> 9 <link rel="stylesheet" type="text/css" href="http://www.mamicode.com/themes/icon.css"> 10 11 <!-- 引入js文件，限制顺序 -->12 <script type="text/javascript" src="http://www.mamicode.com/js/jquery.min.js"></script> 13 <script type="text/javascript" src="http://www.mamicode.com/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>
演示效果如下所示：
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="http://www.mamicode.com/themes/default/easyui.css"> 9 <link rel="stylesheet" type="text/css" href="http://www.mamicode.com/themes/icon.css"> 10 11 <!-- 引入js文件，限制顺序 -->12 <script type="text/javascript" src="http://www.mamicode.com/js/jquery.min.js"></script> 13 <script type="text/javascript" src="http://www.mamicode.com/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>
不规则布局的演示图：
jQuery EasyUI一个基于 jQuery 的框架(创建网页所需的一切)
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。