Kawalan penarafan bintang dengan jQuery

Takeaways Key

Artikel ini menyediakan panduan terperinci tentang cara membina widget penarafan bintang interaktif menggunakan jQuery. Ia melibatkan membuat kumpulan butang radio yang digantikan oleh ikon bintang, yang pengguna boleh berinteraksi untuk memberikan penarafan.
Sistem penarafan bintang direka untuk menjadi papan kekunci yang boleh diakses dan membolehkan penilaian separuh bintang. Ini dicapai dengan menggunakan imej sprite CSS dan memanipulasi sifat kedudukan latar belakang untuk memaparkan keadaan yang berbeza dari bintang.
Sistem penarafan direka untuk menggalakkan penglibatan pengguna dan pemilihan penarafan yang bijak dengan mengehadkan skala kepada empat bintang bukannya lima, dengan itu menghapuskan pilihan tengah. Ia juga membolehkan penilaian separuh bintang untuk ketepatan yang lebih besar.
Sistem menggunakan jQuery untuk mengendalikan interaksi pengguna, termasuk melayang dan mengklik pada bintang. Apabila bintang diklik, nilai butang radio yang sepadan dikemas kini, dan bintang dan semua bintang terdahulu diserlahkan. Sistem ini juga melaksanakan pengendalian ralat untuk menguruskan isu -isu yang berpotensi.

Buku yang baru dikeluarkan kami,

jQuery: Novice to ninja , mengandungi banyak penyelesaian siap sedia digunakan, dan mengajar anda kedua-dua konsep asas dan lebih maju yang lebih maju ketika anda maju. Sebagai penyanyi, inilah petikan di mana Craig Sharkie menunjukkan kepada kami bagaimana untuk membina widget penarafan bintang yang mantap dan canggih menggunakan jQuery. Ia boleh diakses oleh papan kekunci, dan membolehkan penarafan separuh bintang. Di sini.

Kawalan penarafan bintang

Pelanggan kami ingin meningkatkan penglibatan pengguna, dan membantu penggunanya merasa penting. Kami telah memikirkan perkara ini sedikit, dan melemparkannya idea penarafan bintang -selepas semua, orang tidak suka lebih daripada untuk menyatakan perasaan mereka melalui tugasan bintang emas. Kawalan baru yang berkilat kami akan muncul seperti yang ditunjukkan dalam Rajah 1, "Kawalan Penilaian Bintang". Ia sempurna, kerana penyemak imbas menguatkuasakan satu pilihan dari kumpulan. Anda boleh memilih julat yang anda mahu pengguna dipilih, hanya dengan menambahkan bilangan butang yang betul:

Contoh 1. BAB_07/11_STAR_RATINGS/INDEX.HTML (Petikan)

<div >  <label><input  name="rating" type="radio" value="1"/>1 Star</label>  <label><input  name="rating" type="radio" value="2"/>2 Stars</label>  <label><input  name="rating" type="radio" value="3"/>3 Stars</label>  <label><input  name="rating" type="radio" value="4"/>4 Stars</label>  ⋮</div>

Bahagian yang sukar, tentu saja, menggantikan butang radio ini dengan kawalan bintang kami. Anda boleh cuba bergulat dengan menggayakan kawalan HTML dengan hanya CSS, tetapi ia akan menjadi lebih mudah dan lebih fleksibel jika anda memecah kawalan ke dalam dua bahagian: model asas yang menyimpan data, dan pandangan berkilat dengan bintang. Model ini, dalam kes ini, adalah kumpulan butang radio HTML yang asal. Pelan serangan kami adalah untuk menyembunyikan butang radio, dan memaparkan senarai pautan yang telah kami tambahkan melalui jQuery, gaya untuk kelihatan seperti bintang. Berinteraksi dengan pautan akan menukar butang radio yang dipilih. Pengguna tanpa JavaScript hanya akan melihat butang radio sendiri, yang baik oleh kami. Dengan cara ini kawalan kami hanya akan bergantung pada satu imej (ditunjukkan dalam Rajah 2, "Star CSS Sprite Image"), yang menjimatkan permintaan HTTP dan memudahkan pereka grafik kami untuk mengedit. Untuk bergerak di antara keadaan imej yang berbeza, kita hanya perlu mengemas kini sifat kedudukan latar belakang:

