Sugar Web Cloud

「ページ遷移しないタグ検索」のソースコード

「ページ遷移しないタグ検索」記事のソースコードです。

index.html など内での読み込み

ページロード時のテンプレート

@include("/ファイルパス/tpl-cloud-summary.html")

summary.html

エントリー一覧モジュール

<div id="sample-tag-search-summary">
  <!-- BEGIN_MODULE Entry_Summary id="モジュールID" -->
  <!-- BEGIN unit:loop --><!-- BEGIN entry:loop --> 〜 エントリー一覧は省略 〜<!-- END entry:loop --><!-- END unit:loop -->

  <!-- BEGIN pager:veil -->
  <ul><!-- BEGIN backLink -->
    <li>
      <form action="{url}" method="post" class="js-post_include" target="#sample-tag-search-summary">
        <button type="submit" name="ACMS_POST_2GET">« 前の{backNum}件</button>
        <input type="hidden" name="tpl" value="ファイルパス/summary.html">
        <input type="hidden" name="page" value="{backPage}">
      </form>
    </li><!-- END backLink --><!-- BEGIN page:loop -->
    <li{pageCurAttr}[raw]>
      <div><!-- BEGIN link#front -->
        <form action="{url}" method="post" class="js-post_include" target="#sample-tag-search-summary"><!-- END link#front -->
          <button type="submit" name="ACMS_POST_2GET">{page}</button>
          <input type="hidden" name="tpl" value="ファイルパス/summary.html">
          <input type="hidden" name="page" value="{page}"><!-- BEGIN link#rear -->
        </form><!-- END link#rear -->
      </div>
    </li><!-- END page:loop --><!-- BEGIN lastPage:veil -->
    <li><span>...</span></li>
    <li{pageCurAttr}[raw]>
      <form action="{lastPageUrl}" method="post" class="js-post_include" target="#sample-tag-search-summary">
        <button type="submit" name="ACMS_POST_2GET">{lastPage}</button>
        <input type="hidden" name="tpl" value="ファイルパス/summary.html">
        <input type="hidden" name="page" value="{lastPage}">
      </form>
    </li><!-- END lastPage:veil --><!-- BEGIN forwardLink -->
    <li>
      <form action="{url}" method="post" class="js-post_include" target="#sample-tag-search-summary">
        <button type="submit" name="ACMS_POST_2GET">次の{forwardNum}件 »</button>
        <input type="hidden" name="tpl" value="ファイルパス/summary.html">
        <input type="hidden" name="page" value="{forwardPage}">
      </form>
    </li><!-- END forwardLink -->
  </ul><!-- END pager:veil -->
  <!-- END_MODULE Entry_Summary -->

</div>

tag-cloud.html

タグ一覧モジュール

<!-- BEGIN_MODULE Tag_Cloud id="モジュールID" -->
<ul>
  <!-- BEGIN tag:loop -->
  <li>
    <form action="{url}" method="post" class="js-post_include" target="#sample-tag-search">
      <button type="submit" name="ACMS_POST_2GET" title="{amount}件">{name}</button>
      <input type="hidden" name="tpl" value="ファイルパス/tpl-filter-summary.html">
    </form>
  </li>
  <!-- END tag:loop -->
</ul>
<!-- END_MODULE Tag_Cloud -->

tag-filter.html

タグの複数絞り込みモジュール

<!-- BEGIN_MODULE Tag_Filter id="モジュールID" -->
<!-- BEGIN tagBox -->
<ul><!-- BEGIN selected:loop -->
  <li>
    <div>
      <form action="{url}" method="post" class="js-post_include" target="#sample-tag-search"><button type="submit" name="ACMS_POST_2GET">{name}</button><input type="hidden" name="tpl" value="ファイルパス/tpl-filter-summary.html"></form>
      <form action="{omitUrl}" method="post" class="js-post_include" target="#sample-tag-search"><button type="submit" name="ACMS_POST_2GET">x</button><!-- BEGIN_IF [{omitUrl}/re/(/tag/)] --><input type="hidden" name="tpl" value="ファイルパス/tpl-filter-summary.html"><!-- ELSE --><input type="hidden" name="tpl" value="ファイルパス/tpl-cloud-summary.html"><!-- END_IF --></form>
    </div>
  </li><!-- END selected:loop -->
</ul><!-- BEGIN choice:veil -->
<ul><!-- BEGIN choice:loop -->
  <li>
    <form action="{url}" method="post" class="js-post_include" target="#sample-tag-search">
      <button type="submit" name="ACMS_POST_2GET">{name}</button><input type="hidden" name="tpl" value="ファイルパス/tpl-filter-summary.html">
    </form>
  </li><!-- END choice:loop -->
</ul><!-- END choice:veil --><!-- END tagBox -->
<!-- END_MODULE Tag_Filter -->

tpl-cloud-summary.html

ページロード時とタグフィルターで全での絞り込みを解除した時に読み込むテンプレート

<div id="sample-tag-search">
  <!-- タグクラウド -->
  @include("/ファイルパス/tag-cloud.html")
  <!-- エントリーサマリー -->
  @include("/ファイルパス/summary.html")
</div>

tpl-filter-summary.html

タグ検索中に読み込むテンプレート

<div id="sample-tag-search">
  <!-- タグフィルター -->
  @include("/demo/tag-search-no-page-transition/v1/tag-filter.html")
  <!-- エントリーサマリー -->
  @include("/demo/tag-search-no-page-transition/v1/summary.html")
</div>

タグ