jQueryUIのラジオボタン
ラジオボタンはグループの中で1つだけ選択状態になるという特性上、ちょっとした手間が必要となります。とはいえ、jQueryUIを使えば簡単に設定できます。
1 2 3 4 5 |
<div id="radio"> <input type="radio" id="radio1" name="radio"><label for="radio1">Choice 1</label> <input type="radio" id="radio2" name="radio"><label for="radio2">Choice 2</label> <input type="radio" id="radio3" name="radio"><label for="radio3">Choice 3</label> </div> |
1 2 3 |
$(function() { $("#radio").buttonset(); }); |
しかし、デフォルトの状態だと一行の横並びになってしまうのでなかなか使いづらいのです。
CSSをいじるだけでOK
あまりの使えなさに、デザインだけお借りして自作していましたが、実はIEではラジオボタンが非表示になっているとうまく動作しないなどの問題があります。車輪の再発明が、馬鹿らしくなり、CSSでなんとかしようとしたらできてしまいました。こういうのはjQueryUIの歩き方としてチュートリアルを作ってほしいものです・・・。
jQueryUIではinputを隠してlabelを装飾しているので、labelにCSSをかければOKです。お得意のメソッドチェーンで一発ですね!
1 2 3 4 5 6 7 8 9 |
$(function() { $("#radio").buttonset() .find("label") .addClass("ui-corner-all") .css({ display:"block", margin:"0 auto 10px" }); }); |