Share
În acest tutorial scurt, vom descrie o metodă simplă, dar utilă pentru completarea evaluărilor de stele folosind HTML, CSS și JavaScript. Iată ce vom construi:
Pentru exemplul nostru, vom avea nevoie de următoarele pictograme cu două stele:
Având în vedere acest lucru, să includeți mai întâi populara bibliotecă Font Awesome în proiectul nostru:
În ceea ce privește marcajul, avem nevoie de un tabel cu șase rânduri. Primul rând conține anteturile tabelului lea, în timp ce celelalte cinci rânduri poartă detalii despre hotel. Evident, în propriile dvs. proiecte, aceste rânduri ar putea reprezenta ceva diferit.
Iată HTML-ul necesar:
| Hotel | evaluare |
|---|---|
| Hotel A | |
| Hotel B | |
Cel mai important, observați marcajul care este inclus în cel de-al doilea td din fiecare rând:
Acesta este marcajul pe care trebuie să-l aplicăm pentru a vizualiza ratingurile de stele ale hotelurilor noastre.
Pana acum, proiectul nostru arata astfel:
În acest moment, să adăugăm câteva tabele CSS de bază, cum ar fi:
tabel marja: 0 auto; text-align: centru; colaps de frontieră: colaps; frontieră: 1px solid # d4d4d4; font-size: 20px; fundal: #fff; tabelul, tabelul tr: nth-copil (2n + 2) background: # e7e7e7; tabelul, tabelul td padding: 20px 50px; tabelul margin-bottom: 1px solid # d4d4d4;
Următorul și cel mai important pas este definirea stilurilor pentru .stele-exterior și .stele-interioare elemente. Iată CSS-ul necesar:
.stele-exterior display: inline-block; poziție: relativă; font-familie: FontAwesome; .stars-exterior :: înainte de content: "\ f006 \ f006 \ f006 \ f006 \ f006"; .stars-interior poziție: absolută; top: 0; stânga: 0; spațiu alb: acum; overflow: ascuns; lățime: 0; .stars-inner :: înainte de content: "\ f005 \ f005 \ f005 \ f005 \ f005"; culoare: # f8ce0b;
Să trecem peste câteva lucruri în acest moment.
Încărcăm pictogramele de font Awesome dorite prin CSS. Acesta este un proces în două etape. În primul rând, aplicăm Font-familie: FontAwesome la elementul părinte superior (adică,. .stele-exterior). Apoi, adăugăm pictogramele țintă pseudo-elemente prin setarea caracterelor lor unicode.
Iată unicode-ul pentru prima pictogramă:
Iată unicodul pentru cel de-al doilea:
Un alt lucru care trebuie menționat este că fiecare dintre pictogramele noastre ar trebui să apară de cinci ori într-un rând de tabel. Din acest motiv, le punem în felul următor:
.stele-exterior :: înainte de conținut: "\ f006 \ f006 \ f006 \ f006 \ f006"; .stars-inner :: înainte de content: "\ f005 \ f005 \ f005 \ f005 \ f005";
Cu CSS în loc, proiectul arată după cum urmează:
Ați observat că apare numai prima pictogramă. Dar de ce? Pentru că am definit mai devreme această regulă CSS:
.stele-interior lățime: 0;
Prin eliminarea acestei reguli, a doua pictogramă va apărea în partea superioară a primei, astfel:
Și dacă ar trebui să facem asta .stele-interioare elemente cu lățimea de 50%, am dezvălui jumătate dintre ele:
Oricum, inițial lăţime din .stele-interioare element ar trebui să fie 0 și o vom actualiza dinamic în funcție de valoarea de rating a hotelului relevant. Să vedem cum se întâmplă în secțiunea următoare.
Să presupunem că hotelurile noastre au următoarele valori de rating:
const evaluări = hotel_a: 2.8, hotel_b: 3.3, hotel_c: 1.9, hotel_d: 4.3, hotel_e: 4.74;
Rețineți că, din motive de simplitate, specificăm valorile codate greu menționate mai sus (între 0 și 5). Într-un proiect real, totuși, acestea pot fi preluate printr-o solicitare AJAX. În plus, în lumea reală, ar trebui să facem niște verificări pentru a ne asigura că valorile derivate se află în intervalul 0-5.
Deci, acum, când avem evaluările, efectuăm următoarele acțiuni:
Accentsconagua
evaluări obiect. Observați că numele fiecărei taste de obiect se potrivește cu numele clasei unui rând de tabelă. În acest fel, putem conecta o cheie de obiect la un hotel.lăţime a țintei .stele-interioare element egal cu valoarea rotunjită.Pe baza celor descrise mai sus, iată codul asociat:
const starTotal = 5; pentru (const categoria de rating) // 2 const starPercentage = (rating [rating] / starTotal) * 100; // 3 const starPercentageRounded = '$ (Math.round (starPercentage / 10) * 10)%'; // 4 document.querySelector ('. $ Rating .stars-inner') style.width = starPercentageRounded; Versiunea finală a proiectului nostru este următoarea:
Acest demo a fost testat pe diverse dispozitive și funcționează bine. Cu toate acestea, dacă întâmpinați probleme, anunțați-ne în comentariile de mai jos. În plus, după cum ați observat, folosim Babel pentru a compila codul nostru ES6 până la ES5.
În acest scurt tutorial am acoperit o metodă de completare a evaluărilor de stele. Sperăm că v-ați bucurat să lucrați la rezultatul final - ați putea chiar să profitați de această tehnică într-un proiect viitoare sau să vă îmbunătățiți pentru propriile dvs. nevoi.
Ca întotdeauna, dacă aveți întrebări, împărtășiți-le cu noi în comentariile de mai jos!
