$("div#state3-mode1").j3ssw({off:"state3down-sort", on:"state3up-sort", def:"state3def-sort", callback:listener1, mode:1});
function listener1(selection, status){
$("div.trace").eq(0).empty().append(selection + " : " + (status?"Z-A":"A-Z"));
}
$("div#state3-mode2").j3ssw({off:"state3down-sort", on:"state3up-sort", def:"state3def-sort", callback:listener2, mode:2});
function listener2(selection, status){
$("div.trace").eq(1).empty().append(selection + " : " + (status?"Z-A":"A-Z"));
}
$("div#state3-mode3").j3ssw({off:"state3down-sort", on:"state3up-sort", def:"state3def-sort", callback:listener3, mode:3});
function listener3(selection, status){
$("div.trace").eq(2).empty().append(selection + " : " + (status?"Z-A":"A-Z"));
}
$("div#state3-mode3multi1").j3ssw({off:"state3down-filter", on:"state3up-filter", def:"state3def-filter", callback:listener4, mode:3, status:true});
$("div#state3-mode3multi2").j3ssw({off:"state3down-filter", on:"state3up-filter", def:"state3def-filter", callback:listener4, mode:3, index:-1});
$("div#state3-mode3multi3").j3ssw({off:"state3down-filter", on:"state3up-filter", def:"state3def-filter", callback:listener4, mode:3});
function listener4(selection, status, id, j3ssw){
if(id == "state3-mode3multi1")$("span#trace4span").empty().append(j3ssw.getSelection() + " : " + (j3ssw.getStatus()?"Contain":"Not Contain"));
if(id == "state3-mode3multi2")$("span#trace5span").empty().append(j3ssw.getSelection() + " : " + (j3ssw.getStatus()?"Contain":"Not Contain"));
if(id == "state3-mode3multi3")$("span#trace6span").empty().append(j3ssw.getSelection() + " : " + (j3ssw.getStatus()?"Contain":"Not Contain"));
}
jQuery 3ステートスイッチ プラグイン(J3SSW)は、jQuery というJavaScriptライブラリのみを使用します。 J3SSWを使用するには、以下の２つのJavaScriptファイルをヘッダーに追加します。
<script type="text/javascript" src="./js/jquery-1.2.6.min.js"></script> <script type="text/javascript" src="./js/jquery.j3ssw.js"></script>
J3SSWを構成するスイッチのスタイルを定義したCSSファイルをヘッダーに追加します。
<link rel="stylesheet" type="text/css" href="./css/jquery.j3ssw.css" media="screen" />
J3SSWでは、ラジオボタンを元にスイッチを生成します。
ですから、元のラジオボタンをマークアップする必要があります。
ラジオボタンを配置するためのdivタグとラジオボタンのクリックエリアとしてラベルを用意します。
実際にはラベルにスイッチのスタイルが割り当てられます。
必要なタグと属性
div : id<div id="j3ssw"> <label for="mode1-1"><input type="radio" id="mode1-1" name="mode1-radio" value="Product">Product</label> <label for="mode1-2"><input type="radio" id="mode1-2" name="mode1-radio" value="Price">Price</label> <label for="mode1-3"><input type="radio" id="mode1-3" name="mode1-radio" value="Brand">Brand</label> </div>
J3SSWを動作させるために、DOM構築後にJ3SSWを初期化します。
初期化では、ラジオボタンのコンテナとなるdivタグ要素をセレクタのターゲットとします。
必要があれば設定オブジェクトを渡すこともできます。
<script type="text/javascript">
<!--
$(document).ready(function() {
$("#j3ssw").j3ssw();
}
//-->
</script>
以上で、J3SSWを実装できました。
実装のバリエーションはExampleタブやExtendタブをクリックして、いろいろなサンプルを試してみてください。
<script type="text/javascript">
<!--
$(document).ready(function() {
//設定つきで初期化
var j3ssw001 = $("#filter001").j3ssw({index:2,
status:true,
def:"state3def-filter",
off:"state3down-filter",
on:"state3up-filter",
mode:3,
callback:listener001});
//コールバック関数
function listener001(selection, status, id, j3ssw){
alert(selection + " : " + status);
}
//コールバック以外で状態を取得する場合
$("#showStateButton001").click(function(){j3ssw001.getSelection() + " : " + j3ssw001.getStatus()});
}
//-->
</script>
Initial release.
このプラグインについて、意見、要望がありましたら以下のフォームに投稿してください。
http://j3ssw.tumblr.com/に送信されます。
あなたがTumblrアカウントを持っている場合は、
http://memorycraft.tumblr.com/宛てに直接コメントをもらえるとうれしいです。
Thank you!
