jqueryのカスタム右クリックメニュー、すべて選択、不連続なselection_jquery

最近、右クリック メニュー、すべて選択、不連続選択などのカスタム効果をプロジェクトに実装する必要があります。主なことは、ロジックとイベントの関係を明確にすることだと思います。これを実現するために、jQuery UI の選択可能なプラグインなど、既製のプラグインも利用できます。

1. 右クリックメニュー
Web を閲覧するときに、マウスを右クリック (または Ctrl タッチ パッドを左クリック) すると、ブラウザのデフォルトの右クリック メニュー項目が次のように表示されます:

しかし、要素の右クリックをカスタマイズしたい場合は、次のようにします。

まずブラウザのデフォルト メニューを無効にして、コンテキスト メニュー イベントをリッスンする必要があります。キー コードは次のとおりです:

$(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 ではコマンド A) は、Web ページ全体またはフォーカスされた編集可能な要素を選択します。

<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>

ページ内にこれら 2 つの div のみがある場合は、ctrl/cmd A を押すと両方の div が選択されます。div#box のコンテンツのみを選択したい場合、簡単な方法は contentEditable=true を部もう 1 つの方法は、キーボード イベントをリッスンすることです。

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 のクリック イベントを登録し、ドキュメント オブジェクトの 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 ではコマンド キー) を監視し、要素のクリック イベントを登録する必要があります。

 $(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 プログラミングを学ぶのに役立つことを願っています。