如何使用.. 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>