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

2024 Autor: John Day | [email protected]. Última modificação: 2024-01-30 11:38

Alguns plugins, chamados taxas, são fantásticos, porem são enormes, alguns não são estilizáveis, outros não são elementos de formulário, que podem ser enviados via post, e muitos outros detalhes. Precisamos pensar que os plug-ins são ferramentas para facilitar, e o uso são fornecidos, porem também precisa ter em mente que alguns plugins funcionam em vários cenários, o que faz com que o plug-in seja uma coisa genérica, consequentemente com muitos desvios, muitas configurações, e consequentemente (novamente), sejam grande.

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

Usando como base um campo, podemos remover-lo e adicionar nosso índice personalizado, fazendo com que o selecione vire um fallback caso algo ocorra errado

Etapa 1: Criando O Javascript (JQuery)

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

Abaixo mostro comentado o que cada linha faz

// Seleciona os containers $ ('. Quest.content [data-element]'). Each (function (index, item) {// Recupera o seletor do input relacionado e os elementos var selector = $ (item).data ('elemento'), stars_element = $ (''), select = $ (seletor), 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'); // Remove a 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); // Remover como classes 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 correspondente e como ante riores à ela para (i = 0; i <= índice; i ++) {$ (stars_element).find ('. star: nth-child (' + (i + 1) + ')'). addClass ('selected'); }}); }); // Adiciona o elemento novo e remove o antigo (select) select.after (stars_element); select.hide (); });

Etapa 2: Trabalhando Com O CSS

Com tudo criado, o CSS é o mais facil. Podemos usar o que for mais conveniente. Estrelas, quadrados, barras. Poremos usar tambem sprites ou imagens analisadas. Podemos usar estilos sem imagens, enfim, vai da necessidade de cada um. O importante aqui é que podemos modificar conforme precisamos.

.ratestar.stars.star {display: inline-block; largura: 15px; altura: 15px; plano de fundo: #fff url (../ images / sprite.png) -2px -134px sem repetição; margem direita: 3px; cursor: ponteiro; }

.ratestar.stars.star.selected {

plano de fundo: #fff url (../ images / sprite.png) -23px -134px sem repetição; }

Etapa 3: Conclusão

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