Tabs of EasyUi

Tabs control

What is Tabs

Tabs are one of the most popular navigation modes (like menu bar and vertical navigation). The biggest advantage of tabs is that users are familiar with, and often persistent, content, so even if users jump out of the site or application just browsing content, they will not lose.

Official example

Finished product example

Tabs use cases

  1. Create tabs from labels

Tags make it easier to create tabs, and we don't need to write any Javascript code. Just give

Tag to add a class ID 'easyUI tabs'. Each tab panel passes the
The label is created with the same usage as panel.


2. Create a tab through Javascript

The following code shows how to create a tab using Javascript. When the tab is selected, the 'onSelect' event will be triggered.


Add a new tab panel
Add a new tab panel containing the gadget menu, and the gadget menu icon (8x8) is placed before the close button.



Get selected tabs

Properties of Tabs

Events for Tabs

Tabs method

Tabs panel

Create a tab

I learned tree structure yesterday. Today I learn how to create a tab

What we want to achieve
1. First of all, we need a fixed homepage
2. Next, when we click add, a new tab will appear
3. When you reopen the UN launched tab, you need to switch to the UN launched tab page
4. When clicking the book management page and the order management page, the page will not pop up because it is the management layer rather than the display layer
5. When we click the new page again, we won't need to pop up another page. There can only be one new page. Other pages are the same






Now that we've got ideas, we're going to be the first to do it

First of all, our first fixed homepage should be to show all the properties on the center, and then set a div in the center to write the properties

			<div data-options="region:'center',title:'Center'">
			<div id="bookTabs" class="easyui-tabs" style="width:100%;height:100%;">   
    			<div title="home page" style="padding:20px;display:none;">   
      				  //Come on show it   
   				</div>  
			</div>  
		</div>


And then when we click add, there will be a new tab

Let's find and create a new tab in the document. C index.js Go inside

Where booktabs is the ID we gave earlier title:node.text node The node text is the text content we want to display, which is the real content

Next, the database finds the path corresponding to the url, creates two jsp files, and writes only two convenient tests

New interface has not been put on the shelf





No problem with the test. No jsp page has been written



Next are our last two
When clicking the book management page and order management page, the page will not pop up because it is the management layer rather than the display layer
When we click the new page again, we won't need to pop up another page. There can only be one new page. The same is true for other pages

Let's write if to judge whether it is saved or not, switch tabs if it is not, create a new tab and find the nested path
In else, judge again. If it is not empty, create a new tab

$(function(){
	var ctx = $("#ctx").val();
	
	$('#tt').tree({
	    url: ctx + '/permission.action?methodName=menuTree',
	    	onClick: function(node){
	    		//alert( node.text ); / / prompt when the user clicks
//	    		debugger
//	    		At present, there is a static tab of the homepage in jsp. When the browser requests jsp, the following code will be called, causing the page to see two tab pages
//	    		Our requirement is browser request index.jsp  See a tab on the home page. When you click an element of a tree menu, add a new tab
//	    		For the problem of saving again and again, the repeated tab page is repeatedly opened
//	    		Analyze the above saving and re storing problems, and determine whether to save and re store the corresponding title tab
//	    		If it is saved again, switch to the corresponding tab. If it is not saved again, open a tab again
//	    		<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{
//	    			New tab
//	    			There are many problems. Non leaf nodes can't open pages according to the development angle
//	    			Analysis: none of the non leaf nodes jump to the page
	    			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');    
			    		        }    
			    		    }]    
			    		}); 
	    			 }
	    			
	    		}
	    		}	
	    });

test
No response from book management


Only once


Right click to close tabs

We usually open tabs on the page. It's troublesome to open one more point. You can make a right-click menu to close tabs
I learned from others' codes and ideas

Original address: easyUI tab - right click to close tabs

Let's do it again index.jsp Write the HTMl content that pops up in the right-click event

The right mouse button event is implemented by binding context menu in EasyUI, which can display the position of the right mouse button option.

When the tabs are closed, they are closed through the index number of the tabs


The tabs header can only be effective if you right-click the page header area
recmenu is the id from above

		$(".tabs-header").bind('contextmenu',function(e){           
    		e.preventDefault();    
   			$('#rcmenu').menu('show', {    
          		left: e.pageX,    
          		top: e.pageY    
      		});    
    	});    
		//Close all tabs    
		$("#closeall").bind("click",function(){
			var tablist = $('#bookTabs').tabs('tabs');
			for(var i=tablist.length-1;i>0;i--){
				$('#bookTabs').tabs('close',i);
			}
		});
		//Close current tab
		$("#closecur").bind("click",function(){
			var tab = $('#bookTabs').tabs('getSelected');
			var index = $('#bookTabs').tabs('getTabIndex',tab);
			$('#bookTabs').tabs('close',index);
		});
		
	  //Close other pages (first right, then left)    
	  $("#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);    
	      }    
	  });    
	  //Close the tab on the right  
	  $("#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);    
	      }    
	  });    
	  //Close the tab on the right  
	  $("#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);    
	      }     
	  });    

Test:
Close all


Close the current page

success







Close all but the current page

success

Currently selected as center right all closed


success


Center selected left all closed


success

Today's sharing is here. My favorite friend would like to have a good time~~~~~

Tags: JSP Javascript Database

Posted on Fri, 26 Jun 2020 04:22:00 -0400 by nikkio3000