Hola, estoy tratando de implementar un sistema de votación como el desbordamiento de pila, he terminado el backend // toda la funcionalidad pero tengo problemas para mostrarlos en la interfaz de usuario. en este momento, las flechas se ven demasiado separadas y el número no está del todo centrado. Además, si es posible, quiero que el color de la flecha cambie cuando se hace clic/no se hace clic. Intenté esto, pero sigo ensuciando la interfaz de usuario. ¿Puede alguien por favor ayudarme con esto? gracias de antemano.
<td class="vert-align"> <div> <a href="/post/{{ post.slug }}/vote?is_up=1" class="vote"> <span class="glyphicon glyphicon-triangle-top" style="" aria-hidden="true"></span></a> <br /> //upper arrow <span class="number"><h4 id="vote_count_{{ post.slug }}">{{ post.get_vote_count }}</h4></span> <br> //number gets displayed here <a href="/post/{{ post.slug }}/vote?is_up=0" class="vote"> <span class="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></span></a> </div> //under arrow </td>También tengo un archivo js para esta votación.
function vote(node) { var thread_id = node.attr("href").split('\/')[2]; $.ajax({ url: node.attr("href"), dataType: "json", success: function(data) { $("#vote_count_"+thread_id).html(data.count); }, error: function(data) { alert(data.responseJSON.error_message); } }); } $("a.vote").on("click", function() { vote($(this)); return false; });gracias.
Para lograr este diseño con bootstrap (que puedo ver que estás usando), simplemente puedes usar esta plantilla:
<div class="row"> <div class="col-md-1" style="font-size: 30px; color:#606060; text-align: center;"> <span class="glyphicon glyphicon-triangle-top col-md-12"></span> <span class="col-md-12">0</span><!-- Number goes here --> <span class="glyphicon glyphicon-triangle-bottom col-md-12"></span> </div> </div>Si desea alternar el color de la flecha cuando se hace clic, use un método Javascript que use una var (booleana) para determinar si se hace clic en el botón o no, entonces con el método jQuery .css() puede cambiar el color del botón deseado.
Ejemplo en vivo - http://www.bootply.com/6KzWhJefif
Crearía una clase CSS y la agregaría a la etiqueta '' en la que se encuentran sus glyphicons. En esta clase puede establecer el 'tamaño de fuente' que dimensionará su iccn. También debería poder ajustar el relleno, que es lo que supongo que es su problema con la representación incorrecta. Si eso no ayuda, tendrá que usar las herramientas de desarrollo en su navegador y ver dónde necesitará ajustar el relleno.
Lo último que debe hacer es configurar su activo, pasar el mouse y enfocarse en su etiqueta pero usando la clase. Si nunca has hecho esto antes con CSS, es algo como esto.
.customClass > a:active, a:hover, a:focus{ color:#fff }Espero que esto ayude. Si necesita más detalles, hágamelo saber, pero esto debería ser todo lo que necesita para que funcione.