EasyUi之Tabs(选项卡)

标签：index 选项卡 EasyUi bookTabs Tabs tabs var 页面

原文链接：https://blog.csdn.net/qianbihua00/article/details/115392143

什么是Tabs

选项卡是最流行的导航模式之一(与菜单栏和垂直导航一样)。选项卡最大的优点是用户很熟悉，而且经常是持久的内容，所以即使用户在网站或应用程序中跳出刚浏览过的内容，他们也不会迷失。

官方示例

成品示例

Tabs的使用案例

1、通过标签创建选项卡

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

2. 通过Javascript创建选项卡

下面的代码演示如何使用Javascript创建选项卡，当该选项卡被选择时将会触发’onSelect’事件。

添加新的选项卡面板
添加一个新的包含小工具菜单的选项卡面板，小工具菜单图标(8x8)被放置在关闭按钮之前。

获取选择的选项卡

Tabs的事件

Tabs的方法

Tabs面板

创建一个选项卡
昨天学习了树（tree）形结构今天来学习如何创建一个选项卡

我们要实现的功能
1.首先我们需要一个首页面固定不动
2.其次当我们去点击新增的时候要出现新增的选项卡
3.再打开未上架时要切换到未上架的tab页面
4.点击书籍管理页面还有订单管理页面时不会弹出页面应为他是管理层而不是显示层
5.当我们再次点击新增页面时不会要再次弹出一个页面只能有一个新增页面其他页面同理

有了思路之后我们开始第一个一个去实现

首先时我们的第一个固定的首页面应为是展现再center上面所有再center里面套一个div 写上属性就好

			<div data-options="region:'center',title:'Center'">
			<div id="bookTabs" class="easyui-tabs" style="width:100%;height:100%;">   
    			<div title="首页" style="padding:20px;display:none;">   
      				  来吧展示   
   				</div>  
			</div>  
		</div>

然后是是当我们去点击新增的时候要出现新增的选项卡

我们再文档里面找到创建新的选项卡C到我们前面写好的index.js里面去

其中booktabs是我们前面给的id title:node.text node是节点 text是我们要显示出来的文本content是现实的内容

接下来的数据库找到url对应的路径新建两个jsp文件这里只写两个方便测试就行

新增界面还有未上架界面

测试没问题已下架没有写jsp页面

接下来是我们最后两个
点击书籍管理页面还有订单管理页面时不会弹出页面应为他是管理层而不是显示层
当我们再次点击新增页面时不会要再次弹出一个页面只能有一个新增页面其他页面同理

我们先写if判断是否存再如果存在就切换选项卡如果不存在就新建一个选项卡然后找到嵌套的路径
再在else里面再判断如果不为空再新建一个tabs

$(function(){
	var ctx = $("#ctx").val();
	
	$('#tt').tree({
	    url: ctx + '/permission.action?methodName=menuTree',
	    	onClick: function(node){
	    		//alert(node.text);  // 在用户点击的时候提示
//	    		debugger
//	    		目前，jsp中有一个静态的首页的选项卡tab，当浏览器请求jsp的时候，会调用下列代码，造成页面看到两个tab页
//	    		我们的需求是 浏览器请求index.jsp 看到首页一个选项卡，当点击某一个树形菜单的一个元素，新增一个选项卡
//	    		目前存再的问题，重复的tab页反复打开
//	    		针对于上面存再的问题进行分析，判断当前是否存再对应的title的选项卡
//	    		如果存再，就切换到对应的选项卡，如果不存再，那么重新答案开一个选项卡
//	    		<iframe scrolling="no" frameborder="0" src="" width="99%" height="99%"></iframe>
//	    		$('boolTabs').tabs('exists',node.text);
	    		if($('#bookTabs').tabs('exists',node.text)){
	    			$('#bookTabs').tabs('select',node.text);
	    		}else{
//	    			新增选项卡
//	    			存再问题 ，非叶子节点按照开发角度来说数不能打开页面的
//	    			分析：非叶子节点都没有跳转页面的
	    			var src= node.attributes.self.url;
	    			if(src){
	    				var content = '<iframe scrolling="no" frameborder="0" src="'+ctx+src+'" width="99%" height="99%"></iframe>';
			    		$('#bookTabs').tabs('add',{    
			    		    title:node.text,    
			    		    content:content,    
			    		    closable:true,    
			    		    tools:[{    
			    		        iconCls:'icon-mini-refresh',    
			    		        handler:function(){    
			    		            alert('refresh');    
			    		        }    
			    		    }]    
			    		}); 
	    			 }
	    			
	    		}
	    		}	
	    });

　　测试
书籍管理没反应

只能点一次

右键关闭tabs

我们一般在页面上开tabs开多了一个一个点很麻烦所有可以搞个右键菜单关闭tabs
我借鉴了下别人的代码和思路

我们还是再index.jsp写上右击事件中弹出的HTMl内容

鼠标的右键事件是在EasyUI中通过绑定contextmenu来实现，可以显示右键的选项显示的位置。

其中tabs的关闭时通过操作tabs的索引号进行各种关闭的

tabs-header是再页面头部区域点击右键才有效果
recmenu是上面去的id

		$(".tabs-header").bind('contextmenu',function(e){           
    		e.preventDefault();    
   			$('#rcmenu').menu('show', {    
          		left: e.pageX,    
          		top: e.pageY    
      		});    
    	});    
		//关闭所有标签页    
		$("#closeall").bind("click",function(){
			var tablist = $('#bookTabs').tabs('tabs');
			for(var i=tablist.length-1;i>0;i--){
				$('#bookTabs').tabs('close',i);
			}
		});
		//关闭当前标签页
		$("#closecur").bind("click",function(){
			var tab = $('#bookTabs').tabs('getSelected');
			var index = $('#bookTabs').tabs('getTabIndex',tab);
			$('#bookTabs').tabs('close',index);
		});
		
	  //关闭其他页面（先关闭右侧，再关闭左侧）    
	  $("#closeother").bind("click",function(){    
	      var tablist = $('#bookTabs').tabs('tabs');    
	      var tab = $('#bookTabs').tabs('getSelected');    
	      var index = $('#bookTabs').tabs('getTabIndex',tab);    
	      for(var i=tablist.length-1;i>index;i--){    
	          $('#bookTabs').tabs('close',i);    
	      }    
	      var num = index-1;    
	      if(num < 1){    
	          return;    
	      }else{    
	          for(var i=num;i>=1;i--){    
	              $('#bookTabs').tabs('close',i);    
	          }    
	          $("#bookTabs").tabs("select", 1);    
	      }    
	  });    
	  //关闭右边的选项卡  
	  $("#closeright").bind("click",function(){    
	      var tablist = $('#bookTabs').tabs('tabs');    
	      var tab = $('#bookTabs').tabs('getSelected');    
	      var index = $('#bookTabs').tabs('getTabIndex',tab);    
	      for(var i=tablist.length-1;i>index;i--){    
	          $('#bookTabs').tabs('close',i);    
	      }    
	  });    
	  //关闭右边的选项卡  
	  $("#closeleft").bind("click",function(){    
	      var tablist = $('#bookTabs').tabs('tabs');    
	      var tab = $('#bookTabs').tabs('getSelected');    
	      var index = $('#bookTabs').tabs('getTabIndex',tab);    
	      var num = index-1;    
	      if(num < 1){    
	          return;    
	      }else{    
	          for(var i=num;i>=1;i--){    
	              $('#bookTabs').tabs('close',i);    
	          }    
	          $("#bookTabs").tabs("select", 1);    
	      }     
	  });

　　测试:
关闭全部