comment créer un bouton bascule en utilisant .. jquery et vb.net?

Question

Je veux que ce type de bouton à bascule s'il vous plaît cliquer sur le lien ci-dessous pour voir mon exigence:

http://www.redbus.in/Booking/SeatSelection.aspx?rt=4017230&doj=30-Nov-2010&dep=04:55%20PM&showSpInst=false

Answer 1

Vous pouvez utiliser PrettyCheckBox

ou vous pouvez le construire vous-même avec un peu de JS (mieux si vous utilisez jQuery)

Étapes: avec asp.net rend toute la case à cocher dont vous avez besoin et spécifiez un ID (différent pour chaque) et un nom pour chacun, définissez également la classe. Rendu aussi un LABEL avec l'attribut "for" correctement défini. dans l'étiquette mettre ce qui devrait être votre case à cocher (images/liens, etc.)

• pour la classe de contrôle, réglez l'écran css: aucun
• avec jquery lier l'événement click de chaque étiquette, en cas augmenter le CLIC de la case à cocher correspondante (donc cela fonctionne aussi dans IE), obtenir le statut de la case à cocher et mettre à jour les attributs (classe est le meilleur) du contenu de l'étiquette.

dans le code est:

CSS:

.seatcheckbox{ 
display:block; 
height:16px; 
width:16px; 
} 
.checked { 
    background-image: url(chair-red.png) 
} 
.unchecked { 
    background-image: url(chair-gray.png) 
} 
input.hidden{ display:none;} 

HTML rendu par asp.net

<input type="checkbox" id="chk1" name="Seats" value="1" class="hidden" /> 
<label for="chk1"><div class="seatcheckbox"></div></label> 

script JQERY dans le même html rendu par asp.net

<script type="text/javascript"> 

$(document).ready(function(){ 
    $('label').each(function (index, object) { 
     if ($(this).attr("for") != "") { 

      var ctl = $("#" + $(this).attr("for")); 

      if (!ctl.is("input[type=radio]") && !ctl.is("input[type=checkbox]")) { 
       return; 
      } 

      ctl.css("display", "none") 

      $(this).click(function (e) { 

       try { 
        if ($.browser.msie) { 
         ctl.click(); 
        } 
        var lbl = $(this); 
        setTimeout(function() { adg_ChecksRefresh(lbl); }, 1) 
       } catch (ex) { } 

      }); 
}); 

function adg_ChecksRefresh(lbl) { 
    var ctl = $("#" + $(lbl).attr("for")); 
    var name = ctl.attr("name"); 
    var id= ctl.attr("id"); 
    var checked = ctl.is(":checked"); 

    if (checked) { 
     $(lbl).removeClass("unchecked"); 
     $(lbl).addClass("checked"); 
    } else { 
     $(lbl).removeClass("checked"); 
     $(lbl).addClass("unchecked"); 
    } 
} 

</script> 

Ne pas oublier d'inclure dans votre balise HEAD:

<script src="/Scripts/jquery-1.4.1.js" type="text/javascript"></script> 

Si vous avez l'intention de l'utiliser aussi pour le bouton RADIO remplacer la totalité adg_ChecksRefresh de fonction (LBL) avec ce code:

function adg_ChecksRefresh(lbl) { 
var ctl = $("#" + $(lbl).attr("for")); 
var name = ctl.attr("name"); 
var id= ctl.attr("id"); 
var checked = ctl.is(":checked"); 

if (ctl.is("input[type=radio]")) { 
    $("input[name=" + name + "]").each(function() { 
     $("label[for=" + $(this).attr("id") + "]").removeClass("checked").addClass("unchecked"); 
    }); 

} 

if (checked) { 
    $(lbl).removeClass("unchecked"); 
    $(lbl).addClass("checked"); 
} else { 
    $(lbl).removeClass("checked"); 
    $(lbl).addClass("unchecked"); 
} 

}

Le JS principal est testé pour fonctionner avec tous les navigateurs principaux. mais j'ai écrit en direct le code HTML qui doit être généré. J'espère que ça marche tout!

Byes

Answer 2

Quel aspect particulier du contrôle de sélecteur de siège avez-vous besoin? Est-ce simplement que vous souhaitez alterner entre 2 images en fonction de l'utilisateur cliquant dessus? Si c'est le cas, vous pouvez simplement utiliser la fonction toggle de jquery pour alterner entre 2 classes ou bien définir le src d'une image à chaque clic.

// Include jQuery in your page 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> 

// Create a script block for the toggling 
<script type="text/javascript" language="javascript"> 
$('#seat').click(function() { 
    $(this).find('img').toggle(); 
}); 
</script> 

// Create your markup for the images. 
<div id='seat'> 
<img id="empty" src="empty_seat.png" alt="" width="100" height="123" style='display:block;' /> 
<img id="occupied" src="occupied_seat.png" alt="" width="100" height="123" style='display:none;' /> 
</div>