■ 2003年08月02日



過去の記事をプルダウンメニューに


 Washimi about etc. at 14:12

 過去の記事 (月別アーカイブ) のリストが長くなってしまったので、フォームを使ってプルダウンメニューにしてみました。

 実際に右側の過去の記事でご覧いただけると思いますが、プルダウンメニュー内の項目を選択すると該当年月の記事を表示します。
 新規ウィンドウのチェックボックスがチェックされている場合、新しいウィンドウで表示します。チェックされていない場合は現在のウィンドウで表示します。

 以下がプルダウンメニューとチェックボックスを表示するための HTML です。
 なお利用時はインデントの全角空白をタブ等に置き換えてください。

 <div class="sidetitle">過去の記事</div>

 <div class="side">
  <form name="monthly">
   <select onChange="SelectMonthlyArchive(this)">
    <option value="/">選択してください</option>
    <MTArchiveList archive_type="Monthly">
    <option value="<$MTArchiveLink$>"><$MTArchiveTitle$> (<$MTArchiveCount$>)</option>
    </MTArchiveList>
   </select>
   <input type="checkbox" name="window">新規ウィンドウ
  </form>
 </div>

 実際にプルダウンメニューで選択された場合、以下の JavaScript で記事を表示します。
 ブラウザで JavaScript を使用しない設定では動作しませんのでご注意ください。

function SelectMonthlyArchive(Obj) {
 var url = Obj.options[Obj.selectedIndex].value;
 // 「選択してください」が選択された場合
 if ("/" == url)
  return false;

 // 「新規ウィンドウ」がチェックされているかどうか
 if (true == document.monthly.window.checked) {
  // 新規ウィンドウで月別アーカイブを開く
  window.open(url);
 } else {
  // 現在のウィンドウで月別アーカイブを開く
  parent.location = url;
 }
}