Criando Estrelas Para Votação Com JQuery Sem Uso De Plugins: 3 pasos
Criando Estrelas Para Votação Com JQuery Sem Uso De Plugins: 3 pasos

Tabla de contenido:

Anonim
Criando Estrelas Para Votação Com JQuery Sem Uso De Plugins
Criando Estrelas Para Votação Com JQuery Sem Uso De Plugins
Criando Estrelas Para Votação Com JQuery Sem Uso De Plugins
Criando Estrelas Para Votação Com JQuery Sem Uso De Plugins

Alguns plugins, chamados tarifas, são fantásticos, porem eles são enormes, alguns não são estilizáveis, outros não são elementos de formulário, que se pueden enviar por correo postal, e muitos outros detalhes. Precisamos pensar que plugins são ferramentas para facilitar, eo uso destes são realmente necessários, porem también precisamos ter em mente que algunos plugins necesitan funcionar em vários cenários, o que faz com que o plugin seja uma coisa genérica, consecuentemente com muitos desvios, muitas configurações, e consecuentemente (novamente), sejam grande.

Por conta disso, resolvi mostrar uma solução muito simple, que pode ser facilmente adaptada por qualquer um, e estilizada por quase todos.

Usando como base um campo, podemos eliminar-lo e adicionar nosso rate personalizado, fazendo com que o select vire um fallback caso algo ocorra errado

Paso 1: Criando O Javascript (JQuery)

Criando O Javascript (JQuery)
Criando O Javascript (JQuery)

Não à motivos convincentes de não utilizarmos o Jquery, já que o mesmo se mostra bastante estável e muito produtivo.

Abaixo mostro comentado o que cada linha faz

// Selecciona los contenedores $ ('. Quest.content [elemento-datos]'). Each (function (index, item) {// Recupera o seletor do input relacionado e os elementos var selector = $ (item).data ('element'), stars_element = $ (''), select = $ (selector), options = select.find ('option'), selected = select.find ('option: selected'); // Percorre as opções do select options.each (function (option_index, option) {// Adiciona uma estrela para cada opção var star = $ (''); stars_element.append (star); // Ao clicar na estrela star.on ('click', function () {// Recupera o valor clicado var val = $ (this).data ('value'); // Elimina una seleção atual do select e adiciona o da estrela clicada select.find ('option'). attr ('selected', false); select.find ('option [value = "' + val + '"]'). attr ('selected', true); // Eliminar como clases de seleção da estrela $ (stars_element). find ('. star'). removeClass ('selected'); var index = $ (this).index (), elements = $ (stars_element).find ('. star'); // Adiciona a seleção à estrela corresponnte e como ante riores à ela para (i = 0; i <= índice; i ++) {$ (stars_element).find ('. star: nth-child (' + (i + 1) + ')'). addClass ('seleccionado'); }}); }); // Adiciona o elemento novo e remove o antigo (select) select.after (stars_element); select.hide (); });

Paso 2: Trabalhando Com O CSS

Trabalhando Com O CSS
Trabalhando Com O CSS

Com tudo criado, o CSS é o mais facil. Podemos utilizar o que para más conveniente. Estrelas, quadrados, barras. Poremos usar también sprites o imágenes isoladas. Podemos utilizar estilos sem imagens, enfim, vai da necessidade de cada um. O importante aqui é que podemos modificar conforme precisamos.

.ratestar.stars.star {pantalla: bloque en línea; ancho: 15px; altura: 15px; fondo: #fff url (../ images / sprite.png) -2px -134px sin repetición; margen derecho: 3px; cursor: puntero; }

.ratestar.stars.star.selected {

fondo: #fff url (../ images / sprite.png) -23px -134px sin repetición; }

Paso 3: Conclusión

Concluímos que o desempenho deste é muito bom, e a facilidade de uso é melhor ainda. Caso o usuário não tenha JS habilitado, ele ainda poderá utilizar o normalmente