jquery的contextMenu()右鍵菜單內(nèi)容怎么修改？

1、contextMenu我們可以根據(jù)數(shù)據(jù)記錄隱藏一些菜單項(xiàng)，這個(gè)可以在onShowMenu事件中，根據(jù)e.currentTarget觸發(fā)源獲取數(shù)據(jù)，再根據(jù)你需要改變原菜單項(xiàng)

創(chuàng)新互聯(lián)公司作為成都網(wǎng)站建設(shè)公司，專注重慶網(wǎng)站建設(shè)公司、網(wǎng)站設(shè)計(jì)，有關(guān)企業(yè)網(wǎng)站制作方案、改版、費(fèi)用等問題，行業(yè)涉及石涼亭等多個(gè)領(lǐng)域，已為上千家企業(yè)服務(wù)，得到了客戶的尊重與認(rèn)可。

jquery怎樣彈出右鍵菜單，請教！

先來源碼，把這一段存成文件，在要使用的頁面里面導(dǎo)入于jquery基本庫后。

------------

jQuery.fn.extend({

jsRightMenu: function(options) {

options = $.extend({

menuList: []

}, options);

return this.each(function() {

if ($("#div_RightMenu", $(this)).size() == 0) {

var menuCount = options.menuList.length;

if (menuCount 0) {

var divMenuList = "div id=\"div_RightMenu\" class=\"div_RightMenu\"";

for (var i = 0; i menuCount; i++) {

divMenuList += "div class=\"divMenuItem\" onclick=\"" + options.menuList[i].clickEvent + "\" onmouseover=\"" + options.menuList[i].mouseoverEvent + "\" onmouseout=\"" + options.menuList[i].mouseoutEvent + "\"" + options.menuList[i].menuName + "/div";

}

divMenuList += "/div";

$(this).append(divMenuList);

var objM = $(".divMenuItem");

$("#div_RightMenu").hide();

objM.bind("mouseover", function() {

this.style.backgroundColor = "#316ac5";

this.style.paddingLeft = "30px";

});

objM.bind("mouseout", function() {

this.style.backgroundColor = '#EAEAEA';

});

}

}

this.oncontextmenu = function() {

var objMenu = $("#div_RightMenu");

if (objMenu.size() 0) {

objMenu.hide();

var event = arguments[0] || window.event;

var clientX = event.clientX;

var clientY = event.clientY;

var redge = document.body.clientWidth - clientX;

var bedge = document.body.clientHeight - clientY;

var menu = objMenu.get(0);

var menuLeft = 0;

var menuTop = 0;

if (redge menu.offsetWidth)

menuLeft = document.body.scrollLeft + clientX - menu.offsetWidth;

else

menuLeft = document.body.scrollLeft + clientX;

if (bedge menu.offsetHeight)

menuTop = document.body.scrollTop + clientY - menu.offsetHeight;

else

menuTop = document.body.scrollTop + clientY;

objMenu.css({ top: menuTop + "px", left: menuLeft + "px" });

objMenu.show();

return false;

}

}

document.onclick = function() {

var objMenu = $("#div_RightMenu");

if (objMenu.size() 0) objMenu.hide();

}

});

}

});

-------------------------------------------------------

script src="" type="text/javascript"/script

script type="text/javascript" src="jquery.menu.js"/script

div id="divTest"右鍵菜單顯示區(qū)域/div

script type="text/javascript"

$(function() {

$("#divTest" ).jsRightMenu({

menuList: [{ menuName: "右鍵菜單1", clickEvent: "divClick('1')"},

{ menuName: "右鍵菜單2", clickEvent: "divClick('2')"},

{ menuName: "右鍵菜單3", clickEvent: "divClick('3')"},

{ menuName: "右鍵菜單4", clickEvent: "divClick('4')"},

{ menuName: "右鍵菜單5", clickEvent: "divClick('5')"}

]

});

});

