menu contextuel personnalisé jquery, tout sélectionner, sélection discontinue_jquery

Récemment, j'ai dû implémenter certains effets personnalisés dans le projet, tels que le menu contextuel, tout sélectionner, la sélection discontinue, etc. Je pense que l'essentiel est de clarifier la logique et les relations entre événements. Pour y parvenir, il existe également des plug-ins prêts à l'emploi, tels que le sélectionnable de jQuery UI.

1. Menu contextuel
Lorsque vous naviguez sur le Web, cliquez avec le bouton droit de la souris (ou ctrl+clic gauche sur le pavé tactile) et l'élément de menu contextuel par défaut du navigateur apparaîtra, comme ceci :

Mais quand on souhaite personnaliser le clic droit sur un élément, comme ceci :

Vous devez d'abord désactiver le menu par défaut du navigateur et écouter l'événement contextmenu. Le code clé est le suivant :

$(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. Sélectionner tout
Le ctrl+A par défaut (commande+A sous MAC) sélectionnera la page Web entière ou un élément modifiable ciblé.

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

S'il n'y a que ces deux divs sur la page, appuyez sur ctrl/cmd+A et les deux divs seront sélectionnés. Si vous souhaitez uniquement sélectionner le contenu de div#box, le moyen le plus simple est d'ajouter contentEditable=true à. la div. Une autre façon consiste à écouter les événements du clavier.

Simulez en sélectionnant tous les sous-éléments p de div#box et en les mettant en surbrillance :

$(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 permet la sélection continue
Shift est combiné avec le bouton droit de la souris pour obtenir une sélection continue d'éléments, qui est simplement simulée ici.

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

Lorsque vous maintenez Shift, le navigateur a une sélection continue par défaut, désactivez-la d'abord :

.unselect{
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 -o-user-select: none;
 user-select: none;
}

Pour les versions inférieures d'IE, utilisez l'événement selectstart :

$('#box')[0].onselectstart = function(e){
  e.preventDefault();
  return false;
 };

Enregistrez l'événement click pour p et écoutez les événements keydown et keyup de l'objet document :

$(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. Sélection discontinue
La sélection discontinue nécessite de surveiller la touche ctrl (touche de commande sous mac) et d'enregistrer un événement clic pour l'élément.

 $(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');
  }
 })

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à tout le monde dans l'apprentissage de la programmation jquery.