Komponen Penarafan Bintang Elemen HTML Tunggal

Pada masa lalu, mencipta komponen tersuai memerlukan gabungan HTML, CSS dan JavaScript yang kompleks. Walau bagaimanapun, kemajuan CSS dalam beberapa tahun kebelakangan ini, membolehkan kami membina banyak komponen menggunakan hanya HTML dan CSS -memanfaatkan logik yang telah dibina ke dalam pelayar. Mengapa mencipta semula roda apabila kita boleh menggunakan semula kebanyakannya?

Komponen mudah seperti kotak pilihan, butang radio dan suis togol boleh dibuat dengan HTML dan CSS sambil bergantung pada pelayar untuk kefungsian. Tetapi kami tidak terhad kepada komponen mudah. Komponen yang lebih kompleks juga boleh dicapai dengan cara ini.

Dalam artikel ini, kami akan meneroka cara membina sistem penarafan bintang menggunakan HTML tunggal dan hanya satu arahan JavaScript.

HTML

Komponen penarafan bintang pada asasnya ialah julat nilai yang boleh dipilih oleh pengguna. Variasi mungkin termasuk 5 nilai (satu setiap bintang) atau 10 nilai (membenarkan separuh bintang), tetapi idea itu tetap sama - pengguna boleh memilih satu nilai dan hanya satu.

HTML menyediakan jenis input yang direka bentuk untuk julat, yang boleh kami gunakan sebagai asas untuk komponen kami:

<input type="range">

Seperti yang dinyatakan, input ini tidak begitu berguna. Kami perlu menentukan beberapa atribut berdasarkan spesifikasi reka bentuk kami:

1. Benarkan penilaian separuh bintang.
2. Berjulat dari 0.5 hingga 5 bintang.
3. Pemilihan lalai ialah 2.5 bintang.

Berdasarkan spesifikasi di atas, HTML akan menjadi seperti ini:

<input type="range" min="0.5" max="5" step="0.5" value="2.5">

Komponen ini ialah input julat () yang membolehkan pengguna memilih nilai antara 0.5 (min="0.5") dan 5 bintang (maks="5") dalam kenaikan 0.5 (langkah="0.5"). Nilai awal ditetapkan kepada 2.5 bintang (nilai="2.5").

Menetapkan nilai minimum 0.5 dan bukannya 0 mungkin kelihatan luar biasa, tetapi ada sebab praktikal untuknya. Membenarkan semakan 0 bintang akan menghasilkan 11 nilai berpotensi, tetapi julat secara visual mewakili 10 nilai (10 separuh bintang), mewujudkan ketidakpadanan antara kawasan boleh klik dan bintang dalam julat. Pilihan reka bentuk ini memastikan kebolehgunaan yang lebih baik dan memudahkan pelaksanaan kemudian.

Menetapkan minimum 0.5 membolehkan lebih banyak kawasan klikan semula jadi

Isu ini sebahagiannya akan diselesaikan dengan mencipta komponen menggunakan 11 butang radio. Tetapi itu akan menimbulkan isu baharu dalam reka bentuk (bagaimana kita memilih nilai 0 menggunakan tetikus?), kebolehgunaan (adakah kita harus meniru gelagat asli input julat atau gelagat asli butang radio?), dan kebolehaksesan (bagaimana kami menguruskan fokus untuk komponen secara keseluruhan?) 

Ini ialah soalan yang bagus untuk tutorial lain tentang cara membuat komponen penilaian menggunakan butang radio. Untuk tutorial ini tentang cara mencipta komponen menggunakan satu elemen HTML dan saya memilih nilai minimum 0.5 untuk mengelakkan kerumitan ini.

Kami akan menambah beberapa tweak kemudian, tetapi kod ini berfungsi sebagai titik permulaan yang kukuh. Tanpa sebarang CSS, ia secara visual menyerupai input julat standard:

Seterusnya, kami akan menambah beberapa lagi atribut. Walaupun ia mungkin kelihatan tidak penting pada masa ini, ia akan menjadi penting kemudian:

• Nama kelas: membantu mengenal pasti input julat dalam CSS.
• Gaya sebaris: dengan sifat tersuai untuk menyimpan nilai input.
• JavaScript Sebaris: satu arahan untuk mengemas kini sifat tersuai dalam gaya sebaris di atas.

