6.30 月別アーカイブ一覧(ドロップダウン)の選択状態を保持する ★

P.521

<mt:if name="datebased_monthly_archive">
  <mt:archiveTitle setvar="archive_title" />
</mt:if>
<dt class="sidetitle">Monthly Archives</dt>
<dd class="side">
  <form>
    <select name="select" onchange="selectUrl(this.form.select)">
<mt:archiveList archive_type="Monthly">
  <mt:archiveListHeader>
      <option value="">選択してください</option>
  </mt:archiveListHeader>
  <mt:archiveTitle setvar="current_archive_title" />
      <option value="<mt:archiveLink />" <mt:if name="datebased_monthly_archive"><mt:if name="current_archive_title" eq="$archive_title">selected="selected"</mt:if></mt:if>><mt:archiveTitle /></option>
</mt:archiveList>
    </select> 
  </form>
</dd>
<dd>
<script type="text/javascript">
//<![CDATA[
function selectUrl(sel){
  if(sel.options[sel.selectedIndex].value){
    location.href = sel.options[sel.selectedIndex].value;
  }
}
//]]>
</script>
</dd>

★「月別ドロップダウン」ウィジェットテンプレート(デフォルトテンプレート)

元のテンプレートから001~003、013を追加し、014を変更しています。処理の流れはサンプルテンプレートと同じです。

001:<mt:if name="datebased_monthly_archive">
002:  <mt:archiveTitle setvar="archive_title" />
003:</mt:if>
004:<mt:IfArchiveTypeEnabled archive_type="Monthly">
005:  <mt:ArchiveList archive_type="Monthly">
006:    <mt:ArchiveListHeader>
007:<div class="widget-archive-monthly-dropdown widget-archive widget">
008:  <h3 class="widget-header"><a href="<$mt:BlogURL$>archives.html">アーカイブ</a></h3>
009:  <div class="widget-content">
010:    <select onchange="nav(this)">
011:      <option>月を選択...</option>
012:    </mt:ArchiveListHeader>
013:    <mt:archiveTitle setvar="current_archive_title" />
014:      <option value="<mt:archiveLink />" <mt:if name="datebased_monthly_archive"><mt:if name="current_archive_title" eq="$archive_title">selected="selected"</mt:if></mt:if>><mt:archiveTitle /></option>
015:    <mt:ArchiveListFooter>
016:    </select>
017:  </div>
018:</div>
019:<script type="text/javascript" charset="utf-8">
020:/* <![CDATA[ */
021:function nav(sel) {
022:   if (sel.selectedIndex == -1) return;
023:   var opt = sel.options[sel.selectedIndex];
024:   if (opt && opt.value)
025:      location.href = opt.value;
026:}
027:/* ]]> */
028:</script>
029:    </mt:ArchiveListFooter>
030:  </mt:ArchiveList>
031:</mt:IfArchiveTypeEnabled>

ウェブページ

Powered by Movable Type 4.261

このアーカイブについて

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。