function divClick(id){

alert("你點(diǎn)了--右鍵菜單"+id);

}

/script

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

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

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

var

tabcount

=

$('#tabs').tabs('tabs').length;

//tab選項(xiàng)卡的個(gè)數(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”的屬性不起作用，所以我加了一個(gè)CSS樣式，設(shè)置了一下它的透明度使它變灰。

效果圖：

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

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

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

var

tabs

=

$('#tabs').tabs('tabs');

//獲得所有的Tab選項(xiàng)卡

var

tabcount

=

tabs.length;

//Tab選項(xiàng)卡的個(gè)數(shù)

var

lasttab

=

tabs[tabcount

-

1];

//獲得最后一個(gè)Tab選項(xiàng)卡

var

lasttitle

=

lasttab.panel('options').tab.text();

//最后一個(gè)Tab選項(xiàng)卡的Title

var

currtab_title

=

$('#mm').data("currtab");

//當(dāng)前Tab選項(xiàng)卡的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)閉

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

這個(gè)跟第二個(gè)相反就行了，獲得第一個(gè)Tab選項(xiàng)卡的標(biāo)題和當(dāng)前Tab選項(xiàng)卡的標(biāo)題進(jìn)行比較。

var

onetab

=

tabs[0];

//第一個(gè)Tab選項(xiàng)卡

var

onetitle

=

onetab.panel('options').tab.text();

//第一個(gè)Tab選項(xiàng)卡的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"

});

}

最后，實(shí)現(xiàn)的效果如下圖

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

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

如何給jquery easyUI datagrid 添加右鍵菜單

//HTML中代碼

div id="menu" class="easyui-menu" style="width:150px;"div id="m-update"更新/divdiv class="menu-sep"/div%--分頁下劃線--%div id="m-closeall"全部關(guān)閉/divdiv id="m-closeother"除此之外全部關(guān)閉/divdiv class="menu-sep"/divdiv id="m-close"關(guān)閉/div

//查詢按鈕

$("#getprefrominfo").click(function () { var cols = $.data(document.body, "selectcols");//數(shù)據(jù)緩存，獲取需要查詢的列名 if (cols == null) { AlertMsg("請選擇列!"); return; } else { $("#grid").datagrid("loading"); var index = 0; //0為查詢 var qp = { cols: cols, sortway: $.data(document.body, "sortway"), index: index }; $("#result").empty(); $("#grid").datagrid({ queryParams: qp, //datagrid自帶的傳值參數(shù)

//這邊可以不用queryParams傳值，可以寫成：

// url: '/report/PreformDrawInfo_Get?_=' + radomnum(1000)+data,

//其中data為字符串類型的數(shù)據(jù)

//但是在IE下不用queryParams的話，數(shù)據(jù)中出現(xiàn)中文字符或出現(xiàn)亂碼 url: '/report/PreformDrawInfo_Get?_=' + radomnum(1000),

onRowContextMenu: function (e, rowIndex, rowData) { //右擊事件 $.data(document.body, "selectupdaterodno", rowData['入庫棒號(hào)']);//將右擊選中的某行數(shù)據(jù)放在緩存中 $('#menu').menu('show', { left: e.pageX, //彈出窗口的方位坐標(biāo) top: e.pageY }); e.preventDefault(); //阻止瀏覽器自帶的右鍵菜單彈出 } }); } });

//右擊后觸發(fā)的事件

$('#m-update').click(function () { postAjax("Report", "updateState", "rodno=" + $.data(document.body, "selectupdaterodno"), function (json) { if (!json.iserror) { $.data(document.body, "selectupdaterodno", ""); //清空緩存 AlertMsg("更新成功!"); } }); });

當(dāng)前名稱：jquery右鍵菜單,html 右鍵菜單
本文網(wǎng)址：http://chinadenli.net/article31/dsicjpd.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站策劃、商城網(wǎng)站、建站公司、關(guān)鍵詞優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)