Kod akhir akan kelihatan seperti ini (diformatkan untuk kebolehbacaan):

<input type="range">

Dalam bahagian seterusnya, kami akan memperhalusi peraturan ini sedikit. Kami perlu menentukan gaya untuk Chrome/Safari dan untuk Firefox, dan itu akan membawa beberapa pengulangan. Kami boleh menyelaraskan proses dengan menggunakan sifat tersuai untuk menyimpan nilai dan menerapkannya pada kedua-dua gaya.

Menggayakan trek

Trek akan menduduki keseluruhan saiz elemen, dan kemudian kami akan menggunakan kecerunan untuk mewarna bahagian yang kami perlukan.

Kita tidak perlu risau tentang lebar –ia akan menduduki keseluruhan lebar elemen–, tetapi ketinggiannya adalah cerita yang berbeza. Walaupun Chrome dan Firefox membuat ketinggian trek sepadan dengan bekas, Safari tidak. Jadi, kita perlu menunjukkan ketinggian 100% secara eksplisit.

Seterusnya kami ingin menentukan kawasan berwarna. Kami akan memanfaatkan sifat tersuai --val dan --size yang kami buat sebelum ini. Kami akan menetapkan kecerunan linear dari kiri ke kanan yang menukar warna pada titik yang ditunjukkan oleh sifat --val:

<input type="range" min="0.5" max="5" step="0.5" value="2.5">

Kami akan mengalihkan kecerunan ini ke sifat tersuai lain dalam elemen induk. Ini membolehkan kami menggunakan semula nilai untuk Chrome/Safari dan Firefox –seperti yang saya nyatakan sebelum ini… dan mungkin akan disebut kemudian.

Dengan ini, kami mempunyai segi empat tepat dengan kawasan yang lebih gelap mewakili nilai yang dipilih. Kawasan hitam berubah apabila kita mengklik atau meluncur di atas segi empat tepat, yang merupakan fungsi yang diingini, namun ia tidak mempunyai visual. Kami memerlukan topeng CSS.

Saya tidak akan menafikannya, bahagian berikut adalah hodoh. Saya memilih untuk menggunakan CSS sepenuhnya, tanpa bergantung pada imej luaran atau SVG sebaris. Anda boleh memudahkan kod dengan menggunakan mana-mana pilihan tersebut.

Kod berikut adalah untuk komponen penilaian berbentuk bintang, tetapi kami boleh menukar bentuk (cth., kepada bulatan) dengan mudah dengan menukar topeng.

Kami akan menggunakan satu set kecerunan kon untuk memotong bintang lima mata menggunakan topeng CSS. Ia mengambil kira saiz input julat jadi, selepas topeng diulang secara mendatar, kita akan mendapat lima bintang:

<input type="range">

Seperti kecerunan linear di atas, kami akan menggunakan topeng ini dalam gaya untuk Chrome/Safari dan Firefox. Untuk mengelakkan pengulangan kod, kami akan mentakrifkannya dalam sifat tersuai dalam elemen induk.

Kod akhir akan kelihatan seperti ini:

<input type="range" min="0.5" max="5" step="0.5" value="2.5">

Perhatikan bagaimana kod untuk Webkit dan Firefox adalah hampir sama. Ciri seperti mixin dalam CSS akan sangat membantu dalam situasi seperti ini –walaupun mempunyai satu standard yang disokong adalah lebih baik.

Kami juga menambah beberapa gaya (cetak-warna-laraskan: tepat) untuk memastikan komponen dicetak tepat seperti yang dipaparkan pada skrin. Ini berguna apabila bekerja dengan latar belakang, kerana ia biasanya tidak dicetak secara lalai.

Menggayakan ibu jari

Dalam kes sistem penarafan bintang ini, ibu jari tidak begitu penting. Kesan visual dicapai menggunakan trek itu sendiri. Jadi, kami akan menyembunyikan ibu jari daripada pandangan.

Kita boleh melakukannya dengan menetapkan kelegapannya kepada sifar:

<input 
  type="range"
  min="0.5"
  max="5"
  step="0.5"
  value="2.5"
 >



<h2>
  
  
  The CSS
</h2>

<p>Styling range inputs can be tricky–but not excessively complex. Unfortunately, it requires a lot of repetition due to lack of support and standardization, so we must use vendor prefixes and browser-specific pseudo-classes for the different elements of the component:</p>

