如何用jquery實(shí)現(xiàn)右鍵菜單
如何用jquery實(shí)現(xiàn)右鍵菜單
愛學(xué)習(xí)的小伙伴都會用過jquery,但是叫你實(shí)現(xiàn)右鍵菜單,你知道怎么做嗎?不知道的話,看一下由學(xué)習(xí)啦小編為你整理的關(guān)于如何用jquery實(shí)現(xiàn)右鍵菜單的資料,希望你們喜歡。
如何用jquery實(shí)現(xiàn)右鍵菜單?
在一些管理后臺,我們會模擬windows系統(tǒng)鼠標(biāo)右鍵的操作實(shí)現(xiàn)刪除和重全名等,本文我們來告訴你用jquery如何實(shí)現(xiàn)。
1.因?yàn)閣indow默認(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右鍵點(diǎn)擊事件的方法。
需要注意的是(1,彈窗多次點(diǎn)擊會有偏移,所有每次彈出需要位置置為0 2,如果頁面存在滾動條的話,需要將滾動條計算進(jìn)去 3,獲取滾動條偏移量不一定使用body對象,使用滾動條所在的div作為對象)
//點(diǎn)擊需要重命名的div
$('body').on('mousedown','.noteitemstyle',function(event){
//右鍵事件event.button==2
if(event.button==2)
{
var offset=$(this).offset();
//放置點(diǎn)擊別處時的彈窗不消失造成誤差
$('.noteeditlist').css('display','none');
//將彈窗的div絕對定位置清零,否則多次點(diǎn)擊會產(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ù)點(diǎn)擊源對其屬性賦值
$('.noteeditlist').offset(offset);
$('.noteeditlist').css('display','block');
var id=$(this).attr('noteid');
$('.noteeditlist').attr('renameid',id);
}
});
3 彈窗彈出之后,我們繼續(xù)操作自動隱藏彈窗的方法
//點(diǎn)擊頁面其他部分彈窗隱藏
$(document).bind('click',function(e){
var e = e || window.event; //瀏覽器兼容性
var elem = e.target || e.srcElement;
while (elem) { //循環(huán)判斷至跟節(jié)點(diǎn),防止點(diǎn)擊的是div子元素
if ((elem.id && elem.id=='notebookedit')||(elem.className && elem.className=='notebooklistview')){
return;
}
elem = elem.parentNode;
}
$('#notebookedit').css('display','none'); //點(diǎn)擊的不是div或其子元素
});
4 字段重命名功能實(shí)現(xiàn)思路是
1)右鍵彈窗 ,彈窗中有重命名子項(xiàng)的選項(xiàng),
2)點(diǎn)擊之后, 最初右鍵的div變?yōu)榭删庉嫷臓顟B(tài),
3)點(diǎn)擊是會將最初右鍵的主題id賦值給彈窗的一個屬性
4)編輯之后點(diǎn)擊頁面任何其他地方即代表重命名完成,發(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é)點(diǎn),防止點(diǎn)擊的是div子元素
if ((elem.className && elem.className=='notebookrenameedit')||(elem.id && elem.id=='notebookrename')){
return;
}
elem = elem.parentNode;
}
var renameid=$('#notebookrename').attr('renameid');
//判斷是否進(jìn)行了重命名的編輯操作:點(diǎn)擊彈窗重命名時會對renameid賦值
if(renameid!='-1')
{
var renameval=$("#"+renameid+" .notebookrenameedit :input[name='rename']").val();
//點(diǎn)擊的不是div或其子元素
$.post('index.php?r=coursespace/coursespace/notelistreload', {
renameid: renameid, renameval: renameval
},
function(data, status) {
if (status = 'success') {
$('.bottompage').html(data);
//賦值標(biāo)記為未點(diǎn)擊重命名的狀態(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ù)字列表 實(shí)體列表 減小縮進(jìn) 增大縮進(jìn)
['NumberedList','BulletedList','-','Outdent','Indent'],
//左對齊 居中對齊 右對齊 兩端對齊
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Styles','Format','Font','FontSize'],],width:450});
} else {
alert("加載失敗!")
}
});
}
});
5 重命名的實(shí)現(xiàn)原理就是將展示的div替換成可以編輯的input,示例:
<div class='notebookname'><?= $Rpnotebook->title ?></div>
<div class='notebookrenameedit' style='display:none;'>
<input type='text' name='rename' value=<?= $Rpnotebook->title ?> style='width:120px;' class='notebookrenameeditid'>
</div>
6 彈窗的div
<div id='notebookedit' class="notebookdelete" style="display:none; " editid="-1" >
<div class='notebookedititem' id='notebookitemdelete'>刪除</div>
<div class='notebookedititem' id='notebookrename' renameid='-1'>重命名</div>
</div>