jQuery UI Button
今回は、jQuery UIのButtonについて書きます。
Buttonは、ボタンです(笑)
カッコイイボタンが簡単に作れます。
このように書きます。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>jQuery ui</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> </head> <body> <button>click!</button> <script> $(function(){ $('button').button(); }); </script> </body> </html>
実行結果↓(左がデフォルトで、右がjQuery UIのButtonです。)
「.button();」とつけると、実装できます。
$(function(){ $('button').button(); });
jQuery UIのButtonは、上のようなボタン以外にも、使えるものがあります。
①
チェックボックスに使うと、こうなります。
HTMLの部分↓
<input type="checkbox" id="ch"><label for="ch">ch</label>
jQuery UIの部分↓
$('#ch').button();
②
ラジオボタンに使うと、こうなります。
HTMLの部分↓
<input type="radio" name="radio" id="radio1"><label for="radio1">A</label> <input type="radio" name="radio" id="radio2"><label for="radio2">B</label> <input type="radio" name="radio" id="radio3"><label for="radio3">C</label>
jQuery UIの部分↓
$('input[type=radio]').button();
また、ラジオボタンは、まとめる事ができます。
HTMLの部分↓
<div id="format"> <input type="radio" name="radio" id="radio1"><label for="radio1">A</label> <input type="radio" name="radio" id="radio2"><label for="radio2">B</label> <input type="radio" name="radio" id="radio3"><label for="radio3">C</label> </div>
jQuery UIの部分↓
$('#format').buttonset();