Contoh 2. BAB_07/11_STAR_RATINGS/STARS.CSS (Petikan) Kenapa? Psikologi Pengguna! Menawarkan jalan tengah orang dan mereka akan mengambilnya; Dengan tidak mempunyai pertengahan, kami membuat pengguna berfikir sedikit lebih lanjut mengenai pemilihan mereka. Kami mencapai hasil yang lebih baik, dan kami akan dapat mempersembahkan pengguna dengan kandungan terbaik (seperti yang dipilih oleh mereka)! Ini dilaksanakan melalui ilusi optik -anda mungkin menyedari bahawa imej bintang kami dicincang separuh. HTML kami akan mengandungi lapan butang radio, dan mereka masing -masing bernilai setengah bintang. Terdapat dua bahagian untuk kod untuk mengubah lapan butang radio kami menjadi empat bintang. Pertama, fungsi CreateStars akan mengambil bekas dengan butang radio dan menggantikannya dengan pautan bintang. Setiap bintang akan ditambah dengan pengendali acara yang betul (dalam kaedah Addhandlers) untuk membiarkan pengguna berinteraksi dengan kawalan. Inilah kerangka objek yang membintangi kami:

Contoh 3. BAB_07/11_STAR_RATINGS/script.js (petikan)

Pautan ini adalah apa yang kita akan gaya untuk kelihatan seperti bintang. Ia juga akan menyembunyikan elemen bentuk asal, jadi pengguna hanya melihat bintang -bintang indah kita:

Contoh 4. BAB_07/11_STAR_RATINGS/script.js (petikan)

<div >  <label><input  name="rating" type="radio" value="1"/>1 Star</label>  <label><input  name="rating" type="radio" value="2"/>2 Stars</label>  <label><input  name="rating" type="radio" value="3"/>3 Stars</label>  <label><input  name="rating" type="radio" value="4"/>4 Stars</label>  ⋮</div>

kita mulakan dengan membuat bekas untuk pautan baru (elemen div); Kami akan mencipta satu pautan baru untuk setiap butang radio yang kami ganti. Selepas memilih semua butang radio dengan penapis pemilih radio, kami mengambil setiap penarafan item dan menggunakannya untuk membuat elemen hiperpautan. Seperti yang telah kami lakukan sebelum ini dalam buku ini, kami menggunakan pengendali modulus (%) untuk menentukan sama ada indeks itu atau ganjil. Jika indeks ganjil, kami akan menambah kelas penarafan-kanan; Ini menjadikan pautan kelihatan seperti sebelah kanan bintang.

Setelah pautan kami siap, kami menyampaikannya kepada kaedah Addhandlers -ini adalah di mana kami akan melampirkan peristiwa yang diperlukan untuk berfungsi. Kemudian, kami memasukkannya ke dalam bekas senarai. Sebaik sahaja ia berada di dalam bekas, kita melihat jika butang radio semasa dipilih (kami menggunakan: penapis borang yang diperiksa). Jika ia diperiksa, kami mahu menambah kelas penarafan ke setengah bintang ini, dan kepada semua bintang separuh sebelum itu. Mana -mana pautan dengan kelas penarafan yang dilampirkan akan diberikan imej Gold Star (yang akan membolehkan pengguna melihat penarafan semasa). Tindakan pemisahan memilih

setiap

saudara sebelum pemilihan semasa (tidak seperti tindakan prev, yang hanya memilih adik beradik sebelumnya). Sebagai contoh kami, kami ingin menambah kelas kepada adik -beradik sebelumnya

dan

pemilihan semasa. Untuk berbuat demikian, kami menggunakan tindakan dan diri sendiri, yang hanya termasuk pemilihan asal dalam pemilihan semasa. Sekarang kita mempunyai semua pautan yang akan menjadi emas, jadi kita boleh menambah kelas. JQuery 1.4 juga telah memperkenalkan dua kaedah teman baru: Prevuntil dan Nextuntil. Ini dipanggil dengan pemilih, dan akan mengimbas adik -beradik elemen (ke hadapan atau ke belakang, bergantung pada yang anda gunakan) sehingga mereka memukul elemen yang sepadan dengan pemilih. akan memberi anda semua elemen yang duduk di antara H2 pertama di halaman dan H2 berikut dalam elemen kontena yang sama. Jadi, sebagai contoh, jika kita telah menulis Nextuntil ('H2', 'Div'), ia hanya akan mengembalikan unsur -unsur div antara pemilihan semasa kami dan H2 seterusnya.

Selepas melakukan semua kerja keras ini, kami kini boleh menambah senarai pautan baru ke kawalan, dan menyingkirkan butang asal. Sekarang pengguna hanya akan berinteraksi dengan bintang -bintang:

Contoh 5. BAB_07/11_STAR_RATINGS/script.js (petikan)

<div >  <label><input  name="rating" type="radio" value="1"/>1 Star</label>  <label><input  name="rating" type="radio" value="2"/>2 Stars</label>  <label><input  name="rating" type="radio" value="3"/>3 Stars</label>  <label><input  name="rating" type="radio" value="4"/>4 Stars</label>  ⋮</div>

