Boutons javascript
nass6906
Messages postés
30
Date d'inscription
Statut
Membre
Dernière intervention
-
nass6906 Messages postés 30 Date d'inscription Statut Membre Dernière intervention -
nass6906 Messages postés 30 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
voilà j'ai un soucis avec mes boutons Allumage et Extinction, en fait j'ai un bouton allumer et autre éteindre qui gèrent une LED, j'ai deux LEDs donc 4 boutons en tout, ce que je veux faire c'est quand je clique sur allumer y a une petite icone(image png ) qui s'affiche en dessous pour dire que la LED est allumer.
La j'ai juste fait les boutons et l'allumage je n'arrive à inclure les petites icônes.
voilà j'ai un soucis avec mes boutons Allumage et Extinction, en fait j'ai un bouton allumer et autre éteindre qui gèrent une LED, j'ai deux LEDs donc 4 boutons en tout, ce que je veux faire c'est quand je clique sur allumer y a une petite icone(image png ) qui s'affiche en dessous pour dire que la LED est allumer.
La j'ai juste fait les boutons et l'allumage je n'arrive à inclure les petites icônes.
<div class="boutons">
<div class="bouton0">
<div
<button id="btAllumeLED0" class="button success outline"> Allume LED0</button>
<p id="p1" style="display:none;"></p>
</div>
<div
<button id="btEteindreLED0" class="button alert outline"> Eteindre LED0</button>
<p id="p2" style="display:none;"></p>
</div>
</div>
<div class="bouton1">
<div
<button id="btAllumeLED1" class="button success outline"> Allume LED1</button>
<p id="p3" style="display:none;"></p>
</div>
<div
<button id="btEteindreLED1"class="button alert outline"> Eteindre LED1</button>
<p id="p4" style="display:none;"></p>
</div>
</div>
</div>
<div class="Initial">
<h3>By N.A</h3>
</div>
<!-- Le script qui permet d'appeller les autres pages qui permettent d'allumer les LEDs du WISE -->
<script>
$(function() { // On attend que la page soit complètement chargée (Document Ready)
$("#btAllumeLED0").click(function(){ // Code exécuté lors du clic sur le bouton
$("#p1").load("AllumeLED0.php");
});
});
$(function() { // On attend que la page soit complètement chargée (Document Ready)
$("#btEteindreLED0").click(function(){ // Code exécuté lors du clic sur le bouton
$("#p2").load("EteindreLED0.php");
});
});
$(function() { // On attend que la page soit complètement chargée (Document Ready)
$("#btAllumeLED1").click(function(){ // Code exécuté lors du clic sur le bouton
$("#p3").load("AllumeLED1.php");
});
});
$(function() { // On attend que la page soit complètement chargée (Document Ready)
$("#btEteindreLED1").click(function(){ // Code exécuté lors du clic sur le bouton
$("#p4").load("EteindreLED1.php");
});
});
</script>
A voir également:
- Boutons javascript
- A quoi servent les boutons de couleur sur une telecommande - Guide
- Comment réinitialiser un téléphone avec les boutons - Guide
- Application pour reconnaître les boutons - Accueil - Outils
- Telecharger javascript - Télécharger - Langages
- Comment déverrouiller un samsung avec les boutons - Guide
1 réponse
Bonsoir,
Je suppose que les icones en question... sont dans les balises P qui sont masquées ??
Donc si oui... ton code pourrait ressembler à :
Je suppose que les icones en question... sont dans les balises P qui sont masquées ??
Donc si oui... ton code pourrait ressembler à :
<div class="boutons"> <div class="bouton0"> <div> <button id="btAllumeLED0" data-id="1" data-led="0" data-action="ON" class="button btn-led success outline"> Allume LED0</button> <p id="p1" style="display:none;"></p> </div> <div> <button id="btEteindreLED0" data-id="2" data-led="0" data-action="OFF" class="button btn-led alert outline"> Eteindre LED0</button> <p id="p2" style="display:none;"></p> </div> </div> <div class="bouton1"> <div> <button id="btAllumeLED1" data-id="3" data-led="1" data-action="ON" class="button btn-led success outline"> Allume LED1</button> <p id="p3" style="display:none;"></p> </div> <div> <button id="btEteindreLED1" data-id="4" data-led="1" data-action="OFF" class="button btn-led alert outline"> Eteindre LED1</button> <p id="p4" style="display:none;"></p> </div> </div> </div> <div class="Initial"> <h3>By N.A</h3> </div> <!-- Le script qui permet d'appeller les autres pages qui permettent d'allumer les LEDs du WISE --> <script>
$(function() { $(".btn-led").click(function(){ var p_id = $(this).data('id'); var action = $(this).data('action'); var led = $(this).data('led'); var FichierToLoad = action == "ON" ? "AllumeLED" : "EteindreLED" ; $("#p"+p_id).load(FichierToLoad+led); //on masque toutes les balises p qui sont dans la div du bouton cliqué $(".bouton"+led).find('p').hide(); //on affiche celle qui nous interesse $("#p"+p_id).show(); }); });
</script>
nass6906
Messages postés
30
Date d'inscription
Statut
Membre
Dernière intervention
merci je vais tester