Share
In deze korte tutorial beschrijven we een eenvoudige, maar nuttige methode om sterbeoordelingen te vullen met HTML, CSS en JavaScript. Dit is wat we gaan bouwen:
Voor ons voorbeeld hebben we de volgende twee sterpictogrammen nodig:
Met dat in gedachten, laten we eerst de populaire Font Awesome-bibliotheek opnemen in ons project:
Met betrekking tot de markup hebben we een tabel met zes rijen nodig. De eerste rij bevat de tabelkoppen th, terwijl de andere vijf rijen hotelgegevens bevatten. Vanzelfsprekend kunnen deze rijen in uw eigen projecten iets anders voorstellen.
Dit is de vereiste HTML:
| Hotel | Beoordeling |
|---|---|
| Hotel A | |
| Hotel B | |
Het belangrijkst, let op de markup die is opgenomen in de tweede td van elke rij:
Dit is de opmaak die we moeten stylen om de sterbeoordelingen van onze hotels te visualiseren.
Tot nu toe ziet ons project er als volgt uit:
Laten we op dit punt wat basis-CSS aan de tabel toevoegen, zoals:
tabel marge: 0 auto; text-align: center; border-collapse: collapse; rand: 1px vast # d4d4d4; lettertypegrootte: 20px; achtergrond: #fff; table th, table tr: nth-child (2n + 2) background: # e7e7e7; table th, table td padding: 20px 50px; table th border-bottom: 1px solid # d4d4d4;
De volgende en belangrijkste stap is om de stijlen voor de te definiëren .sterren-outer en .sterren-innerlijke elementen. Dit is de benodigde CSS:
.stars-outer display: inline-block; positie: relatief; font-family: FontAwesome; .stars-outer :: before content: "\ f006 \ f006 \ f006 \ f006 \ f006"; .stars-inner positie: absoluut; boven: 0; links: 0; white-space: nowrap; overloop verborgen; breedte: 0; .stars-inner :: voor content: "\ f005 \ f005 \ f005 \ f005 \ f005"; kleur: # f8ce0b;
Laten we op dit punt een paar dingen bespreken.
We laden de gewenste Font Awesome-pictogrammen via CSS. Dit is een proces in twee stappen. Ten eerste, we zijn van toepassing font-family: FontAwesome naar het bovenste ouderelement (d.w.z.. .sterren-outer). Vervolgens voegen we de pictogrammen toe aan de doel-pseudo-elementen door hun unicode-tekens in te stellen.
Dit is de unicode voor het eerste pictogram:
En hier is de unicode voor de tweede:
Een ander ding om op te merken is dat elk van onze pictogrammen vijf keer binnen een tabelrij moet verschijnen. Om deze reden leggen we ze zo neer:
.stars-outer :: before content: "\ f006 \ f006 \ f006 \ f006 \ f006"; .stars-inner :: voor content: "\ f005 \ f005 \ f005 \ f005 \ f005";
Met de CSS op zijn plaats ziet het project er als volgt uit:
U hebt gemerkt dat alleen het eerste pictogram verschijnt. Maar waarom? Het is omdat we eerder deze CSS-regel hebben gedefinieerd:
.stars-inner width: 0;
Door die regel te verwijderen, verschijnt het tweede pictogram bovenaan de eerste, zoals dit:
En als we het zouden maken .sterren-innerlijke elementen 50% breed, zouden we de helft ervan onthullen:
Hoe dan ook, aanvankelijk het breedte van de .sterren-innerlijke element zou moeten zijn 0 en we zullen het dynamisch bijwerken afhankelijk van de ratingwaarde van het betreffende hotel. Laten we kijken hoe dat in de volgende sectie gebeurt.
Laten we aannemen dat onze hotels de volgende waarderingswaarden hebben:
const ratings = hotel_a: 2.8, hotel_b: 3.3, hotel_c: 1.9, hotel_d: 4.3, hotel_e: 4.74;
Houd er rekening mee dat we omwille van de eenvoud de eerder genoemde hardgecodeerde waarden opgeven (tussen 0 en 5). In een echt project kunnen deze echter worden opgehaald via een AJAX-verzoek. Bovendien moeten we in de echte wereld enkele controles uitvoeren om ervoor te zorgen dat de afgeleide waarden binnen het bereik van 0 - 5 liggen.
Dus nu we de beoordelingen hebben, voeren we de volgende acties uit:
Accentsconagua
ratings voorwerp. Merk op dat de naam van elke objectsleutel overeenkomt met de klassenaam van een tabelrij. Op deze manier kunnen we een objectsleutel aan een hotel koppelen.breedte van het doelwit .sterren-innerlijke element gelijk aan de afgeronde waarde.Op basis van wat we hierboven hebben beschreven, is hier de bijbehorende code:
const starTotal = 5; for (const rating in ratings) // 2 const starPercentage = (ratings [rating] / starTotal) * 100; // 3 const starPercentageRounded = '$ (Math.round (starPercentage / 10) * 10)%'; // 4 document.querySelector ('. $ Rating .stars-inner'). Style.width = starPercentageRounded; De definitieve versie van ons project is de volgende:
Deze demo is op verschillende apparaten getest en werkt goed. Als u echter problemen ondervindt, kunt u me dit laten weten in de onderstaande opmerkingen. Bovendien gebruiken we, zoals je misschien hebt opgemerkt, Babel om onze ES6-code te compileren naar ES5.
In deze korte zelfstudie hebben we een methode besproken voor het invullen van sterbeoordelingen. Hopelijk heb je het leuk gevonden om naar het eindresultaat toe te werken - je kunt zelfs van deze techniek profiteren in een aankomend project, of het verbeteren voor je eigen behoeften.
Zoals altijd, als u vragen heeft, kunt u deze met ons delen in de onderstaande opmerkingen!