Kawalan kelihatan seperti ia mengambil bentuk sekarang -tetapi ia tidak melakukan apa -apa lagi. Kita perlu melampirkan beberapa pengendali acara dan menambah beberapa tingkah laku. Kami berminat dengan tiga acara. Apabila pengguna melayang di atas bintang, kami ingin mengemas kini CSS Sprite untuk menunjukkan keadaan hover; Apabila mereka berpindah, kami mahu mengembalikan CSS Sprite ke keadaan asalnya; Dan apabila mereka mengklik, kami ingin membuat pemilihan emas:

Contoh 6. BAB_07/11_STAR_RATINGS/script.js (petikan)

.stars div a {  background: transparent url(sprite_rate.png) 0 0 no-repeat;  display: inline-block;  height: 23px;  width: 12px;  text-indent: -999em;  overflow: hidden;}.stars a.rating-right {  background-position: 0 -23px;  padding-right: 6px;}.stars a.rating-over { background-position: 0 -46px; }.stars a.rating-over.rating-right { background-position: 0 -69px; }.stars a.rating { background-position: 0 -92px; }.stars a.rating.rating-right { background-position: 0 -115px; }

lakukan dalam persediaan. Apabila melayang, kami meliputi pangkalan kami dan mengeluarkan kelas penarafan dari semua pautan. Itu melayang dijaga. Kami melakukan ini dengan memilih butang radio yang betul dengan: penapis radio dan pemilih atribut, yang mencari butang radio yang nilainya sepadan dengan teks pautan semasa. Pertama, kita membersihkan kelas penarafan dari mana -mana pautan yang kini memilikinya, kemudian tambahkannya ke semua pautan pada dan sebelum pengguna dipilih. Sentuhan terakhir adalah untuk membatalkan tindakan lalai pautan, jadi klik bintang tidak menyebabkan ia membakar perubahan lokasi. Ingatlah untuk merebut PDF sampel percuma anda, yang mengandungi contoh ini serta 150 muka surat yang lebih baik daripada bahan pembelajaran yang lebih baik. Jika anda sudah dijual, anda boleh pergi ke hadapan dan membeli buku terus dari Sitepoint.

Soalan Lazim (Soalan Lazim) Mengenai Penarafan Bintang JQuery

bagaimana saya boleh menyesuaikan penampilan penarafan bintang?

Menyesuaikan penampilan penarafan bintang dapat dicapai dengan mengubah suai CSS. Anda boleh menukar warna, saiz, dan jarak bintang. Sebagai contoh, untuk menukar warna, anda boleh menggunakan harta 'warna' di CSS anda. Untuk menukar saiz, anda boleh menyesuaikan harta 'saiz font'. Ingatlah untuk mensasarkan kelas tertentu penarafan bintang anda di CSS anda untuk menggunakan perubahan ini.

Bolehkah saya menggunakan penilaian separuh bintang dalam penarafan bintang jQuery? Ini boleh dicapai dengan menetapkan pilihan 'separuh' yang benar apabila memulakan penarafan bintang. Ini membolehkan penarafan yang lebih tepat, memberikan pengguna keupayaan untuk menilai dengan separuh bintang.

Bagaimana saya boleh menyimpan penilaian pengguna? Skrip ini kemudiannya boleh menyimpan penarafan dalam pangkalan data. Apabila halaman dimuatkan, skrip boleh mengambil penarafan yang disimpan dan memaparkannya. Ini boleh dilakukan dengan menggunakan skrip sisi pelayan yang mengambil semua penilaian dari pangkalan data, mengira purata, dan kemudian menghantar purata ini kembali ke skrip sisi klien. Ini berguna jika anda mahu memaparkan penarafan tetapi tidak mahu pengguna dapat mengubahnya. Untuk melumpuhkan penarafan bintang, anda boleh menetapkan pilihan 'readonly' untuk benar apabila memulakan penarafan bintang.

Bagaimana saya boleh menggunakan ikon bintang yang berbeza? Pilihan ini menerima nama ikon yang anda mahu gunakan. Ikon harus menjadi sebahagian daripada set ikon fon yang termasuk dalam projek anda. Sekiranya anda ingin menggunakan penarafan bintang tanpa jQuery, anda perlu mencari penyelesaian yang berbeza, seperti perpustakaan penarafan bintang JavaScript yang tulen. Sebagai contoh, jika contoh penarafan bintang anda disimpan dalam pembolehubah bernama 'penarafan', anda boleh menetapkannya semula dengan 'rating.rating (0)'. Penarafan bintang boleh dikaitkan dengan medan input tersembunyi dalam bentuk. Apabila pengguna mengemukakan borang, nilai penarafan bintang akan dimasukkan ke dalam data borang. Acara ini dicetuskan apabila terdapat ralat dalam penarafan bintang, seperti apabila nilai tidak sah ditetapkan. Anda boleh mendengar acara ini dan kemudian mengendalikan ralat dengan cara yang sesuai untuk permohonan anda.

Atas ialah kandungan terperinci Kawalan penarafan bintang dengan jQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!