JQuery Easyui Implement right-click menu dimmed not available effect _jquery

Source: Internet
Author: User

First, it is not available to implement the "All except all off" dimmed.

When you open only one tab tab, the "All except all" on the right menu should be dimmed and unavailable, which prompts the user not to have another tab in addition to this tab. The program implementation is very simple, as long as you get the number of open tab tab, if the number is 1, then the "all except all" turn gray is not available on the line.

var Tabcount = $ (' #tabs '). Tabs (' tabs '). length; Number of tab Tabs 
  if (tabcount <= 1) { 
    $ (' #mm-tabcloseother '). attr ("Disabled", "disabled"). CSS ({"Cursor": " Default "," Opacity ":" 0.4 "}); 
  else { 
    $ (' #mm-tabcloseother '). Removeattr ("Disabled"). CSS ({"cursor": "Pointer", "opacity": "1"}); 
   

Description: In the Firfox,google,opera browser, the "disabled" properties do not work, so I added a CSS style, set its transparency to make it dimmed.

Effect Chart:

Figure I: Apart from all other closures

Second, to implement "All off the right side of the current page" dimmed is not available.

When there is no tab on the right side of a tab tab, the Tab tab should be dimmed and unavailable. Program implementation is not difficult, as long as the title of the Last tab tab is compared with the title of the Tab tab of the current right-click menu, and if it is consistent, turn off all the "right side of the current page" to be dimmed.

var tabs = $ (' #tabs '). Tabs (' tabs ');   Get all tab tabs 
var tabcount = tabs.length The number of//tab tabs 
var lasttab = tabs[tabcount-1];//Get the last tab tab 
var LA Sttitle = Lasttab.panel (' Options '). Tab.text (); Title 
var currtab_title = $ (' #mm ') of the Last tab tab. Data ("Currtab");//title 
 
   if (Lasttitle = = Currtab_ of the current tab tab Title) { 
     $ (' #mm-tabcloseright '). attr ("Disabled", "disabled"). CSS ({"cursor": "Default", "Opacity": "0.4"}); 
   else { 
     $ (' #mm-tabcloseright '). Removeattr ("Disabled"). CSS ({"cursor": "Pointer", "opacity": "1"}); 
    

Effect Chart:

Figure II: The right side of the current page is all closed

Third, the implementation of the "all off the left of the current page" dimmed is not available.

This is the opposite of the second one, get the title of the First tab tab and the title of the current tab tab to compare.

var onetab = tabs[0]; First Tab tab 
var onetitle = onetab.panel (' Options '). Tab.text ();//The title 
   if (Onetitle = = Currtab_ of the first tab tab Title) { 
     $ (' #mm-tabcloseleft '). attr ("Disabled", "disabled"). CSS ({"cursor": "Default", "Opacity": "0.4"}); 
   else { 
     $ (' #mm-tabcloseleft '). Removeattr ("Disabled"). CSS ({"cursor": "Pointer", "opacity": "1"}); 
    

Finally, the effect of the implementation of the following figure

Figure three: All off the left of the current page

The above implementation of the three kinds of cases of the effect of gray not available, when the mouse to click on the above, the right menu will disappear, in fact, the solution is very simple, I hope this article can bring inspiration to everyone.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.