如何使用.. jquery和vb.net创建切换按钮？

Question

I want this type of toggle button please click the link below to see my requirement :

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

Answer 1

You can use PrettyCheckBox

or you can build it yourself with a bit of JS (better if you use jQuery)

Steps: with asp.net render all the checkbox you need and specify an ID (different for each) and a name for each, set also class. Render also a LABEL with "for" attribute correctly set. in the label put what should be your checkbox (images/links etc)

• for the check class, set css display:none
• with jquery bind the click event of each label, in the event raise the CLICK of the related checkbox (so it works also in IE), get the status of the checkbox and update the attributes (class is the best) of the content of the label.

in code is:

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 rendered by asp.net

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

JQERY script in the same html rendered by 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>

Don't forget to include this in your HEAD tag:

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

If you intend to use it also for RADIO BUTTON replace the entire function adg_ChecksRefresh(lbl) with this 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");
}

}

the main JS is tested to work with all primary browser. but i wrote in live the html that have to be generated. hope it works all!

Byes

Answer 2

What particular aspect of the seat picker control do you need? Is it simply that you wish to alternate between 2 images based on the user clicking them? If so then you can simply use the toggle function of jquery to alternate between 2 classes or else set the src of an image each click.

// 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>