Cara menggunakan komponen JS Bootstrap ContextMenu kemahiran menu_javascript klik kanan

Hari ini saya akan meringkaskan aplikasi komponen kecil bootstrap. Okay, tanpa berlengah lagi, mari kita ke intinya.

1. Pengenalan kepada ContextMenu

Satu keperluan: Susunan baris jadual, sokongan untuk pesanan berbilang pilihan dan berbilang pilihan tidak berturut-turut. Apakah maksudnya? Mari kita lihat pada pemaparan yang perlu dicapai:

Keperluan ialah: baris 6, 8 dan 9 yang dipilih perlu dialihkan ke antara baris 2 dan 3. Selain perniagaan, dari perspektif teknikal semata-mata, untuk mencapai kesan di atas dengan jumlah operasi yang paling sedikit, blogger memikirkan fungsi klik kanan Jika anda boleh klik kanan tetikus pada baris ke-2 atau ke-3, anda boleh pilih item yang dipilih melalui fungsi menu klik kanan. Bukankah ini cara paling mudah untuk mengalihkan baris ke kedudukan yang sepadan? Mari lakukannya, jadi kami mencari komponen dan mencari "menu klik kanan bootstrap". Akhirnya, kami menjumpai komponen ContextMenu kami Selepas kajian yang teliti, saya merasakan kesannya okey, jadi saya kongsikan di sini untuk rujukan tukang kebun yang perlu menggunakannya.

Alamat sumber terbuka ContextMenu: https://github.com/sydcanem/bootstrap-contextmenu

ContextMenu menggunakan Demo: http://sydcanem.com/bootstrap-contextmenu/

2. Kesan Menu Konteks

Kesan klik kanan awal

Mohon untuk projek

Selepas melaksanakan fungsi menu

3. Contoh kod Menu Konteks
Sebenarnya, ia adalah perkara yang mudah, mari kita lihat cara menggunakannya.

1. Sebutkan dokumen yang berkaitan. Yang penting ialah bootstrap-contextmenu.js dan prettify.js

<script src="/Scripts/jquery-1.9.1.min.js"></script>
<script src="/Content/bootstrap/js/bootstrap.min.js"></script>
<script src="/Content/boostrap-contextmenu/bootstrap-contextmenu.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.js"></script>

2. Penyediaan HTML

  <div id="context-menu">
    <ul class="dropdown-menu" role="menu">
      <li><a tabindex="-1" href="#" operator="top">插入此行上面</a></li>
      <li><a tabindex="-1" href="#" operator="bottom">插入此行下面</a></li>
    </ul>
  </div>

3. Permulaan JS

Kod ini tidak sukar, hanya beberapa logik operasi baris jadual. Perkara yang memerlukan penjelasan:

(1) Selepas melakukan alih keluar dan sisipkan pada baris jadual, fungsi menu klik kanan perlu dimulakan semula, jika tidak, ia tidak akan berfungsi lagi selepas mengklik kanan sekali.

(2) Jika terdapat banyak item fungsi menu, anda perlu menggunakan garis pembahagi untuk mengumpulkannya. Cuma tambah

dan ia akan selesai.

<div id="context-menu2">
     <ul class="dropdown-menu" role="menu">
       <li><a tabindex="-1">Action</a></li>
       <li><a tabindex="-1">Another action</a></li>
       <li><a tabindex="-1">Something else here</a></li>
       <li class="divider"></li>
       <li><a tabindex="-1">Separated link</a></li>
     </ul>
    </div>

(3) Jika anda ingin menggerakkan tetikus ke menu untuk memaparkan latar belakang biru, anda perlu merujuk fail css lain.

Salin kod Kod adalah seperti berikut:

http:/ /netdna. bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">

Kesannya adalah seperti berikut:

Di atas ialah beberapa penggunaan ringkas komponen bootstrap-ContextMenu. Ia mungkin tidak sempurna, tetapi ia boleh menyelesaikan keperluan umum menu klik kanan dengan baik.