jQuery EasyUI實現(xiàn)右鍵菜單變灰不可用效果
首先,實現(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)文章
JQuery textlimit 顯示用戶輸入的字符數(shù) 限制用戶輸入的字符數(shù)
顯示用戶輸入的字符數(shù) 限制用戶輸入的字符數(shù)的實現(xiàn)方法。2009-05-05jQuery Validate設(shè)置onkeyup驗證的實例代碼
jQuery Validate 插件為表單提供了強大的驗證功能,讓客戶端表單驗證變得更簡單,同時提供了大量的定制選項,滿足應(yīng)用程序各種需求。這篇文章主要介紹了jQuery Validate設(shè)置onkeyup驗證的相關(guān)資料,需要的朋友可以參考下2016-12-12jquery+easeing實現(xiàn)仿flash的載入動畫
本文主要給大家講述的是如何使用jquery+easeing實現(xiàn)仿flash的載入動畫的方法,附上示例代碼,非常細致全面,這里推薦給大家,希望對大家熟練使用jQuery有所幫助。2015-03-03jquery mobile實現(xiàn)撥打電話功能的幾種方法
在做一個便民服務(wù)電話,用到移動web中列出的電話,點擊需要實現(xiàn)調(diào)用通訊錄,撥打電話功能,有需要的朋友可以參考一下2013-08-08