【EasyUI学习-3】Easyui tabs入门实践

作者:ssslinppp      


1. 摘要




一般我们在设计程序主框架的时候,当点击(子)菜单时,希望相应界面都在tabs页中显示;

在显示的时候,如果之前打开过该界面,则希望重新选中对应的tab页,并刷新;

如果之前没有打开对应的tab页,则创建一个新的tab页;

如下图所示:

2. jsp界面



  1. <!-- 主操作区 -->
  2. <div region="center" style="background:#eee; overflow-y:hidden" >
  3. <div id="centerTabs" class="easyui-tabs" fit="true" border="false" >
  4. </div>
  5. </div>
  6. <!--===================================其他信息===================================-->
  7. <!--tabs页右键选项 -->
  8. <div id="mm" class="easyui-menu" style="width:150px;z-index:90000000">
  9. <div id="mm-tabupdate">刷新</div>
  10. <div class="menu-sep"></div>
  11. <div id="mm-tabclose">关闭</div>
  12. <div id="mm-tabcloseall">全部关闭</div>
  13. <div id="mm-tabcloseother">除此之外全部关闭</div>
  14. <div class="menu-sep"></div>
  15. <div id="mm-tabcloseright">当前页右侧全部关闭</div>
  16. <div id="mm-tabcloseleft">当前页左侧全部关闭</div>
  17. </div>

3. 二级菜单


二级菜单:

  1. var actionUrl = basePath + "getMainMenu.action";
  2. var params = {
  3. };
  4. //菜单请求
  5. $.ajax({
  6. type : "POST",
  7. url : actionUrl,
  8. data : params,
  9. dataType : "json",
  10. async : false,
  11. cache : false,
  12. error : function(textStatus, errorThrown) {
  13. $.messager.alert(‘错误‘, "系统菜单加载失败: " + textStatus, ‘error‘);
  14. },
  15. success : function(data, textStatus) {
  16. var menuList1 = "";
  17. $.each(data.menuList, function(i, o) {
  18. if(o.select){
  19. var mid = "#m"+i;//一级菜单mid
  20. var mmmid = "m"+i;
  21. menuList1 += ‘<a href="javascript:void(0)" class="easyui-menubutton" menu="‘+mid+‘" iconCls="‘+o.iconName+‘" style="width:130px;">‘+o.menuName+‘</a>‘;
  22. menuList1 += ‘<div id="‘+mmmid+‘" style="width:130px;">‘;
  23. $.each(o.childMenus, function(j, p) {
  24. if(p.select){
  25. var secondMenuId = ""+i+j;
  26. menuList1 += ‘<div id="‘+secondMenuId+‘" iconCls="‘+p.iconName+‘" url="‘+p.urlPath+‘" class="secondMenu">‘+p.menuName+‘</div>‘;
  27. }
  28. });
  29. menuList1 += ‘</div>‘
  30. }
  31. })
  32. $(".menu1").append(menuList1);
  33. }
  34. });

2级菜单是通过拼接HTML语言完成的,拼接后的代码形如:

  1. <a href="javascript:void(0)" class="easyui-menubutton" menu="#m0" iconCls="icon-ok" style="width:130px;">一级菜单1</a>
  2. <div id="m0" style="width:130px;">
  3. </div>
  4. <a href="javascript:void(0)" class="easyui-menubutton" menu="#m1" iconCls="icon-ok" style="width:130px;">一级菜单2</a>
  5. <div id="m1" style="width:130px;">
  6. <div id="10" iconCls="icon-ok" url="null" class="secondMenu">二级菜单21</div>
  7. <div id="11" iconCls="icon-ok" url="null" class="secondMenu">二级菜单22</div>
  8. <div id="12" iconCls="icon-ok" url="null" class="secondMenu">二级菜单23</div>
  9. <div id="13" iconCls="icon-ok" url="null" class="secondMenu">二级菜单24</div>
  10. </div>


4. tabs


  1. /*选择2级菜单功能项后在center区域 添加tabs*/
  2. $(".secondMenu").click(function(){
  3. var name = $(this).text();
  4. if($("#centerTabs").tabs(‘exists‘, name)){ //选中并更新
  5. $(‘#centerTabs‘).tabs(‘select‘, name);
  6. $(‘#mm-tabupdate‘).click();
  7. }
  8. else{
  9. var url = basePath+$(this).attr("url"); //要加载界面的URL--action请求
  10. var icons = $(this).attr("iconCls");
  11. $(‘#centerTabs‘).tabs(‘add‘,{
  12. title:name,
  13. url: url,
  14. icon:icons,
  15. content:‘<iframe scrolling="auto" frameborder="0" id="‘+name+‘" name="‘+name+‘" src="‘+url+‘" style="width:100%;height:100%"></iframe>‘,
  16. closable:true});
  17. };
  18. });



  1. //绑定右键菜单事件
  2. function tabCloseEven(){
  3. //刷新
  4. $(‘#mm-tabupdate‘).click(function(){
  5. var currTab = $(‘#centerTabs‘).tabs(‘getSelected‘);
  6. var content = $(currTab.panel(‘options‘).content);
  7. $(‘#centerTabs‘).tabs(‘update‘,{
  8. tab:currTab,
  9. options:{
  10. content:content
  11. }
  12. })
  13. });
  14. };

