Salutation à tous

J'ai chercher le moyen d'avoir un input, avec un effet slide sur ce dernier, afin d'avoir un bouton On / Off pour activer ou désactiver une option dans un panel d'admin.

Voici le bouton tel quel

Le hic, c'est que j'ai pas les compétences et le savoir nécessaire pour aller plus lion.

J'aurais aimer que lorsqu'on affiche la page, le bouton se position sur le status par défaut de l'option (enum '0', '1' en Bdd sur le champ en question).
Ensuite, lors du clique sur ce dernier, on change dans la Bdd l'état du status, et donc de l'affichage.

Pourriez vous m'aider SvP, j'ai que très peux de connaissance en Js et encore moins en Jquery, et c'est pas faut d'avoir regarder ici, mais je n'y arriverais pas tout seul.

J'ai plus de connaissances en Php et Html que Js (je compte d’ailleurs apprendre tout ça, mais avec le boulot, pas facile)

Je vous remercie de votre aide, je pense que c'est pas compliquer, mais bon, pour moi ça reste de l'extra terrestre ^^

Je tiens à signaler que je sais le faire avec les checkbox et php tout de même ^^.

Merci beaucoup

cordialement

2 réponses


Nairolf
Réponse acceptée

Déjà tu dois créer un script PHP pour ta BDD, avec une condition que si le bouton est sur 0 alors la BDD doit faire un UPDATE de la valeur du bouton, et si c'est un pareil mais avec la valeur 1. Je pense que ça tu dois réussir à faire ça.

Sinon pour que ça envois la commande directement, tu dois utiliser la fonction .post() de jQuery

//Quand ton bouton passe sur Off
$.post("bdd.php", { bouton: 0 } );
//Quand ton bouton passe sur On
$.post("bdd.php", { bouton: 1 } );

En gros c'est comme si tu allais sur ta page avec ton code pour mettre à jour ta page. Et la valeur tu l'obtient avec un $_POST'bouton'].

Puis pour afficher le contenu, tu peux utiliser .hide et .show ou si tu veux un effet .fadeIn ou .fadeOut

Par exemple si le contenu se trouve dans <div id="madiv">Mon texte...</div> pour le montrer tu dois mettre dans ton script js: $('#madiv').show();

Et pour cacher: $('#madiv').hide();

Salut
le plus simple est d'utiliser un plugin jQuery (hyper simple à installer)
genre ca :
http://ios-checkboxes.awardwinningfjords.com/

et ca va te transformer tes checkbox en bouton ON OFF style iPhone