Send a jquery tab plug-in that adds a right-click menu

Previous

First, I declare that this jquery plug-in is not written by me. I just changed some of the code. I would like to thank the original author.

Secondly, I would like to promote his work for the author. This is a tab plug-in for extjs. Although it is not an advanced plug-in, I personally feel that it is good to use it.

For the author's original post, see here:

Http://www.iteye.com/topic/421360

Someone in the reply questioned why the author had to repeat the wheel, and the wheel was not as good as an artificial circle. I think although extjs or other jquery plug-ins have implemented this kind of thing, there are many, but I can't write another one myself. Why? The author has learned something to satisfy his sense of accomplishment and provided another choice for everyone. Isn't that good?

If you need the plug-in, please go to the author's original post to find it. Here, you only need to add the right-click menu modification points.

The modified plug-in code can be downloaded here: http://download.csdn.net/detail/zhangyihui1986/5187048

Reason for Modification

The label of the original tabpanel (jquery tab page plug-in) does not have a right-click menu. In fact, it is the default in the browser and it feels strange, because the tab page components in extjs and other sets of jquery UI components have right-click menus, and the menu items include "close/close all/Close other/refresh" functions, so I thought I could not extend it myself, and add the right-click menu to improve the user experience.

I spent more than half a day studying the source code (too level) and thought it was not very difficult, so I added the menu, as shown below:

The menu style is like ligerui. Thanks to the author of ligerui. Ligerui is actually a very good jquery UI component with complete components, but many bugs and incomplete documents. The author hasn't updated it for a long time. After using it twice, I dare not use it again.

Modification point

The menu UI is completely generated by JS Code and dynamically added to remove CSS styles.

1. CSS Modification

First, add the following style to the original tabpanel.css (the style is mainly from ligerui)

