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

2024 Autora: John Day | [email protected]. Última modificació: 2024-01-30 08:14

Alguns plugins, chamados rates, são fantásticos, porem eles são enormes, alguns não são estilizáveis, altres não são elements de formulário, que possam ser enviados via post, e muitos outros detalhes. Precisamos pensar que plugins são ferramentas para facilitar, eo uso d'aquests são realmente necesários, porem també precisamos ter en mente que alguns plugins necessitam funcionar en vários cenários, o que faz com que o plugin seja uma coisa genérica, conseqüentment com muits desvios, muitas configurações, i conseqüentment (novament), sejam grande.

Per compte disso, resolvi mostrar uma solution muito simples, que podeu ser fàcilment adaptat per qualquer um, i estilitzat per tots els casos.

Usant com a base a camp, podem eliminar-lo i afegir-hi una tarifa personalitzada, fent com si seleccionem un cas de fallback si alguna cosa ocorre errada

Pas 1: Criando O Javascript (JQuery)

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

Abaixo mostro comentat o que cada linha faz

// Selecciona els contenidors $ ('. Quest.content [data-element]'). Each (function (index, item) {// Recupera o seletor do input relacionado e os elements var selector = $ (item).data ('element'), stars_element = $ (''), select = $ (selector), options = select.find ('opció'), selected = select.find ('opció: seleccionat'); // Percorre com ho fan les opcions select options.each (function (option_index, option) {// Afegeix una estrella per a cada opció var star = $ (''); stars_element.append (star); // Feu clic a estrella star.on ('click', function () {// Recupera o valor clicado var val = $ (this).data ('value'); // Remove a seleção atual do select e adiciona o da estrella clicada select.find ('option'). attr ('selected', false); select.find ('option [value = "' + val + '"]'). attr ('selected', true); // Elimina com a classes de selecció per estrella $ (stars_element). find ('. star'). removeClass ('selected'); var index = $ (this).index (), elements = $ (stars_element).find ('. star'); // Addició a selecció a estrella corresponent e com ante riores à ela for (i = 0; i <= índex; i ++) {$ (stars_element).find ('. star: nth-child (' + (i + 1) + ')'). addClass ('selected'); }}); }); // Afegir un element nou i eliminar o antigo (select) select.after (stars_element); select.hide (); });

Pas 2: Trabalhando Com O CSS

Com tot criat, o CSS és més fàcil. Podem utilitzar o que per a més convenient. Estrelas, quadrados, barras. Utilitzem també sprites o imatges aïllades. Podem utilitzar estils sem imatges, enfim, vaig da necessitat de cada um. O important aqui és que podem modificar segons precisos.

.ratestar.stars.star {display: inline-block; amplada: 15 px; alçada: 15 px; fons: #fff url (../ images / sprite.png) -2px -134px sense repetició; marge-dreta: 3px; cursor: punter; }

.ratestar.stars.star.selected {

fons: #fff url (../ images / sprite.png) -23px -134px sense repetició; }

Pas 3: Conclusió

Conclusions que o desempenho d’aquest és un bom, i a facilitat d’ús és millor. Cas o usuari não tenha JS habilitado, ele ainda poderá usar o normalmente