Componente de clasificación de estrellas interactiva con JavaScript puro-rater-JS

Vista prévia

Descripción

rater-JS es un componente simple pero personalizable calificación de estrellas escrito en JavaScript puro.

Fácil de usar, táctil y sin dependencias. Es compatible con el explorador y node. js.

Installation & download:

# NPM
$ npm install rater-js --save

Funcionamiento

Importa el rater-JS.

// ES 6
import rater from 'rater-js';

// CommonJS:
const rater = require('rater-js');

O directamente incluir la biblioteca rater-JS en la página.

<script src="/path/to/index.js"></script>

Cree un contenedor en el que desee representar el control de clasificación por estrellas.

<div id="rater"></div>

JavaScript para crear una nueva instancia de clasificación por estrellas.

var myRating = raterJs( {


element:document.querySelector("#rater"),


rateCallback:function rateCallback(rating, done) {



this.setRating(rating);



 done();


 }
});

Personalice el control de clasificación por estrellas con los siguientes parámetros opcionales.

var myRating = raterJs({



// shows a rating tooltip


showToolTip: true,



// the number of stars


max: 5,



// star size


starSize: 16,



// text to show when disabled.


disableText: 'Thank you for your vote!',



// Text to show when hover over stars.


ratingText: '{rating}/{maxRating}',



// displayed while user is rating but done not called yet.


isBusyText: null,



// between 0 and 1


step: undefined,



// reverse the ratings


reverse: false,



// is readonly?


readOnly: false



});

Available methods to control the star rating.

// disable
myRating.disable();

// enable
myRating.enable();

// set the rating value
myRating.setRating(rating:number);

// get the rating value
myRating.getRating();

// clear the rating
myRating.clear();

// removes event handlers
myRating.dispose();

// gets the element
myRating.element();

Override the default CSS rules to customize the star rating controls.

.star-rating {

width: 0;

position: relative;

display:inline-block;

background-image: url(star_0.svg);

background-position: 0 0;

background-repeat: repeat-x;
}

.star-rating[data-title]:hover:after {

content: attr(data-title);

padding: 4px 8px;

color: #333;

position: absolute;

left: 0;

top: 100%;

z-index: 20;

white-space: nowrap;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

border-radius: 5px;

-moz-box-shadow: 0px 0px 4px #222;

-webkit-box-shadow: 0px 0px 4px #222;

box-shadow: 0px 0px 4px #222;

background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);

background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));

background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);

background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);

background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);

background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}

.star-rating .star-value {

height: 100%;

position: absolute;
}

.star-rating .star-value {

position: absolute;

height: 100%;

width: 100%;

background: url('./star_1.svg') ;

background-repeat: repeat-x;
}

Registro de cambios

v1.0 (03/17/2019)

• Agregado soporte para idiomas táctiles y de derecha a izquierda

02/12/2019

• corrección de modo que la calificación no puede ser mayor que Max

02/07/2019

• hacer que el tacto trabaje con reversa

01/27/2019

• usar el título en lugar del título de los datos

01/13/2019

• método claro

01/08/2019

• método Add para borrar/restablecer el valor del rater

05/26/2018

• v0.5.7