Bom dia,
Por favor, alguém sabe como posso criar um campo do tipo rating star?
Desde já obrigado!
Como utilizar rating star
- Você vai ver essas setas em qualquer página de pergunta. Com elas, você pode dizer se uma pergunta ou uma resposta foram relevantes ou não.
- Edite sua pergunta ou resposta caso queira alterar ou adicionar detalhes.
- Caso haja alguma dúvida sobre a pergunta, adicione um comentário. O espaço de respostas deve ser utilizado apenas para responder a pergunta.
- Se o autor da pergunta marcar uma resposta como solucionada, esta marca aparecerá.
- Clique aqui para mais detalhes sobre o funcionamento do fluig Forum!
2 respostas
-
Complementando a resposta da Julia, só um exemplo de como salvar o valor do rating star em um formulário.
Exemplo do HTML do formulário. Repare que antes de fechar a tag head eu inseri um arquivo JS personalizado.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sugestão de Pauta</title> <link rel="stylesheet" href="/style-guide/css/fluig-style-guide.min.css"> <script src="/portal/resources/js/jquery/jquery.js"></script> <script src="/portal/resources/js/jquery/jquery-ui.min.js"></script> <script src="/portal/resources/js/mustache/mustache-min.js"></script> <script src="/style-guide/js/fluig-style-guide.min.js"></script> <!-- Arquivos personalizados do formulário --> <script src="custom.js"></script> </head> <body> <div class="fluig-style-guide"> <form name="form" role="form"> <input type="hidden" id="avaliacao" name="avaliacao"> <div id="avaliacao_stars"></div> </form> </div> </body> </html>No arquivo custom.js, que fica na mesma pasta do HTML do formulário:
// Itens que serão executados somente após o DOM estar pronto $(function () { FLUIGC.stars("#avaliacao_stars", { stars: 5, value: parseInt($("#avaliacao").val()) || 0 }).on("click", function () { let index = parseInt($("#avaliacao_stars").find("i").index(this)) + 1; $("#avaliacao").val(index); }); });-
Perfeito, muito obrigado Bruno!
— Matheus Resende Furtado 17 de Jun de 2020 -
Uma dúvida, que pode parecer meio boba, mas onde posso adicionar essa parte do Script, seria parecido com quando utilizo o displayfields? Obrigado!
— Matheus Resende Furtado 17 de Jun de 2020 -
Itens do Style Guide rodam no navegador, então você precisa inserir o JS no HTML do seu formulário. Você pode fazer isso direto no HTML ou criando um arquivo e indicando no HTML que é pra puxar esse arquivo (sinceramente é o ideal). Editei a resposta com um exemplo melhor.
— Bruno Gasparetto 17 de Jun de 2020
-
-
Oi Matheus. Esse campo tem na style guide do Fluig, vê se te ajuda. ;)
-
Olá Julia.
Muito obrigado!
— Matheus Resende Furtado 16 de Jun de 2020
-