bootstrap-switchのイベント
デジタルエンディングノート「人生金庫」でbootstrapを使ってるんですが、ボタンも使いたいなと思い、bootstrap-switchを導入してみました。
本家はこちら
テストしたページはこちら
bootstrap3を使用しています。
いろいろハマりました。。。
１）色が変わらない
サンプルで、スイッチの作り方が
＜div id=”sw” class=”make-switch”>
＜/div>
となってたんですが、
|
1 2 3 |
＜div class="make-switch" data-on-color="success" data-on-text='はい' data-off-color="default" data-off-text='いや'> |
な感じで、色の変更のパラメータなんかを与えてもぜんぜん変更にならない。
サンプルではできてるんですが。。。
で、あれこれ調べてみた所、現在は、
|
1 2 3 |
＜input name="d-sw" type="checkbox" checked data-on-color="success" data-on-text='はい' data-off-color="default" data-off-text='いや'> |
ある意味シンプルな形で記載をしたら反映してくれました。
２）イベントが発生しない
スイッチを動かした時イベントが発生してくれる・・・んですが、それがまたサンプルと違って。。
サンプルでは
|
1 2 3 |
$('#d-sw').on('switch-change', function() |
な表現になってるんですが、どうしてもイベントを補足できませんでした。
で、ドキュメントを見てみると、「全てのイベントはnamespaceに発生する」ナンチャラって書いてあって、形が違ってたんですよね。
※Ver3になって変わった模様。。
現在は、こんな感じで実装しています。
|
1 2 3 4 5 6 7 8 9 10 11 |
＜script type="text/javascript"> $(document).ready(function(){ $('[name="d-sw"]').bootstrapSwitch(); $('input[name="d-sw"]').on('switchChange.bootstrapSwitch', function(event,state){ console.log(state); alert(state); }); }); ＜/script> |
