Discussion :

[Oribiahn]

Bonjour,

[Edit 2010-10-16 01:25 par danielhagnoul] Widget UI Button
---------------------------

Je découvre JQuery et JQuery UI. Dans ce dernier, je souhaite dans mon script cocher une checkbox.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
function Check()
{
        $('#check1').button("option","checked", true);
}

Là, ma chexkbox est bien considéré comme coché. Mais le skin ne change pas. La classe ui-state-active qui devrais être:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<input type="checkbox" id="check1" class="ui-helper-hidden-accessible"/>
<label for="check1" aria-pressed="false" class="ICI ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left ui-state-hover" role="button" aria-disabled="false">
<span class="ui-button-text">B</span>
</label>

N'est pas appliqué. je lutte depuis plusieurs heures sur ce pb, quelqu'un a t'il était dans la même impasse?

Je pense qu'il faut faire un $('#check1').addclass("ui-state-active") mais il ne l'applique pas au label. Comment lui dire que c'est au label sachant que je n'ai pas d'ID avec.

[Arnaud F.]

Bonjour,

Pourquoi passer par button pour changer la propriété de ce qui est censé être une checkbox?

[Oribiahn]

Ben, c'est à cause de JQuery UI

Documentation ici

Le truc me plait bien, mais j'avoue ne pas bien comprendre leur doc, je dois rater un petit quelques chose qui m'empêche par programmation de cocher des cases.

[danielhagnoul]

Bonsoir

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
// même avec le widget button, checked est toujours un attribut
$("#check1").attr("checked","checked"); // pour sélectionner
// $("#check1").attr("checked",""); // pour déselectionner

[Oribiahn]

Merci danielhagnoul, mais j'avais déjà essayé cette syntaxe.

Ce n'est pas probant. En gros la valeur du checker devient true mais il ne prend pas le skin d'un bouton enfoncé.

La classe ui-state-active n'est toujours pas là où elle devrait être.

[danielhagnoul]

Bonjour

Comme il s'agissait de ma première question sur le widget button 1.8.5, j'avais bien entendu testé avant de donner la réponse et le bouton changeait d'état. Vous n'auriez pas oublié d'inclure les styles UI ?

[Oribiahn]

Normalement le soucis ne vient pas de là, en effet quant je clique manuellement sur une des checkbox elle prend le design d'un bouton enfoncé comme souhaité.
Comme je le dis dans le message de tête, c'est la classe ui-state-active qui est manquante sur le label. La fonction officielle

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("#check1").attr("checked","checked");

ne semble pas la rajouter.

En fait, j'ai repris l'exemple du site

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<?php
    $this->placeholder("Titre")->set("Documentation et Spécifications des Omicrons");
?>
 
<meta charset="utf-8">
	<script>
	$(function() {
		$( "#check" ).button();
		$( "#format" ).buttonset();
	});
 
        function Check()
        {
            alert(1);
            $("#check2").attr("checked","checked");
        }
 
	</script>
	<style>
	#format { margin-top: 2em; }
	</style>
 
<div class="demo">
 
<input type="checkbox" id="check" onclick="Check()")/><label for="check">Toggle</label>
 
<div id="format">
	<input type="checkbox" id="check1" /><label for="check1">B</label>
	<input type="checkbox" id="check2" /><label for="check2">I</label>
	<input type="checkbox" id="check3" /><label for="check3">U</label>
</div>
 
</div><!-- End demo -->
 
 
 
<div class="demo-description">
<p>A checkbox is styled as a toggle button with the button widget. The label element associated with the checkbox is used for the button text.</p>
<p>This demo also demonstrates three checkboxes styled as a button set by calling <code>.buttonset()</code> on a common container.</p>
</div><!-- End demo-description -->

et mon "I" n'est pas enfoncé.

[spy74]

je rencontre le même problème es que quelqu'un a trouvé une autre solution que de modifier manuellement tout les attributs bouton en incluant manuellement les classes css ?

[JmRy66]

Salut à tous,

Il y a cette solution :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
/* Initialisation du groupe de checkbox */
$("#radiobar").buttonset();
$('#radio1').bind('click', function() { $(this).attr('checked', true).trigger('change'); fntPerso(); } );
$('#radio2').bind('click', function() { $(this).attr('checked', true).trigger('change'); fntPerso(); } );

/* Activation d'un bouton au chargement de la page */
$("#radio2").trigger('click');

Enjoy

[spy74]

merci pour l'info

[Morphinof]

Comme dit dans la doc il faut utiliser button('refresh') après une modification sur les boutons, il faudra donc :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$('#mon-boutton-radio-1').attr('checked', true);
 
puis $('#mon-boutton-radio-1').button('refresh');

et la ça marche.