web-dev-qa-db-fra.com

Comment changer l'état du commutateur jquery mobile flip à partir du code

J'ai quelques commutateurs à bascule jQuery Mobile sur mon application Android/iPad et je dois Modifier leur état (activé/désactivé) de manière dynamique, à l'aide de JavaScript. Je cherchais une solution ici, ( Modifiez la valeur du basculement de manière dynamique avec jQuery Mobile ) et j'ai essayé plusieurs méthodes (.val('on'), .slider('enable')...) mais il semble que le contrôle ne fonctionne pas du tout.

Existe-t-il une solution à ce problème? Comment puis-je changer le code de l'état du commutateur à bascule?

javascriptjqueryandroidjquery-mobile
16
Gabriel Mendez

J'ai examiné la page que vous avez postée et j'ai confirmé que la solution:

$('selector').val('value').slider('refresh');

fonctionne vraiment. Assurez-vous que "sélecteur" référence votre élément select et que "valeur" est une valeur que vous avez définie pour l'élément d'option que vous souhaitez activer.

Je l'ai confirmé en visitant http://jquerymobile.com/demos/1.0.1/docs/forms/switch/index.html , puis avec la console de Firebug en entrant la ligne:

$("#flip-b").val('no').slider('refresh');

Le second curseur affiché sur la page est passé de oui à non.

26
Pizano

Pour JQuery 1.4 ou version ultérieure, si vous souhaitez basculer un commutateur de manière dynamique

$("#flip").val('on').flipswitch('refresh');

Assurez-vous que votre data-role est interrupteur à levier pour que cela fonctionne.

Bonne chance ! 

5
Shubhral Y Kumar

Il y a deux types de commutateur à bascule , select based et case à cocher based. Pour définir un select widget basé sur, utilisez la construction .val ()

$("#myFlip").val("on").flipswitch( "refresh" ) ;

où "on" est l'une des valeurs d'option de l'élément select.

Pour définir un widget case à cocher , utilisez la construction .prop ()

$("#myFlip").prop( "checked", true ).flipswitch( "refresh" ) ;

où true est vrai ou faux. (Merci à Jeremy Hill pour l'allusion).

BTW, j'ai essayé la construction `.flipswitch (" option "," vérifié ", true) sans aucune chance.

Notez qu’il existe également un commutateur - similaire au sélecteur basé sur - flipswitch .

4
dbagnara

Est-ce que ça marche:

JS

var fts = $('#flipMe');
fts.val('on');
fts.slider('refresh');

HTML

<label for="flip-a">Select slider:</label>
<select name="slider" id="flipMe" data-role="slider">
    <option value="off">Off</option>
    <option value="on">On</option>
</select>
3
Phill Pafford

Je ne pouvais pas faire fonctionner la partie 'flipswitch', donc le traiter comme une case à cocher normale pourrait fonctionner pour vous (ceci est pour jQuery Mobile 1.4.3):

$('input[name="my-flipswitch-name"]').prop('checked', true).trigger('click').trigger('change');
0
Jeremy Hill

La réponse de @ Pizano ci-dessus a fonctionné pour moi.

Moi aussi j'avais ce problème. Dans mon cas, il me manquait le très important ".slider ('refresh')"

Cordialement, Steve

0
sstringer

Il existe deux manières de créer des commutateurs (basés sur les cases à cocher et basés sur la sélection), mais vous pouvez uniquement modifier l'état de manière dynamique avec la méthode basée sur la sélection.

Jquery pour changer d'état: 

$("#mySwitch").val('no').flipswitch('refresh');

Méthode basée sur la sélection: 

<select name="mySwitch" id="mySwitch" data-role="flipswitch" >
   <option value="no">No</option>
   <option value="yes">Yes</option>
</select>

Basé sur les cases à cocher: (ne peut pas changer d'état dynamiquement)  

<input type="checkbox" id="mySwitch" data-role="flipswitch">
0
user2755541