Right-click the tab of easyui

I recently studied menubutton and got a new idea. I used to right-click the support method in that demo. Now it seems like a pediatrics!

Preparations:

1. Download the demo source code and upgrade it to the latest version (jquery 1.7.2, easyui 1.2.6). You can directly replace it. To upgrade easyui, replace all css js theme.

2. html on the homepageCodeMedium: Set

 1   <  Div  ID  = "Mm"  Class  = "Easyui-menu"  Style  = "Width: 150px ;" >  2           <  Div  ID  = "Mm-tabupdate"  > Refresh </  Div  >  3           <  Div  Class  = "Menu-Sep"  > </  Div >  4           <  Div  ID  = "Mm-tabclose"  > Close </  Div  >  5           <  Div  ID  = "Mm-tabcloseall"  > Close all </ Div  >  6           <  Div  ID  = "Mm-tabcloseother"  > Disable all of these </  Div  >  7           <  Div  Class  = "Menu-Sep"  > </ Div  >  8           <  Div  ID  = "Mm-tabcloseright"  > Close all on the right of the current page </  Div  >  9           <  Div  ID  = "Mm-tabcloseleft"  > Close all on the left of the current page </  Div  >  10           <  Div  Class  = "Menu-Sep"  > </  Div  >  11           <  Div  ID  = "Mm-Exit"  > Exit</  Div  >  12   </  Div  > 

Changed:

 1   <  Div  ID  = "Mm"  Class  = "Easyui-menu"  Style  = "Width: 150px ;"  > 2           <  Div  ID  = "Refresh"  > Refresh </  Div  >  3           <  Div  Class  = "Menu-Sep"  > </  Div  > 4           <  Div  ID  = "Close"  > Close </  Div  >  5           <  Div  ID  = "Closeall"  > Close all </  Div >  6           <  Div  ID  = "Closeother"  > Disable all of these </  Div  >  7           <  Div  Class  = "Menu-Sep"  > </  Div >  8           <  Div  ID  = "Closeright"  > Close all on the right of the current page </  Div  >  9           <  Div  ID  = "Closeleft"  > Close all on the left of the current page </ Div  >  10           <  Div  Class  = "Menu-Sep"  > </  Div  >  11           <  Div  ID  = "Exit"  > Exit </ Div  >  12   </  Div  > 

 

Add a new method to outlook2.js as follows:

 

 Function  Closetab (Action ){  VaR Alltabs = $ ('# tabs'). tabs ('tabs' );  VaR Currenttab = $ ('# tabs'). tabs ('getselected' );  VaR Alltabtitle = []; $. Each (alltabs,  Function  (I, n) {alltabtitle. Push ($ (N). Panel ( 'Options' ). Title );})  Switch  (Action ){  Case "Refresh" :  VaR IFRAME = $ (currenttab. Panel ('options' ). Content );  VaR Src = IFRAME. ATTR ('src' ); $ ( '# Tabs'). tabs ('update', {Tab: currenttab, options: {content: createframe (SRC )}})  Break  ;  Case "Close" :  VaR Currtab_title = currenttab. Panel ('options' ). Title; $ ( '# Tabs'). tabs ('close' , Currtab_title );  Break  ;  Case "Closeall": $. Each (alltabtitle,  Function  (I, n ){  If (N! = Onlyopentitle) {$ ( '# Tabs'). tabs ('close' , N );}});  Break  ;  Case "Closeother" :  VaR Currtab_title = currenttab. Panel ('options' ). Title; $. Each (alltabtitle, Function  (I, n ){  If (N! = Currtab_title & n! = Onlyopentitle) {$ ( '# Tabs'). tabs ('close' , N );}});  Break  ;  Case "Closeright" :  VaR Tabindex = $ ('# tabs'). tabs ('gettabindex' , Currenttab );  If (Tabindex = alltabs. Length-1 ) {Alert ( 'Dear, no more. ^ @ ^ !! ' );  Return   False  ;} $. Each (alltabtitle,  Function  (I, n ){  If (I> Tabindex ){  If (N! = Onlyopentitle) {$ ( '# Tabs'). tabs ('close', N );}}});  Break  ;  Case "Closeleft" :  VaR Tabindex = $ ('# tabs'). tabs ('gettabindex' , Currenttab );  If (Tabindex = 1 ) {Alert ( 'Hey, there's someone on the front. We can't afford it. ^ @ ^ !! ' );  Return   False ;} $. Each (alltabtitle,  Function  (I, n ){  If (I < Tabindex ){  If (N! = Onlyopentitle) {$ ( '# Tabs'). tabs ('close' , N );}}});  Break  ;  Case "Exit" : $ ( '# Closemenu'). menu ('hide' );  Break  ;}} 

 

 

 

Change the tabcloseeven method in JS

 
FunctionTabcloseeven () {$ ('# Mm'). Menu ({onclick:Function(Item) {closetab (item. ID );}});Return False;}
 

 

This is OK, and the code is much more elegant than the original one!

Call refresh. When the current tag is closed, closetab ('action') is called. // the action can be refresh or close)

Top. closetab ('action ');

 

Network Disk: Click here to download the latest easyui application instance.

 

If you think this article is helpful to you, please recommend it.