jquery melaksanakan menu klik kanan div-Soal Jawab bahagian hadapan-php.cn

jquery melaksanakan menu klik kanan div

WBOY

Lepaskan： 2023-05-18 22:32:07

asal

832 orang telah melayarinya

Aplikasi web moden perlu menyediakan antara muka yang lebih mesra pengguna untuk menarik lebih ramai pengguna dan meningkatkan pengalaman pengguna. Dalam bidang pembangunan web, selalunya perlu menambah fungsi menu klik kanan supaya pengguna boleh melihat lebih banyak pilihan dengan mengklik kanan. Artikel ini akan memperkenalkan cara menggunakan jQuery untuk melaksanakan menu klik kanan yang mudah.

Struktur HTML

Mula-mula, tambah komponen div yang perlu diklik kanan pada halaman HTML. Selain itu, tambah komponen menu yang mengandungi pelbagai arahan yang tersedia. Berikut ialah coretan kod HTML:

<div class="right-clickable">右击我弹出菜单</div>

<div class="menu">
  <ul>
    <li><a href="#">命令1</a></li>
    <li><a href="#">命令2</a></li>
    <li><a href="#">命令3</a></li>
  </ul>
</div>

Salin selepas log masuk

Dalam kod ini, kelas CSS div yang perlu diklik kanan ialah "boleh diklik kanan", dan kelas CSS menu ialah "menu" .

Gaya CSS

Langkah seterusnya ialah menambah gaya CSS pada html. Dalam CSS, anda perlu menjadikan elemen div mempunyai fungsi klik kanan dan menjadikan item menu diselaraskan ke sebelah kanan elemen div. Berikut ialah coretan gaya CSS:

.menu {
  display: none;
  position: absolute;
  border: 1px solid #CCC;
  background: #FFF;
  padding: 5px;
}

.right-clickable {
  cursor: pointer; 
}

.right-clickable:hover {
  background-color: #EEE;
}

.menu li {
  padding: 5px;
  list-style: none;
}

.menu li:hover {
  background-color: #EEE;
}

.menu a {
  color: #666;
  text-decoration: none;
}

Salin selepas log masuk

Dalam kod ini, "boleh diklik kanan" mempunyai kursor penuding dan maklum balas alih tetikus, manakala "menu" mempunyai latar belakang biru, jidar putih dan warna teks kelabu.

Pelaksanaan JavaScript

Anda kini boleh menggunakan perpustakaan JavaScript jQuery untuk melaksanakan fungsi klik kanan. Pustaka jQuery boleh didapati dengan mudah melalui pautan CDN untuk semua pelayar utama. jQuery 3.5.1 digunakan di sini.

Pertama, cipta objek jQuery untuk menu. Kemudian, tetapkan lokasi menu klik kanan dan bukanya dalam halaman. Berikut ialah coretan kod JavaScript:

$(function() {

  var $contextMenu = $(".menu");

  $("body").on("contextmenu", ".right-clickable", function(e) {

    $contextMenu.css({
      display: "block",
      left: e.pageX,
      top: e.pageY
    });

    return false;
  });

});

Salin selepas log masuk

Dalam kod di atas, "$contextMenu" ialah pemilih jQuery yang memilih elemen dengan kelas "menu". "$("body")" digunakan untuk menggunakan acara klik kanan dan meliputi seluruh halaman. Blok kod memanggil dan menentukan lokasi menu klik kanan.

Dalam coretan kod berikut, sembunyikan sebarang menu klik kanan di seluruh dokumen:

$(document).on("click", function() {
  $contextMenu.hide();
});

Salin selepas log masuk

Kod Lengkap

Semua kod kini boleh digabungkan menjadi satu fail JavaScript dan masukkannya dalam HTML. Kod yang lengkap kelihatan seperti ini:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>右键菜单</title>
  <link rel="stylesheet" href="style.css">
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="script.js"></script>
</head>
<body>
  <div class="right-clickable">右击我弹出菜单</div>

  <div class="menu">
    <ul>
      <li><a href="#">命令1</a></li>
      <li><a href="#">命令2</a></li>
      <li><a href="#">命令3</a></li>
    </ul>
  </div>
</body>
</html>

Salin selepas log masuk

Kesimpulan

Siaran ini menerangkan cara melaksanakan menu klik kanan yang mudah menggunakan jQuery dan menyediakan kod HTML/CSS /JavaScript yang lengkap pelaksanaan. Contoh ini tidak rumit, tetapi ia adalah ilustrasi yang baik tentang pelaksanaan fungsi jQuery dan cara menggunakan CSS untuk mengawal gaya. Jika anda ingin menambah ciri lain, anda boleh melanjutkan contoh di atas.

Atas ialah kandungan terperinci jquery melaksanakan menu klik kanan div. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!