中文字幕免费精品_亚洲视频自拍_亚洲综合国产激情另类一区_色综合咪咪久久

這篇文章主要為大家詳細介紹了jquery自定義右鍵菜單、全選、不連續選擇的相關資料,需要的朋友可以參考下

最近在項目中要實現一些自定義效果，例如右鍵菜單、全選、不連續選擇等等，個人認為主要是理清楚邏輯和事件關系。要實現這些，也有現成的插件可以用，如jQuery UI的selectable。

1、右鍵菜單

當瀏覽網頁時，單擊鼠標右鍵（或ctrl+觸模板左鍵）會出現瀏覽器默認的右鍵菜單項，就像這樣子的：

但是當要對某個元素自定義右鍵，像這樣子的：

就必須得先禁用瀏覽器默認的菜單，需要監聽contextmenu事件，關鍵代碼如下：

$(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)會選擇整個網頁或者某個獲得焦點的可編輯元素。

<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的內容，簡單地方式是給該div加上contentEditable=true。另外一種方式就是鍵盤事件的監聽。

模擬選中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實現連續的選擇

shift結合鼠標右鍵實現元素的連續選擇，這里對其進行簡單模擬。

<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事件，同時要監聽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、不連續選擇

不連續選擇需要監聽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');

 }

})

以上就是本文的全部內容，希望對大家學習jquery程序設計有所幫助。