Criando Estrelas Para Votação Com JQuery Sem Uso De Plugins: 3 שלבים

2024 מְחַבֵּר: John Day | [email protected]. שונה לאחרונה: 2024-01-30 09:15

תוספי Alguns, שיעורי צ'אמדו, סאו פנטסטיקוס, פורם אלס סאו ענק, אלגונים נאו סאו אסטילייזיים, outros não são elementos de formulário, que possam ser servivi via post, e muitos outros detalhes. תוספי התוספים יכולים לעזור לנו, eo uso destes são realmente needsá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, consequente com comes, e consequentemente (novamente), sejam grande.

For conta disso, resolvi mostrar uma solução muito דוגמאות, 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 fallback caso algo ocorra errado

שלב 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

// מיכלים נבחרים של $ ('. Quest.content [data-element]'). כל אחד (פונקציה (אינדקס, פריט) {// שחזור או בחירה של קלט הקלטות והסברים של selos = $ (item).data ('element'), stars_element = $ (''), select = $ (selector), options = select.find ('option'), select = select.find ('option: selected'); // Percorre כפי שאפשר לעשות בחר options.each (פונקציה (option_index, option) {// Adiciona uma estrela para cada opção var star = $ (''); stars_element.append (star); // Ao clicar and estrela star.on ('click', function () {// Recupera o valor clicado var val = $ (this).data ('value'); // הסר את האפשרות שתבחר את האפשרות clicada select.find ('option'). attr ('נבחר', שקר); select.find ('option [value = "' + val + '"]'). attr ('נבחר', נכון); // הסר כ- classes de seleção da estrela $ (stars_element). מצא ('כוכב'). removeClass ('נבחר'); var index = $ (זה).index (), אלמנטים = $ (כוכבים_אלמנט).find ('. כוכב'); // Adiciona a seleção à estrela correspondente ה כמו אנת riores à ela for (i = 0; i <= index; i ++) {$ (stars_element).find ('. star: nth-child ('+(i+1)+')'). addClass ('נבחר'); }}); }); // Adiciona o elemento novo e remove o antigo (select) select.after (stars_element); select.hide (); });

שלב 2: Trabalhando Com O CSS

Com tudo criado, o CSS é o mais facil. פודמוס שימושי או מתאים למיני נוחות. אסטרלס, קוואדרדוס, באראס. Poremos usar tambem sprites ou imagens isoladas. Podemos utilizar estilos sem imagens, enfim, vai da necessidade de cada um. חשוב שתוכלו לשנות את התצורה במדויק.

.ratestar.stars.star {display: inline-block; רוחב: 15 פיקסלים; גובה: 15 פיקסלים; רקע: #fff url (../ images/sprite.png) -2px -134px ללא חזרה; שוליים-ימין: 3 פיקסלים; סמן: מצביע; }

.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 or normalmente