Utilitzant 'star-rating.js' per a Star Rating amb la biblioteca JavaScript

Bloc

Utilitzant 'star-rating.js' per a Star Rating amb la biblioteca JavaScript

Utilitzant 'star-rating.js' per a Star Rating amb la biblioteca JavaScript

Descripció:

star-rating.js és una petita biblioteca de JavaScript per generar un control de puntuació d’estrelles personalitzable i de millora progressiva des d’un quadre de selecció normal amb valors numèrics.



Com s'utilitza:

1. Creeu un quadre de selecció per al vostre sistema de classificació per estrelles.

Select a rating Excellent Very Good Average Poor Terrible

2. Instal·leu i descarregueu star-rating.js.



# Yarn $ yarn add star-rating.js # NPM $ npm install star-rating.js --save

3. Carregueu els fitxers JavaScript i CSS necessaris al document.

4. Inicialitzeu la biblioteca al quadre de selecció i llest.



var starRatingControl = new StarRating( '.star-rating' );

5. Definiu el nombre màxim d'estrelles permès per seleccionar. Valor per defecte: 10.

var starRatingControl = new StarRating('.star-rating',{ maxStars: 5 });

6. Determineu si es mostrarà o no l'etiqueta al costat del control de classificació per estrelles. Valor per defecte: cert.

var starRatingControl = new StarRating('.star-rating',{ showText: false });

7. Determineu si voleu esborrar o no la qualificació fent clic a les estrelles seleccionades. Valor per defecte: cert.

var starRatingControl = new StarRating('.star-rating',{ showText: false });

8. Més opcions de configuració.

var starRatingControl = new StarRating('.star-rating',{ classname: 'gl-star-rating' initialText: 'Select a Rating' });

9. També podeu passar l'objecte d'opcions al fitxer opcions de dades a l'element seleccionat.

...

10. Destrueix i reinicia el control de classificació per estrelles.

starRatingControl.destroy(); starRatingControl.rebuild();

11. Substitueix els estils CSS per defecte a la carpeta star-rating.scss .

$star-rating-defaults: ( base-classname : 'gl-star-rating', base-display : block, base-height : 26px, font-size : 0.8em, font-weight : 600, parent : '', star-empty : url(../img/star-empty.svg), star-full : url(../img/star-full.svg), star-half : url(../img/star-half.svg), star-size : 24px, text-background: #1a1a1a, text-color : #fff, );

Gràcies per llegir! Comparteix si t'ha agradat.

#javascript #css #jQuery #Star Rating