In the article using Easyui to make a left and right layout, we've built a simple on-left layout using Easyui. In the process of using, we often encounter tab open too much, but only one of the close annoyance, this time have not thought of eclipse in the tab right menu to close all other and close all options?
Below we will use Easyui to implement the tab page close all other and close all functions.
1. Add the structure of the menu to the HTML structure of the previous article
<Body><DivID= "Home-layout"> <!--the previous Code -</Div><!--the right-click menu for the tab page -<DivID= "Home-tabs-menu"class= "Easyui-menu"> <Divdata-options= "Name:1">Shut down</Div> <Divdata-options= "Name:2">Close other</Div> <Divdata-options= "Name:3">Close all</Div></Div></Body>
2. Add a right mouse button event for the tab component
<script>/** Initialize the tabs of the content area*/ $("#home-tabs"). Tabs ({fit:true, border:false, //to attach the right mouse button eventOnContextMenu:function(E, title, index) {
This method notifies the browser not to perform the default action associated with this event
That is, the browser on the tab page of the right mouse button event e.preventdefault (); varMM = $ ("#home-tabs-menu"); //Show Right-click menuMm.menu ("Show", {top:e.pagey, Left:e.pagex}). Data ("Tabtitle", title); //binding Events for right-click menu optionsMm.menu ({onClick:function(item) {Closetab ( This, Item.name); } }); } });</script>
3.closeTab method
<script>/** Close Tab*/functionClosetab (menu, type) {varAlltabs = $ ("#home-tabs"). Tabs ("tabs"); varAlltabtitle = []; $.each (Alltabs,function(i, n) {varopt = $ (n). Panel ("Options"); if(opt.closable) {Alltabtitle.push (opt.title); } }); varCurtabtitle = $ (menu). Data ("Tabtitle")); Switch(type) { Case1: //Close the current$ ("#home-tabs"). Tabs ("Close", Curtabtitle); return false; Break; Case2: //Close Other for(vari = 0; i < alltabtitle.length; i++){ if(Curtabtitle! =Alltabtitle[i]) { $("#home-tabs"). Tabs ("Close", Alltabtitle[i]); } } $("#home-tabs"). Tabs ("select"), Curtabtitle); Break; Case3: //Close all for(vari = 0; i < alltabtitle.length; i++){ $("#home-tabs"). Tabs ("Close", Alltabtitle[i]); } Break; }}</script>
This completes the tab page of the right-click menu, is it convenient to use it? Of course, we can continue to add more features to it on this basis!
Add a right-click menu to the tab page using Easyui
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
