menu klik kanan tersuai jquery, pilih semua, selection

menu klik kanan tersuai jquery, pilih semua, selection_jquery terputus

WBOY

Lepaskan： 2016-05-16 15:12:42

asal

1229 orang telah melayarinya

Baru-baru ini, saya perlu melaksanakan beberapa kesan tersuai dalam projek, seperti menu klik kanan, pilih semua, pemilihan terputus, dsb. Saya fikir perkara utama adalah untuk menjelaskan logik dan hubungan peristiwa. Untuk mencapai matlamat ini, terdapat juga pemalam siap sedia tersedia, seperti jQuery UI boleh dipilih.

1. Klik kanan menu
Apabila menyemak imbas web, klik kanan tetikus (atau ctrl+klik kiri pada pad sentuh) dan item menu klik kanan lalai penyemak imbas akan muncul, seperti ini:

Tetapi apabila anda ingin menyesuaikan klik kanan pada elemen, seperti ini:

Anda mesti melumpuhkan menu lalai penyemak imbas terlebih dahulu dan mendengar acara menu konteks Kod utama adalah seperti berikut:

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

Salin selepas log masuk

2. Pilih semua
Ctrl+A lalai (arahan+A di bawah MAC) akan memilih keseluruhan halaman web atau elemen boleh diedit yang difokuskan.

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

Salin selepas log masuk

Jika hanya terdapat dua div ini pada halaman, tekan ctrl/cmd+A dan kedua-dua div akan dipilih Jika anda hanya mahu memilih kandungan div#box, cara mudahnya ialah menambah contentEditable=true to div. Cara lain ialah mendengar acara papan kekunci.

Simulasikan memilih semua sub-elemen p div#box dan menyerlahkannya:

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

Salin selepas log masuk

3. Shift mendayakan pemilihan berterusan
Shift digabungkan dengan butang kanan tetikus untuk mencapai pemilihan elemen berterusan, yang hanya disimulasikan di sini.

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

Salin selepas log masuk

Apabila memegang syif, penyemak imbas mempunyai pilihan berterusan lalai, lumpuhkannya dahulu:

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

Salin selepas log masuk

Untuk versi IE yang lebih rendah, gunakan acara selectstart:

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

Salin selepas log masuk

Daftarkan acara klik untuk p, dan dengar acara keydown dan keyup objek dokumen:

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

Salin selepas log masuk

4. Pemilihan tidak berterusan
Pemilihan tidak berterusan memerlukan pemantauan kekunci ctrl (kunci arahan di bawah mac) dan mendaftarkan acara klik untuk elemen.

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

Salin selepas log masuk

Di atas adalah keseluruhan kandungan artikel ini saya harap ia akan membantu semua orang dalam mempelajari pengaturcaraan jquery.