EasyUi之Tabs(选项卡)

什么是Tabs

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

官方示例

成品示例

Tabs的使用案例

1. 通过标签创建选项卡

通过标签可以更容易的创建选项卡，我们不需要写任何Javascript代码。只需要给

标签添加一个类ID’easyui-tabs’。每个选项卡面板都通过子

标签进行创建，用法和panel(面板)相同。

2. 通过Javascript创建选项卡

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

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

获取选择的选项卡

 

Tabs的属性

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
我借鉴了下别人的代码和思路

原帖地址:easyUI选项卡—右键关闭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);    
	      }     
	  });    

 

测试:
关闭全部

之关闭当前页面

成功

除了当前页面其他全部关闭

 

成功

已当前选中为中心 右侧全部关闭

成功

已选中点为中心左侧全部关闭

成功