代做毕设:

淘宝链接: http://shop110473970.taobao.com/shop/view_shop.htm?spm=a1z0e.1.10010.3.2j85Z2


来自为知笔记(Wiz)

时间: 2024-10-02 19:21:18

【EasyUI学习-3】Easyui tabs入门实践的相关文章

easyUI 学习

)省份-城市-区域三级联动[struts2 + ajax +非数据库版] (1)省份-城市-区域,基于jQuery的AJAX三级联动,用Struts2整合AJAX[非数据库版] $.ajax( { type:"POST", url:"${pageContext.request.contextPath}/findCityByProvinceRequest?id="+new Date().getTime(), data:{"province":pro

EasyUI学习总结(三)——easyloader源码分析

EasyUI学习总结(三)--easyloader源码分析 easyloader模块是用来加载jquery easyui的js和css文件的,而且它可以分析模块的依赖关系,先加载依赖项.模块加载好了会调用parse模块来解析页面.把class是easyui开头的标签都转化成easyui的控件. 先看Demo1例子,再分析源代码. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>easyloader范例</tit

EasyUI学习总结(二)——easyloader分析与使用

EasyUI学习总结(二)--easyloader分析与使用 使用脚本库总要加载一大堆的样式表和脚本文件,在easyui 中,除了可以使用通常的方式加载之外,还提供了使用 easyloader 加载的方式.这个组件主要是为了按需加载组件而诞生.什么情况下使用它呢? 你觉得一次性导入 easyui 的核心 min js 和 css 太大 你只用到 easyui 的其中几个组件 你想使用其中的一个组件,但是你又不知道这个组件依赖了那些组件. 如果你有以上三中情况,那么推荐你使用easyLoader.

EasyUI学习总结(四)——parser源码分析

EasyUI学习总结(四)--parser源码分析 parser模块是easyloader第一个加载的模块,它的主要作用,就是扫描页面上easyui开头的class标签,然后初始化成easyui控件. 1 /** 2 * parser模块主要是解析页面中easyui的控件 3 */ 4 $.parser = { 5 // 是否自动解析 6 auto: true, 7 8 // 可以被解析的控件 9 plugins:['linkbutton','menu','menubutton','splitb

JQuery EasyUI学习框架

前言 前端技术,新项目的开发拟使用EasyUI框架(基于EasyUI丰富UI组件库),项目负责人的提示EasyUI分配给我这个任务.发展前,我需要这对于一个新手EasyUI框架学习一些基本的入门.记录在学习过程中的问题,在他们自己的问题和实事后. 关于EasyUI EasyUI框架式基于JQuery的,使用它帮助我们快捷的构建web网页. EasyUI框架是一个简单.易用.强大的轻量级web前端javascript框架.现阶段来说.在开发web项目时,前端的开发我们更喜欢使用JQuery取代原生

EasyUI学习总结(六)——EasyUI布局

EasyUI学习总结(六)--EasyUI布局 一.EasyUI布局介绍 easyUI布局容器包括东.西.南.北.中五个区域,其中中心面板是必须的,而东.西.南.北这四个面板是可选的,如果布局里面不需要东.西.南.北这四个面板,那么可以把相应的div删掉,另外,如果需要创建复杂的easyUI布局,那么可以通过嵌套东.西.南.北.中五个面板来实现.下面简单演示一下EasyUI布局. 1.1.通过div创建easyUI布局 easyUI的layout可以通过div来创建,使用div来创建easyUI

EasyUI学习总结(五)——EasyUI组件使用

EasyUI学习总结(五)--EasyUI组件使用 一.EasyUI组件的简单介绍 easyUI提供了很多组件让我们使用,如下图所示: 使用这些组件可以帮助我们快速地进行项目开发,下面以一个用户登录程序为例讲解EasyUI组件的使用 二.EasyUI组件的使用 2.1.创建测试的JavaWeb项目 2.2.编写测试代码 编写一个用户登录页面Login1.html,用于输入用户名和密码进行登录,使用JQuery的ajax方法异步提交表单 Login1.html的代码如下: 1 <!DOCTYPE

easyui学习笔记1—增删改操作【转载】

最近公司要用easyui,这里自己看了官网几篇文章,遇到些问题,大多数的问题都是敲代码的时候笔误,其他有些地方确实需要注意一下,这里做些笔记. 1.在mysql中建好表之后修改id字段为递增字段,发现这个奇怪的mysql语法,如下 alter table student change id id int auto_increment; 这句是在student表已经建好的情况下来修改字段id为自增列,奇怪的是为嘛change id id,并且后面还要带上id的类型int? 2.html5标记 如何

easyui学习笔记2—在行内进行表格的增删改操作【转载】

第一篇笔记中记录了如何实现表格的增删改,那个是点击之后跳出来一个对话框然后进行的,这里是在表格本身上进行的操作,也很简单,但是这里发现一个版本问题,也可以说是兼容性问题. 1.首先我们看引用的js和css代码 <link rel="stylesheet" href="jquery-easyui-1.3.5/themes/default/easyui.css" /> <link rel="stylesheet" href=&quo