如何用jquery實現(xiàn)右鍵菜單

時間：2016-11-09 16:52:24 迪豪910由分享

　　愛學(xué)習(xí)的小伙伴都會用過jquery，但是叫你實現(xiàn)右鍵菜單，你知道怎么做嗎?不知道的話，看一下由學(xué)習(xí)啦小編為你整理的關(guān)于如何用jquery實現(xiàn)右鍵菜單的資料，希望你們喜歡。

　　如何用jquery實現(xiàn)右鍵菜單？

　　在一些管理后臺，我們會模擬windows系統(tǒng)鼠標(biāo)右鍵的操作實現(xiàn)刪除和重全名等，本文我們來告訴你用jquery如何實現(xiàn)。

　　1.因為window默認(rèn)是可以右鍵的，所以我們要先禁用window原生的右鍵彈窗(禁用包括2個區(qū)域，1是鼠標(biāo)右鍵的區(qū)域div 2是彈出窗口的div)：

　　//禁用區(qū)域右鍵

　　$('body').on('contextmenu','.bottompage',function(){

　　return false;

　　});

　　$('body').on('contextmenu','#notebookedit',function(){

　　return false;

　　});

　　2.jq右鍵點擊事件的方法。

　　需要注意的是(1，彈窗多次點擊會有偏移，所有每次彈出需要位置置為0 2，如果頁面存在滾動條的話，需要將滾動條計算進(jìn)去 3，獲取滾動條偏移量不一定使用body對象，使用滾動條所在的div作為對象)

　　//點擊需要重命名的div

　　$('body').on('mousedown','.noteitemstyle',function(event){

　　//右鍵事件event.button==2

　　if(event.button==2)

　　{

　　var offset=$(this).offset();

　　//放置點擊別處時的彈窗不消失造成誤差

　　$('.noteeditlist').css('display','none');

　　//將彈窗的div絕對定位置清零，否則多次點擊會產(chǎn)生偏移量

　　$('.noteeditlist').css('position','absolute');

　　$(".noteeditlist").css("left","0px");

　　$(".noteeditlist").css("top","0px");

　　//獲取當(dāng)前頁面所在div的滾動條的高度，本頁面只有垂直滾動條

　　var locationY = $('.wrap').scrollTop();

　　offset.top=parseInt(offset.top)+parseInt(locationY);

　　//展示彈窗div ,并根據(jù)點擊源對其屬性賦值

　　$('.noteeditlist').offset(offset);

　　$('.noteeditlist').css('display','block');

　　var id=$(this).attr('noteid');

　　$('.noteeditlist').attr('renameid',id);

　　}

　　});

　　3 彈窗彈出之后，我們繼續(xù)操作自動隱藏彈窗的方法

　　//點擊頁面其他部分彈窗隱藏

　　$(document).bind('click',function(e){

　　var e = e || window.event; //瀏覽器兼容性

　　var elem = e.target || e.srcElement;

　　while (elem) { //循環(huán)判斷至跟節(jié)點，防止點擊的是div子元素

　　if ((elem.id && elem.id=='notebookedit')||(elem.className && elem.className=='notebooklistview')){

　　return;

　　}

　　elem = elem.parentNode;

　　}

　　$('#notebookedit').css('display','none'); //點擊的不是div或其子元素

　　});

　　4 字段重命名功能實現(xiàn)思路是

　　1)右鍵彈窗，彈窗中有重命名子項的選項，

　　2)點擊之后，最初右鍵的div變?yōu)榭删庉嫷臓顟B(tài)，

　　3)點擊是會將最初右鍵的主題id賦值給彈窗的一個屬性

　　4)編輯之后點擊頁面任何其他地方即代表重命名完成，發(fā)送ajax請求進(jìn)行重命名

　　代碼如下：

　　$(document).bind('click',function(e){

　　var e = e || window.event; //瀏覽器兼容性

　　var elem = e.target || e.srcElement;

　　while (elem) { //循環(huán)判斷至跟節(jié)點，防止點擊的是div子元素

　　if ((elem.className && elem.className=='notebookrenameedit')||(elem.id && elem.id=='notebookrename')){

　　return;

　　}

　　elem = elem.parentNode;

　　}

　　var renameid=$('#notebookrename').attr('renameid');

　　//判斷是否進(jìn)行了重命名的編輯操作：點擊彈窗重命名時會對renameid賦值

　　if(renameid!='-1')

　　{

　　var renameval=$("#"+renameid+" .notebookrenameedit :input[name='rename']").val();

　　//點擊的不是div或其子元素

　　$.post('index.php?r=coursespace/coursespace/notelistreload', {

　　renameid: renameid, renameval: renameval

　　function(data, status) {

　　if (status = 'success') {

　　$('.bottompage').html(data);

　　//賦值標(biāo)記為未點擊重命名的狀態(tài)

　　$('#notebookrename').attr('renameid', '-1');

　　$('.notebookrenameedit').css('display', 'none');

　　CKEDITOR.replace("cke3",{toolbar:[

　　//加粗斜體，劃線穿過線下標(biāo)字上標(biāo)字

　　['Bold','Italic','Underline','Strike','Subscript','Superscript'],

　　//數(shù)字列表實體列表減小縮進(jìn) 增大縮進(jìn)

　　['NumberedList','BulletedList','-','Outdent','Indent'],

　　//左對齊居中對齊右對齊兩端對齊

　　['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],

　　['Styles','Format','Font','FontSize'],],width:450});

　　} else {

　　alert("加載失敗!")

　　}

　　});

　　}

　　});

　　5 重命名的實現(xiàn)原理就是將展示的div替換成可以編輯的input，示例：

　　<div class='notebookname'><?= $Rpnotebook->title ?></div>

　　<input type='text' name='rename' value=<?= $Rpnotebook->title ?> style='width:120px;' class='notebookrenameeditid'>

　　</div>

　　6 彈窗的div

　　</div>

如何用jquery實現(xiàn)右鍵菜單

相關(guān)文章

熱門文章