JQuery Pretty Pie Click Hover Menu

Hi guys, saya tersandung pada menu hover yang cantik ini yang berputar di sekitar elemen dan item menu dipilih secara automatik apabila anda menggerakkan tetikus di sekelilingnya. Ia juga mempunyai fungsi yang cukup sejuk yang membolehkannya muncul apabila anda klik kanan tetikus yang boleh berguna untuk beberapa aplikasi. Keperluan: JQueryui, Firefox/Chrome - mungkin masalah dengan IE tetapi versi kemudian kelihatannya OK. Demo Halaman muat turun

<span>//example pie hover menu
</span><span>$(function() {
</span>
    <span>$("#area").prettypiemenu({
</span>        <span>buttons: [
</span>            <span>{ img: "ui-icon-minus", title: "plaah1" }, 
</span>            <span>{ img: "ui-icon-plus",  title: "plaah2" },
</span>            <span>{ img: "ui-icon-close", title: "plaah3" }
</span>        <span>],
</span>        <span>onSelection: function(item) {
</span>          <span>alert (item + ' was clicked!'); 
</span>        <span>},
</span>        <span>showTitles: false
</span>    <span>});
</span>
    <span>$("#test").prettypiemenu({
</span>        <span>buttons: [
</span>            <span>{ img: "ui-icon-minus", title: "plaah1" }, 
</span>            <span>{ img: "ui-icon-plus",  title: "plaah2" },
</span>            <span>{ img: "ui-icon-close", title: "plaah3" },
</span>            <span>{ img: "ui-icon-check", title: "plaah4" }
</span>        <span>],
</span>        <span>onSelection: function(item) {
</span>          <span>alert (item + ' was clickedoo!'); 
</span>        <span>},
</span>        <span>closeRadius: 25,
</span>        <span>showTitles: true
</span>    <span>});      
</span>    
    <span>$( "#testbtn" ).button({ icons: {primary:"ui-icon-gear"}, text: false })
</span>    <span>.click(function(event) {
</span>        event<span>.preventDefault();
</span>        <span>var offset = $( "#testbtn" ).offset();
</span>        <span>var h = $( "#testbtn" ).height();
</span>        <span>var w = $( "#testbtn" ).width();
</span>        <span>var btn_middle_y = offset.top + h/2;
</span>        <span>var btn_middle_x = offset.left + w/2;
</span>        <span>$("#test").prettypiemenu("show", {top: btn_middle_y, left: btn_middle_x});
</span>        <span>return false;
</span>    <span>}); 
</span><span>});</span>

Soalan Lazim (Soalan Lazim) Mengenai JQuery Hover dan Klik Menu

Bagaimana saya boleh menggunakan jQuery untuk membuat kesan hover pada item menu?

Untuk membuat kesan hover menggunakan jQuery, anda perlu menggunakan kaedah hover (). Kaedah ini menentukan dua fungsi untuk dijalankan apabila penunjuk tetikus melayang ke atas unsur -unsur yang dipilih. Kaedah ini mencetuskan peristiwa tetikus dan mouseleave. Berikut adalah contoh mudah:

$ (pemilih) .Hover (infungsi, outfunction);
Untuk membuat acara klik menggunakan jQuery, anda boleh menggunakan kaedah klik (). Kaedah ini melampirkan fungsi pengendali acara ke elemen HTML. Fungsi ini dilaksanakan apabila pengguna mengklik pada elemen HTML. Berikut adalah contoh mudah:

$ (pemilih) .click (fungsi); Lebih dari elemen yang dipilih. Kaedah ini mencetuskan peristiwa tetikus dan mouseleave. Sebaliknya, kaedah klik () dalam jQuery digunakan untuk melampirkan fungsi pengendali acara ke elemen HTML. Fungsi ini dilaksanakan apabila pengguna mengklik pada elemen HTML.

Bolehkah saya menggunakan kaedah hover () dan klik () pada elemen yang sama dalam jQuery? Kaedah hover () akan mencetuskan apabila penunjuk tetikus melayang ke atas elemen, dan kaedah klik () akan mencetuskan apabila pengguna mengklik pada elemen. Kaedah ini menghilangkan pengendali acara yang dilampirkan dengan kaedah ON (). Berikut adalah contoh mudah:

$ (pemilih) .off ("MouseEnter Mouseleave");

Bagaimana saya boleh menambah kelewatan kepada kesan hover dalam jQuery?

Untuk menambah kelewatan kepada kesan hover dalam jQuery, anda boleh menggunakan kaedah kelewatan (). Kaedah ini menetapkan pemasa untuk melambatkan pelaksanaan item berikutnya dalam barisan. Berikut adalah contoh mudah:

$ (pemilih) .delay (masa) .queue (fungsi); boleh menggunakan kaedah animate (). Kaedah ini melakukan animasi tersuai satu set sifat CSS. Berikut adalah contoh mudah:

$ (pemilih) .hover (function () {

$ (ini) .animate ({properties}, kelajuan);

}); Menu dropdown pada hover?

Untuk membuat menu dropdown pada hover menggunakan jQuery, anda boleh menggunakan kaedah hover () untuk menunjukkan dan menyembunyikan menu dropdown apabila penunjuk tetikus melayang di atas item menu. Berikut adalah contoh mudah:

$ (pemilih) .hover (function () {
$ (this) .children (". Dropdown-menu"). Menu dropdown?

Untuk membuat menu dropdown yang boleh diklik menggunakan jQuery, anda boleh menggunakan kaedah klik () untuk menunjukkan dan menyembunyikan menu dropdown apabila pengguna mengklik pada item menu. Berikut adalah contoh mudah:

$ (pemilih) .click (function () { $ (ini) .Children (". Dropdown-menu"). Hover dan klik kesan?

Untuk membuat bar navigasi dengan kesan hover dan klik menggunakan jQuery, anda boleh menggunakan kaedah hover () untuk menukar penampilan item menu apabila penunjuk tetikus melayang ke atasnya, dan kaedah klik () untuk menunjukkan dan menyembunyikan menu dropdown apabila pengguna mengklik pada item menu. Berikut adalah contoh mudah:

$ (pemilih) .hover (function () { $ (ini) .css ("latar belakang warna", "kuning"); "merah jambu");
); pada item menu.

Atas ialah kandungan terperinci JQuery Pretty Pie Click Hover Menu. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!