Hari ini, mari kita ringkas penerapan widget bootstrap. Oke, jangan bicara omong kosong, mari kita sampai intinya.
1. Pengantar ContextMenu
Salah satu persyaratan: Pemesanan baris tabel, mendukung pemesanan ganda-terpilih, dan dapat dipilih beberapa pilihan. Apa artinya? Mari kita lihat rendering yang perlu diimplementasikan:
Persyaratannya adalah: baris 6, 8, dan 9 yang dipilih perlu dipindahkan antara baris 2 dan baris 3. Mengesampingkan bisnis, dari perspektif teknis, jika Anda ingin menggunakan operasi terkecil untuk mencapai efek di atas, blogger memikirkan fungsi klik kanan. Jika Anda dapat mengklik kanan mouse pada baris 2 atau baris 3, dan memindahkan baris yang dipilih ke posisi yang sesuai melalui fungsi menu klik kanan, bukankah ini yang termudah? Kami hanya melakukannya, jadi kami mencari komponen dan mencari "menu klik kanan bootstrap". Akhirnya, kami menemukan komponen ContextMenu kami. Setelah belajar dengan cermat, kami merasa bahwa efeknya baik -baik saja, jadi kami membagikannya di sini untuk referensi oleh tukang kebun yang perlu menggunakannya.
ContextMenu Alamat Sumber Terbuka: https://github.com/sydcanem/bootstrap-contextMenu
ContextMenu menggunakan demo: http://sydcanem.com/bootstrap-contextmenu/
2. Efek ContextMenu
Efek klik kanan awal
Berlaku untuk proyek
Setelah menjalankan fungsi menu
3. Contoh Kode ContextMenu
Sebenarnya, itu hanya hal yang sederhana, mari kita lihat bagaimana menggunakannya.
1. Referensi file yang sesuai. Kuncinya adalah dua bootstrap-contextmenu.js dan prettify.js
<skrip src = "/skrip/jQuery-1.9.1.min.js"> </script> <skrip src = "/content/bootstrap/js/bootstrap.min.js"> </script> <skrip src = "/content/boottrap </contextMenu/bootstrap.cripte-contextex.cripter." src = "http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.js"> </script>
2. Persiapan HTML
<div id="context-menu"> <ul role="menu"> <li><a tabindex="-1" href="#" operator="top">Insert above this line</a></li> <li><a tabindex="-1" href="#" operator="bottom">Insert below this line</a></li> </ul> </div>
3. Inisialisasi JS
Kode ini tidak sulit, itu hanya logika operasi baris tabel. Di mana menjelaskan:
(1) Setelah mengeksekusi, hapus dan masukkan di baris tabel, fungsi menu klik kanan harus diinisialisasi ulang. Kalau tidak, setelah mengklik kanan sekali, itu tidak akan lagi berhasil.
(2) Jika ada banyak item fungsi menu, Anda perlu menggunakan garis pemisah untuk mengelompokkannya. Cukup tambahkan <li> </li> untuk menyelesaikannya.
<div id="context-menu2"> <ul 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></li> <li><a tabindex="-1">Separated Tautan </a> </li> </div>
(3) Jika Anda ingin memindahkan mouse ke menu untuk menampilkan latar belakang biru, Anda harus merujuk ke file CSS lain.
Salinan kode adalah sebagai berikut: <tautan href = "http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel = "stylesheet">
Efeknya adalah sebagai berikut:
Jika Anda masih ingin belajar secara mendalam, Anda dapat mengklik di sini untuk mempelajari dan melampirkan dua topik menarik kepada Anda: Tutorial Pembelajaran Bootstrap Bootstrap Tutorial Praktis
Di atas adalah beberapa penggunaan sederhana dari komponen Bootstrap-ContextMenu. Ini mungkin tidak sempurna, tetapi dapat diselesaikan dengan baik untuk persyaratan menu klik kanan umum.