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

Question

我想这种类型的切换按钮，请点击下面的链接查看我的要求：

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

Answer 1

您可以使用PrettyCheckBox

，或者你也可以自己用一点JS的构建它（如果更好你使用jQuery）

步骤： 与asp.net渲染你需要的所有复选框，并指定一个ID（每个不同）和每个名称，也设置类。渲染一个LABEL，其中“for”属性设置正确。在标签放什么应该是你的复选框（图片/链接等）

• 的检查类别，设置CSS显示：无
• 与jQuery结合每个标签的click事件，在事件提高CLICK的相关复选框（所以它也可以在IE中使用），获取复选框的状态并更新标签内容的属性（类是最好的）。

代码是：

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通过asp.net由asp.net呈现相同的HTML渲染

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

JQERY脚本

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

不要忘记，包括这在你的脑袋标签：

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

如果您打算也用它来单选按钮，此代码替换整个功能adg_ChecksRefresh（LBL）：

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"); 
} 

}

主要的JS测试与所有主要浏览器一起工作。但我现场写了必须生成的html。希望它能起作用！

Byes

Answer 2

您需要座位选取器控制的哪个方面？仅仅是你希望基于用户点击它们而在两个图像之间交替？如果是这样，那么你可以简单地使用jQuery的切换功能在2个类之间交替或者每次点击时设置一个图像的src。

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