.l-menu {border: 1px solid #979797;background: #F5F5F5;position: absolute;overflow: hidden;padding-bottom: 2px;z-index: 1001;}.l-menu-yline {background: url('../image/TabPanel/menu-line-y.gif') repeat-y;width: 2px;height: 2000px;position: absolute;left: 28px;top: 1px;z-index: 101;}.l-menu-over {position: absolute;top: -24px;left: 2px;z-index: 102;height: 22px;overflow: hidden;background: url('../image/TabPanel/menu-item-over-m.gif') repeat-x;width: 97%;}.l-menu-over-l {background: url('../image/TabPanel/menu-item-over-l.gif') no-repeat;width: 28px;height: 22px;position: absolute;top: 0;left: 0;}.l-menu-over-r {background: url('../image/TabPanel/menu-item-over-r.gif') no-repeat;width: 3px;height: 22px;position: absolute;top: 0;right: 0;}.l-menu-inner {position: relative;width: 100%;z-index: 103;}.l-menu-item {position: relative;height: 23px;line-height: 23px;width: 100%;cursor: pointer;}.l-menu-item-text {color: #000000;left: 33px;position: absolute;top: 0;}.l-menu-item-icon {left: 3px;top: 0;position: absolute;width: 25px;height: 22px;overflow: hidden;}.l-icon-reload {background: url('../image/TabPanel/refresh.png') no-repeat center;}.l-icon-close {background: url('../image/TabPanel/close.png') no-repeat center;}.l-menu-item-disable {cursor: default;}.l-menu-item-disable .l-menu-item-text {color: #A1A1A1;}

2. Modify tabpanel. js

Then, modify the plug-in source code.

2.1 initialization call

First, call the createmenu method you wrote in The tabpanel initialization method to create the pop-up menu. Then, bind the document object with the mouse and click the event. In the event response function, hide the pop-up menu, that is to say, if the previous menu is displayed, the menu is hidden when you click the left mouse button on the current page.

this.menu = this.createMenu();$(document).bind('click', function() {if (!tabEntity.menu)return;tabEntity.menu.hide();});

2.2 create a menu

Then define the createmenu method for generating the pop-up menu.

Create a menu item bearing layer Div, add four menu items cyclically, and bind the corresponding response function. You can see in the menu item configuration, when you click a menu item, the _ menuitemclick method is called and the menu item configuration is passed in as a parameter. Finally, the pop-up menu is appended to the body. Because the bearer layer is defined with CSS code: Display: none, the Start menu is not displayed.

Createmenu: function () {var tabentity = This, menu = $ ('<Div class = "L-menu" style = "display: none "> <Div class =" L-menu-yline "> </div> <Div class =" L-menu-over "> <Div class =" L-menu- over-L "> </div> <Div class =" L-menu-over-R "> </div> <Div class =" L-menu- inner "> </div> '); menu. items = $ (">. l-menu-inner: first ", menu); var allitems = [{text: 'close', ID: 'close', icon: 'close', click: function () {tabentity. _ menuitemclick. apply (tabentity, arguments) ;},{ text: 'close others', ID: 'closeother', click: function () {tabentity. _ menuitemclick. apply (tabentity, arguments) ;},{ text: 'close all', ID: 'closeall', click: function () {tabentity. _ menuitemclick. apply (tabentity, arguments) ;},{ text: 'refresh ', ID: 'reload', icon: 'reload', click: function () {tabentity. _ menuitemclick. apply (tabentity, arguments) ;}}]; for (VAR I = 0; I <allitems. length; I ++) {var item = allitems [I], ditem = $ ('<Div class = "L-menu-item"> <Div class = "L-menu-item-text"> </div>' ); ditem. ATTR ("menuitemid", item. ID); $ (">. l-menu-item-text: first ", ditem).html (item. text); item. icon & ditem. prepend ('<Div class = "L-menu-item-icon l-icon-' + item. icon + '"> </div>'); ditem. click (function (I) {return function () {if ($ (this ). hasclass ("L-menu-item-Disable") return; item. click (I) ;}} (item); var menuover =over (">. l-menu-over: first ", menu); ditem. hover (function () {if ($ (this ). hasclass ("L-menu-item-Disable") return; var itemtop = $ (this ). offset (). top; var Top = itemtop-menu.offset().top?menuover.css ({top: Top}) ;}, null); menu. items. append (ditem);} menu. hover (null, function () {$ (">. l-menu-over: first ", menu).css ({top:-24}) ;}); return menu.css ({width: '100px '}). appendto ('body ');}

2.3 display menu

The third step is to bind the right-click event response function. This part of Code adds the tab method (addtab method), and the right-click event is bound to the tab, which is a li element, click the tab to switch the page display. Right-click the pop-up menu.

// Bind the right-click event tab. BIND ('textmenu ', function (e) {If (tabentity. menu) {tabentity. actiontabid = tabitem.id=tabentity.menu.css ({top: E. pagey, left: E. pagex }). show (); If (! Tabentity. tabs [tabentity. gettabposision (tabentity. actiontabid)]. closable) {$ (">. l-menu-item [menuitemid = 'close'] ", tabentity. menu. items ). addclass ("L-menu-item-Disable");} else {var closeitem = $ (">. l-menu-item [menuitemid = 'close'] ", tabentity. menu. items); If (closeitem. hasclass ("L-menu-item-Disable") closeitem. removeclass ("L-menu-item-Disable") ;}} return false ;});

The code above shows that the menu is displayed at the place where the mouse is clicked, and the default shortcut menu is blocked. If the tab tag generated by the Right-click event cannot be closed, that is, when you add this tab, set closable to false, set the "close" menu item to disabled, and vice versa.

2.4. menu item callback

Finally, it defines the response function when the user clicks the menu item in the pop-up menu. It only executes the corresponding logic (or closes the tag or refreshes the page) according to the menu ).

The Code is as follows:

// Click the menu item _ menuitemclick: function (menuitem) {var tabentity = This; Switch (menuitem. ID) {Case 'close': This. kill (this. actiontabid); this. actiontabid = NULL; break; Case 'closeother': $ (this. tabs ). each (function () {If (tabentity. actiontabid! = This. ID) {tabentity. kill (this. ID) ;}}); break; Case 'closeall': $ (this. tabs ). each (function () {tabentity. kill (this. ID) ;}); break; Case 'reload': This. flush (this. actiontabid); break; default: break ;}}

So far, the entire modification is actually very simple.