loading

Alguns plugins, chamados rates, 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 possam ser enviados via post, e muitos outros detalhes. Precisamos pensar que plugins são ferramentas para facilitar, e o uso destes são realmente necessários, porem também precisamos ter em mente que alguns plugins necessitam funcionar em vários cenários, o que faz com que o plugin 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 <select>, podemos remove-lo e adicionar nosso rate personalizado, fazendo com que o select vire um fallback caso algo ocorra errado

Step 1: 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

// Seleciona os containers
$('.quest .content[data-element]').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'); // 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); // Remove as 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 as anteriores à ela for(i=0; i<=index; 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(); });

Step 2: Trabalhando Com O CSS

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

.ratestar .stars .star {
display: inline-block; width: 15px; height: 15px; background: #fff url(../images/sprite.png) -2px -134px no-repeat; margin-right: 3px; cursor: pointer; }

.ratestar .stars .star.selected { background: #fff url(../images/sprite.png) -23px -134px no-repeat; }

Step 3: Conclusão

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 <select> normalmente

About This Instructable

1,881views

3favorites

More by brunopgoncalves:Criando estrelas para votação com JQuery sem uso de plugins 
Add instructable to: