jQuery ui Tabs

いそぎメモ |∵|

$(function(){
	var pn = location.search.match(/(?|&)tab=(d+)(&|b)/)?RegExp.$2:'0';
	$("#tabs").tabs().tabs('select', parseInt(pn));
})

jQuery ui tabsで他ページからのリンクでも直接指定したタブへリンクが出来ます。
リンク先をhref=”xxx.html?tab=1″にします、この場合二番目のタブへリンクします。

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">First</a></li>
    <li><a href="#tabs-2">Second</a></li>
    <li><a href="#tabs-3">Third</a></li>
  </ul>
  <div id="tabs-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
  <div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div>
  <div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>
</div>

datepicker

日付入力欄なんかで最近よくみるカレンダーがにゅーっと出てくるやつです

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>
$(function() {
    $("#calendar").datepicker();
});

最低限必要な記述は上記のみ
オプションもたくさんあります、以下割とよく使うもの
dateFormat: ‘yy/mm/dd’ 表示形式(2011/7/7)
showButtonPanel: true カレンダー左下に今日の日付を選べるボタンと右下に閉じるボタン追加
numberOfMonths: [行,列] テーブルの概念と同じで、何行何列分のカレンダーを表示するか(3行3列であれば3×3の9個)
maxDate: ‘+1m’ 未来の日付の選択可能範囲(年・月・週・日がそれぞれymwdに対応、+1wであれば1週間先まで)
minDate: ‘-1m’ 過去の日付の選択可能範囲(年・月・週・日がそれぞれymwdに対応、+1wであれば1週間前まで)
※複数個記述する際には最後の行以外の文末にカンマ(,)を忘れないように
他にもアニメーションの仕方や表示のディレイなど面白いオプションが様々ですが、長くなるため割愛させていただきます