• thumb: the element user can move to change the value. The pseudo-elements are ::-webkit-slider-thumb (Chrome and Safari) and ::-moz-range-thumb (Firefox)
• track: the area or line along which the thumb slides. The pseudo-elements are ::-webkit-slider-runnable-track (Chrome and Safari) and ::-moz-range-track (Firefox)

And, of course, we'll need to apply some specific styles for each browser, as they don't style the component consistently. For example, we'll need to set up heights on Safari or remove a pesky border on Firefox.

From here, the next steps are as follows:

1. Defined the size of the star-rating component.
2. Mask the track to only keep the shapes of the stars visible.
3. Define the background that only colors the selected stars.
4. Hide the thumb.

Hiding the thumb is optional and it will depend on the type of component you are building. It makes sense to hide the thumb in this star-rating system. However, in a user-satisfaction component, the thumb may be useful. You can explore different demos at the end of this article.

Styling the range element

The first step will be removing the default appearance of the range input. This can be done that by setting the the appearance:none property. All modern browsers support it, but we may want to add the vendor-prefixed versions, so it's compatible with older browsers too.

Since we have five stars, it makes sense to set the width to five times the height. aspect-ratio: 5/1 could handle this, but some browsers still have inconsistent support, so we'll "hard code" the size using a custom property.

Additionally, we want to remove the border. Firefox applies a default border to the ranges, and removing it ensures a more consistent styling across browsers.

.star-rating {
  --size: 2rem;
  height: var(--size);
  width: calc(5 * var(--size));
  appearance: none;
  border: 0;
}

Anda mungkin perasan bahawa saya tidak menggunakan CSS bersarang dalam coretan kod di atas (semasa saya menggunakannya dalam tunjuk cara di bawah). Ini kerana sarang adalah agak baharu dan disertakan dengan beberapa pengehadan: banyak penyemak imbas lama tidak menyokongnya, dan juga sesetengah penyemak imbas moden bergelut dengan elemen pseudo bukan standard –Saya melaporkan pepijat pada WebKit tentang tingkah laku ini di Safari.

Contoh

Mereka mengatakan sekeping gambar bernilai seribu perkataan. Jadi, berikut ialah beberapa contoh julat input yang boleh dikodkan menggunakan satu elemen HTML.

Mari kita mulakan dengan komponen penarafan bintang yang diterangkan dalam artikel ini:

Seterusnya, contoh yang berwarna-warni. Ia mempunyai bentuk atipikal dan ia memerlukan penggayaan semua bahagian input julat: julat itu sendiri, trek dan ibu jari:

Akhir sekali, kegemaran saya: komponen kepuasan pengguna elemen tunggal animasi. Pilih mana-mana muka yang berbeza dan mereka akan bergerak berdasarkan pemilihan:

Kesimpulan

Terdapat banyak cara berbeza untuk mengekod komponen ini. Saya telah melakukannya menggunakan HTML dan CSS sahaja (dengan satu arahan JavaScript sebaris), tetapi anda juga boleh menggunakan imej atau lebih banyak JavaScript untuk mengelakkan sebarisan hodoh itu. 

Idea utamanya ialah, dengan perubahan HTML dan CSS yang minimum, anda boleh melaraskan spesifikasi dan sistem penarafan bintang anda akan berkelakuan sedikit berbeza atau kelihatan berbeza sepenuhnya.

Komponen ini juga boleh dicipta semula menggunakan berbilang butang radio, yang akan menghapuskan keperluan untuk baris JavaScript dan beberapa CSS. Ia adalah pendekatan yang sah. Ia akan memerlukan kod tambahan untuk memastikan kebolehaksesan dan meniru gelagat lalai yang keluar-of-the-box dengan julat input. Sesetengah orang mungkin mendapati pendekatan ini lebih mudah, dan ia sememangnya boleh dilakukan.

Itulah salah satu perkara yang paling saya sukai tentang pembangunan perisian: terdapat banyak pendekatan dan pilihan yang berbeza, setiap satu dengan kebaikan dan keburukannya, dan semuanya boleh dicapai dengan indah.

Saya harap anda menikmati artikel itu. Teruskan pengekodan!

Atas ialah kandungan terperinci Komponen Penarafan Bintang Elemen HTML Tunggal. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!