3.Buttonのサンプルスクリプト
いい感じのボタン表示が簡単にできてしまいます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <html lang="ja"><head> <meta charset="utf-8" /> <script> $(function() {$("a").button();}); </script></head><body><a href="#">An anchor</a></body></html> |
→マウスオーバーしたときの表示の切替を勝手にしてくれます。
４つめはDatepicker。
4.Datepickerのサンプルスクリプト
日付を入力するフォームなんかでは定番ですね。
1 2 3 4 5 6 7 8 9 10 11 12 | <html lang="ja"><head> <meta charset="utf-8" /> <script>$(function(){$("#datepicker").datepicker();});</script></head><body><p>Date: <input type="text" id="datepicker" /></p></body></html> |
→フォームをクリックするとカレンダーが表示され、
日付を選択もしくは枠外をクリックするとカレンダーが閉じます。
５つめはダイアローグボックス。
5.Dialogのサンプルスクリプト
応用すると確認画面や登録画面のモーダル表示に使えますね。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <html lang="ja"><head> <meta charset="utf-8" /> <script> $(function(){$("#dialog").dialog({width:500});}); </script></head><body><div id="dialog" title="ここをドラッグ"> <p>ドラッグとサイズ変更ができます。右上のＸ印で閉じます。</p></div></body></html> |
→ダイアログボックスが表示されればOKです。
本日ラスト、６つめはメニューです。
