Criando Estrelas Para Votação Com JQuery Sem Uso De Plugins: 3 стъпки

2024 Автор: John Day | [email protected]. Последно модифициран: 2024-01-30 07:52

Alguns плъгини, chamados тарифи, 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 по пощата, e muitos извън детайлите. Precisamos pensar que плъгини são ferramentas para facilitar, eo uso destes são realmente needários, porem também precisamos ter em mente que alguns плъгини needitam funcionar em vários cenários, o que faz com que o плъгин seja uma coisa genéricaes conusitou consevisio, e posledentemente (novamente), sejam grande.

Por conta disco, 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 remove-lo e adicionar nosso rate personalizado, fazendo com que o select vire um запасен caso algo ocorra errado

Стъпка 1: Criando O Javascript (JQuery)

Não à motivos убеждава de não utilizarmos o Jquery, já que o mesmo се mostra bastante estável e muito produtivo.

Abaixo mostro коментира o que cada linha faz

// Избиране на контейнери $ ('. Quest.content [data-element]'). Всеки (функция (индекс, елемент) {// Рекуперация на селектора за въвеждане на релационалност и os elementos var selector = $ (item).data ('element'), stars_element = $ (''), select = $ (selector), options = select.find ('option'), selected = select.find ('option: selected'); // Percorre както правят опциите select options.each (function (option_index, option) {// Adiciona uma estrela para cada opção var star = $ (''); stars_element.append (star); // Ao клик на estrela star.on ('click', function () {// Recupera o valor clicado var val = $ (this).data ('value'); // Премахване на 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); // Премахване като класове 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 korespondente e като ante riores à ela за (i = 0; i <= индекс; i ++) {$ (stars_element).find ('. star: nth-child ('+(i+1)+')'). addClass ('selected'); }}); }); // Добавяне на елемент ново и премахване на антиго (изберете) select.after (stars_element); select.hide (); });

Стъпка 2: Trabalhando Com O CSS

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

.ratestar.stars.star {display: inline-block; ширина: 15px; височина: 15px; фон: #fff url (../ images/sprite.png) -2px -134px без повторение; марж-дясно: 3px; курсор: показалец; }

.ratestar.stars.star.selected {

фон: #fff url (../ images/sprite.png) -23px -134px без повторение; }

Стъпка 3: Заключение

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