欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery EasyUI實現(xiàn)右鍵菜單變灰不可用效果

 更新時間:2015年09月24日 16:43:45   作者:田念明  
用jQuery實現(xiàn)了三種情況下的變灰不可用的效果,當(dāng)鼠標(biāo)放到上面點擊,右鍵菜單就會消失,其實解決的辦法也很簡單,只要在對應(yīng)的單擊事件里重新綁定右鍵菜單即可,需要的朋友可以參考下

首先,實現(xiàn)“除此之外全部關(guān)閉”變灰不可用。

當(dāng)只打開一個Tab選項卡時,右鍵菜單里“除此之外全部關(guān)閉”就應(yīng)該變灰不可用,這樣可以提示用戶沒有除這一個選項卡沒有其他的選項卡了。程序?qū)崿F(xiàn)很簡單了,只要獲得打開Tab選項卡的個數(shù),如果個數(shù)為1,那么就把“除此之外全部關(guān)閉”變灰不可用就行了。

var tabcount = $('#tabs').tabs('tabs').length; //tab選項卡的個數(shù) 
  if (tabcount <= 1) { 
    $('#mm-tabcloseother').attr("disabled", "disabled").css({ "cursor": "default", "opacity": "0.4" }); 
  } 
  else { 
    $('#mm-tabcloseother').removeAttr("disabled").css({ "cursor": "pointer", "opacity": "1" }); 
  } 

說明:在Firfox,Google,Opera瀏覽器里,“disabled”的屬性不起作用,所以我加了一個CSS樣式,設(shè)置了一下它的透明度使它變灰。

效果圖:

圖一:除此之外全部關(guān)閉

第二,實現(xiàn)“當(dāng)前頁右側(cè)全部關(guān)閉”變灰不可用。

當(dāng)一個Tab選項卡的右側(cè)沒有選項卡的時候,這個Tab選項卡就應(yīng)該變灰不可用。程序?qū)崿F(xiàn)也不難,只要獲得最后一個Tab選項卡的標(biāo)題和當(dāng)前右鍵菜單所在的Tab選項卡的標(biāo)題進行比較,如果一致,就把“當(dāng)前頁右側(cè)全部關(guān)閉”變灰不可用。

var tabs = $('#tabs').tabs('tabs');   //獲得所有的Tab選項卡 
var tabcount = tabs.length; //Tab選項卡的個數(shù) 
var lasttab = tabs[tabcount - 1]; //獲得最后一個Tab選項卡 
var lasttitle = lasttab.panel('options').tab.text(); //最后一個Tab選項卡的Title 
var currtab_title = $('#mm').data("currtab"); //當(dāng)前Tab選項卡的Title 
 
   if (lasttitle == currtab_title) { 
     $('#mm-tabcloseright').attr("disabled", "disabled").css({ "cursor": "default", "opacity": "0.4" }); 
   } 
   else { 
     $('#mm-tabcloseright').removeAttr("disabled").css({ "cursor": "pointer", "opacity": "1" }); 
   } 

效果圖:

 圖二:當(dāng)前頁右側(cè)全部關(guān)閉

第三,實現(xiàn)“當(dāng)前頁左側(cè)全部關(guān)閉”變灰不可用。

這個跟第二個相反就行了,獲得第一個Tab選項卡的標(biāo)題和當(dāng)前Tab選項卡的標(biāo)題進行比較。

var onetab = tabs[0]; //第一個Tab選項卡 
var onetitle = onetab.panel('options').tab.text(); //第一個Tab選項卡的Title 
   if (onetitle == currtab_title) { 
     $('#mm-tabcloseleft').attr("disabled", "disabled").css({ "cursor": "default", "opacity": "0.4" }); 
   } 
   else { 
     $('#mm-tabcloseleft').removeAttr("disabled").css({ "cursor": "pointer", "opacity": "1" }); 
   } 

最后,實現(xiàn)的效果如下圖

圖三:當(dāng)前頁左側(cè)全部關(guān)閉

上面實現(xiàn)了三種情況下的變灰不可用的效果,當(dāng)鼠標(biāo)放到上面點擊,右鍵菜單就會消失,其實解決的辦法很簡單,希望這篇文章可以給大家?guī)韱l(fā)。

相關(guān)文章

  • 分享12個實用的jQuery代碼片段

    分享12個實用的jQuery代碼片段

    這篇文章主要介紹了12個實用的jQuery代碼片段,本文給出了在新窗口打開鏈接、設(shè)置等高的列、jQuery預(yù)加載圖像、禁用鼠標(biāo)右鍵、設(shè)定計時器等實用代碼片段,需要的朋友可以參考下
    2016-03-03
  • 在頁面加載完成后通過jquery給多個span賦值

    在頁面加載完成后通過jquery給多個span賦值

    想在頁面加載完成后,有幾個地方顯示當(dāng)前時間,所以想通過jquery給多個span賦值,需要的朋友可以參考下
    2014-05-05
  • JQuery textlimit 顯示用戶輸入的字符數(shù) 限制用戶輸入的字符數(shù)

    JQuery textlimit 顯示用戶輸入的字符數(shù) 限制用戶輸入的字符數(shù)

    顯示用戶輸入的字符數(shù) 限制用戶輸入的字符數(shù)的實現(xiàn)方法。
    2009-05-05
  • jQuery Validate設(shè)置onkeyup驗證的實例代碼

    jQuery Validate設(shè)置onkeyup驗證的實例代碼

    jQuery Validate 插件為表單提供了強大的驗證功能,讓客戶端表單驗證變得更簡單,同時提供了大量的定制選項,滿足應(yīng)用程序各種需求。這篇文章主要介紹了jQuery Validate設(shè)置onkeyup驗證的相關(guān)資料,需要的朋友可以參考下
    2016-12-12
  • JQuery select(下拉框)操作方法匯總

    JQuery select(下拉框)操作方法匯總

    這篇文章主要介紹了JQuery select(下拉框)操作方法匯總,本文講解了獲取選中項、獲取當(dāng)前選中項的索引值、獲取當(dāng)前option的最大索引值、獲取DropdownList的長度等內(nèi)容,需要的朋友可以參考下
    2015-04-04
  • jquery+css實現(xiàn)移動端元素拖動排序

    jquery+css實現(xiàn)移動端元素拖動排序

    這篇文章主要為大家詳細介紹了jquery+css實現(xiàn)移動端元素拖動排序,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-02-02
  • jQuery使用元素屬性attr賦值詳解

    jQuery使用元素屬性attr賦值詳解

    本文主要給大家講解的是jQuery使用元素屬性attr設(shè)置多個鍵值或函數(shù)的方法和示例,非常的實用,推薦給小伙伴們參考下。
    2015-02-02
  • jquery+easeing實現(xiàn)仿flash的載入動畫

    jquery+easeing實現(xiàn)仿flash的載入動畫

    本文主要給大家講述的是如何使用jquery+easeing實現(xiàn)仿flash的載入動畫的方法,附上示例代碼,非常細致全面,這里推薦給大家,希望對大家熟練使用jQuery有所幫助。
    2015-03-03
  • jquery mobile實現(xiàn)撥打電話功能的幾種方法

    jquery mobile實現(xiàn)撥打電話功能的幾種方法

    在做一個便民服務(wù)電話,用到移動web中列出的電話,點擊需要實現(xiàn)調(diào)用通訊錄,撥打電話功能,有需要的朋友可以參考一下
    2013-08-08
  • jQuery 動畫基礎(chǔ)教程

    jQuery 動畫基礎(chǔ)教程

    用jquery實現(xiàn)簡單動畫的制作,希望看了這篇文章后,建議大家自己手工打打,學(xué)習(xí)一下他的思路。
    2008-12-12

最新評論