Comment définir une largeur fixe sur les boutons d'un jeu de boutons jQuery?

Question

J'ai un ensemble de boutons, et je voudrais définir la largeur de chaque bouton afin qu'ils puissent avoir la même taille (ie si j'ai 4 boutons de 25% chacun de l'élément)

Fondamentalement, le site a une table sur la gauche, et dans cette table j'ai 4 options. En ce moment, il n'utilise pas 100% de la colonne de gauche, donc c'est mauvais. Je cherche à faire en sorte que l'ensemble de boutons prenne 100% de la colonne, et chaque bouton partage 25% de l'espace fixe.

J'ai essayé d'utiliser .css ('width') pour chaque élément de bouton, mais cela ne fait pas de différence.

Mon code ressemble à quelque chose comme ceci:

<script type='text/javascript'> 
    $(function() { $("#task-sort").buttonset(); }); 
</script> 

<div id='task-sort'> 
    <input type='radio' name='task-sort' id='sort_all' checked><label for='sort_all'>All</label> 
    <input type='radio' name='task-sort' id='sort_inc'><label for='sort_inc'>Incomplete</label> 
    <input type='radio' name='task-sort' id='sort_com'><label for='sort_com'>Completed</label> 
</div> 

Answer 1

Vous pouvez le faire comme ceci:

$("#task-sort").buttonset().find('label').css('width', '25%');​​​​​​​​​​​​​​​​ 

Après .buttonset() votre code html ressemble à ceci:

<div id="task-sort" class="ui-buttonset"> 
    <input type="radio" name="task-sort" id="sort_all" checked="" class="ui-helper-hidden-accessible"> 
    <label for="sort_all" class="ui-state-active ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left" aria-pressed="true" role="button" aria-disabled="false"><span class="ui-button-text">All</span></label> 
    <input type="radio" name="task-sort" id="sort_inc" class="ui-helper-hidden-accessible"> 
    <label for="sort_inc" aria-pressed="false" class="ui-button ui-widget ui-state-default ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">Incomplete</span></label> 
    <input type="radio" name="task-sort" id="sort_com" class="ui-helper-hidden-accessible"> 
    <label for="sort_com" aria-pressed="false" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-right" role="button" aria-disabled="false"><span class="ui-button-text">Completed</span></label> 
</div> 

Ensuite, vous juste besoin de définir la largeur sur ces nouveaux éléments <label> pour obtenir l'effec t vous voulez, you can try out a demo here.