EasyUi之Tabs(選項卡)

yinghualeihenmei發表於2024-03-25

原文連結：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);    
	      }     
	  });

　　測試:
關閉全部