這篇文章主要為大家詳細介紹了jquery自定義右鍵菜單、全選、不連續(xù)選擇的相關(guān)資料,需要的朋友可以參考下
最近在項目中要實現(xiàn)一些自定義效果，例如右鍵菜單、全選、不連續(xù)選擇等等，個人認為主要是理清楚邏輯和事件關(guān)系。要實現(xiàn)這些，也有現(xiàn)成的插件可以用，如jQuery UI的selectable。
1、右鍵菜單
當(dāng)瀏覽網(wǎng)頁時，單擊鼠標(biāo)右鍵（或ctrl+觸模板左鍵）會出現(xiàn)瀏覽器默認的右鍵菜單項，就像這樣子的：
但是當(dāng)要對某個元素自定義右鍵，像這樣子的：
就必須得先禁用瀏覽器默認的菜單，需要監(jiān)聽contextmenu事件，關(guān)鍵代碼如下：
$(function(){
$('#box').on('contextmenu',function(event){
event.preventDefault();
$(this).trigger('click');
$('#menulist').css({
top: event.pageY,
left: event.pageX
});
});
$('#box').click(function(){
$('#menulist').css('display','block');
});
})
2、全選
默認的ctrl+A(MAC下是command+A)會選擇整個網(wǎng)頁或者某個獲得焦點的可編輯元素。
<div id='box'>
<p class='first'>這是個div，這是個div，</p>
<p>這是個div，這是個div，</p>
<p>這是個div，這是個div，</p>
<p>這是個div，這是個div，</p>
<p>這是個div，這是個div，</p>
</div>
<div id='other'>
<p class='first'>這是另外一個div，這是另外一個div，</p>
<p>這是另外一個div，這是另外一個div，</p>
<p>這是另外一個div，這是另外一個div，</p>
<p>這是另外一個div，這是另外一個div，</p>
</div>
如果頁面中只有這兩個div，按下ctrl/cmd+A這兩個div都會被選中，若只想選擇div#box的內(nèi)容，簡單地方式是給該div加上contentEditable=true。另外一種方式就是鍵盤事件的監(jiān)聽。
模擬選中div#box所有子元素p并高亮：
$(function(){
$(document).keydown(function(event){
//windows下是event.ctrlKey
if(event.metaKey && event.which === 65){
event.preventDefault();
$('#box>p').trigger('click');
}
});
$('#box').on('click', 'p', function(){
$(this).css('color','red');
});
});
3、shift實現(xiàn)連續(xù)的選擇
shift結(jié)合鼠標(biāo)右鍵實現(xiàn)元素的連續(xù)選擇，這里對其進行簡單模擬。
<div id='box' class="unselect">
<p class='first'>這是個div，這是個div，</p>
<p>這是個div，這是個div，</p>
<p>這是個div，這是個div，</p>
<p>這是個div，這是個div，</p>
<p>這是個div，這是個div，</p>
</div>
按住shift時，瀏覽器有默認的連選，先禁用掉：
.unselect{
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
對于低版本的IE，利用selectstart事件：
$('#box')[0].onselectstart = function(e){
e.preventDefault();
return false;
};
給p注冊click事件，同時要監(jiān)聽document對象的keydown和keyup事件：
$(document).keydown(function(e){
if(e.shiftKey){
shiftkey = 1;
}
}).keyup(function(){
shiftkey = 0;
});
$('#box').on('click','p',function(){
if(shiftkey === 1){
second = $(this).index();
for(var min = Math.min(first,second); min <= Math.max(first,second); min++){
$('#box').find('p').eq(min).css('color','red');
}
} else {
first = $(this).index();
$(this).css('color','red').siblings().css('color','black');
}
})
4、不連續(xù)選擇
不連續(xù)選擇需要監(jiān)聽ctrl鍵(mac下command鍵)，同時給元素注冊click事件。
$(document).keydown(function(e){
if(e.metaKey){ //win是e.ctrlKey
ctrlkey = 2;
}
}).keyup(function(){
ctrlkey = 0;
});
$('#box').on('click','p',function(){
if(ctrlkey === 2){
$(this).css('color','red');
} else {
$(this).css('color','red').siblings().css('color','black');
}
})
以上就是本文的全部內(nèi)容，希望對大家學(xué)習(xí)jquery程序設(shè)計有所幫助。
公眾號
事業(yè)單位
當(dāng)前位置：
公考類
招聘類
各類考試