.. 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のビットでそれを自分で構築することができます（より良い場合

手順： asp.netで必要なすべてのチェックボックスをレンダリングし、ID（それぞれ別）とそれぞれの名前を指定して、クラスも設定します。 "for"属性が正しく設定されたLABELもレンダリングします。 jQueryを使って

は、各ラベルのクリックイベントをバインドなし、CLICKを上げるイベントで：ラベルにあなたのチェックボックス（画像/リンクなど）をチェッククラスの

• 、設定CSSの表示がどうあるべきかに置きます関連するチェックボックス（IEでも機能する）をチェックし、チェックボックスのステータスを取得し、ラベルの内容の属性（クラスが最適です）を更新します。コード内

は次のとおりです。

CSS：asp.net

によってレンダリング同じHTMLにasp.net

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

JQERYスクリプトによってレンダリング

.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

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

あなたのHEADタグでこれを含めることを忘れないでください：

<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

シートピッカーコントロールの特別な面は何ですか？ユーザーがクリックした画像に基づいて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>