Append Syntax

記事カテゴリが未定義です。
ページコンソールよりカテゴリを選択してください。

Colmod - 多重折り畳み

SCP-JP SB3 » SNB-B12-JP3 » Platform » Colmod

colmodはcolmod自身を含む全ての要素を折り畳むことができます。

導入方法

折り畳みたい箇所を下記のcoltop/colendで囲い必要に応じてパラメータを追加/変更して下さい。

[[include component:coltop show=+ 開く|hide=- 閉じる]]
…
[[include component:colend nohide=true]]

値	データ型	初期値	説明
show	文字列	+ show block	(coltopでのみ有効)開くリンクのテキストです
hide	文字列	- hide block	閉じるリンクのテキストです
nohide	true,false	false	trueを指定すると閉じるリンクを表示しません
folded	true,false	true	(coltopでのみ有効)falseを指定すると開きっぱなしになり、ユーザーが任意に折り畳めます
ifprot	true,false	false	(coltopでのみ有効)trueを指定すると偽りの認証のデザインになります

使用例

デモ1

colmodは colmod自身 を…

• • _
  + 開く- 閉じる

  このように…

  • • _
    + 開く- 閉じる

    何度でも…

    • • _
      + 開く- 閉じる

      折り畳むことが出来ます。

      [[include component:coltop show=+ 開く|hide=- 閉じる]]
      このように...
      [[include component:coltop show=+ 開く|hide=- 閉じる]]
      何度でも...
      [[include component:coltop show=+ 開く|hide=- 閉じる]]
      折り畳むことが出来ます。
      [[include component:colend nohide=true]]
      [[include component:colend nohide=true]]
      [[include component:colend nohide=true]]

デモ2

colendの nohide を省略し hide を指定すると…

• • _
  + 開く▽ 閉じる

  collapsibleの hideLocation="both" を再現できます。
  加えて、coltopとcolendで別々のリンクテキストを表示することが出来ます。

  [[include component:coltop show=+ 開く|hide=▽ 閉じる]]
  collapsibleの hideLocation="both" を再現できます。
  加えて、coltopとcolendで別々のリンクテキストを表示することが出来ます。
  [[include component:colend hide=△ 閉じる]]

  
  
  △ 閉じる

デモ3

更にcoltopの hide を省略し nohide=true を指定すると…

• • _
  + 開く

  collapsibleの hideLocation="bottom" を再現できます。

  [[include component:coltop show=+ 開く|nohide=true]]
  collapsibleの hideLocation="bottom" を再現できます。
  [[include component:colend hide=- 閉じる]]

  
  
  - 閉じる

デモ4

coltopに folded=false を指定すると…

• • _
  + 開く- 閉じる

  collapsibleの folded="no" を再現できます。

  [[include component:coltop folded=false|show=+ 開く|hide=- 閉じる]]
  collapsibleの folded="no" を再現できます。
  [[include component:colend nohide=true]]

デモ5

colmodを [[div class="collapsiblealt"]]と[[/div]] で囲む、
または coltopに ifprot=true を指定すると…

• • _
  認証ログアウト

  偽りの認証のcollapsibleを再現できます。

  [[div class="collapsiblealt"]]
  [[include component:coltop show=認証|hide=ログアウト]]
  [http://ja.scp-wiki.net/esoteric-syntax#toc23 偽りの認証]のcollapsibleを再現できます。
  [[include component:colend nohide=true]]
  [[/div]]

  または

  [[include component:coltop ifprot=true|show=認証|hide=ログアウト]]
  [http://ja.scp-wiki.net/esoteric-syntax#toc23 偽りの認証]のcollapsibleを再現できます。
  [[include component:colend nohide=true]]

---

• • _
  + おまけ:colmodのソースコード▽ 閉じる

  この構文は折り畳み式リストのコードを逆手にとって出来ています。

  • 一部改行/コメントアウトの挿入をしています。

  WIKIDOT.combined.js:formatted(一部抜粋)

  + 開く

  fixFoldableMenus: function() {
      var m = YAHOO.util.Dom.getElementsByClassName("foldable-list-container", "div");
      for (var h = 0; h < m.length; h++) {
          var o = m[h].getElementsByTagName("ul");
          for (var f = 0; f < o.length; f++) {
              /* (省略) */
          }
          var d = m[h].getElementsByTagName("a");
          var k = window.location.pathname;
          for (var f = 0; f < d.length; f++) {
              var b = d[f].href.replace(/^[a-z]*:\/\/[^\/]+\/([^\/]+).*/, "/$1");
              if (b == k) {
                  /* (省略) */
              }
          }
          YAHOO.util.Event.addListener(m[h], "click", WIKIDOT.page.fixers._foldableMenuToggle)
      }
  },
  _foldableMenuToggle: function(d) {
      var b;
      b = YAHOO.util.Event.getTarget(d, true);
      if (b.tagName == "A" && b.href != "#" && b.href != "javascript:;") {
          return
      }
      /* ここが抜け目。条件に:not(div.foldable-list-container)が無いせいで、
         div.foldable-list-containerの外側にあるliでも適応してしまう。 */
      while (!b.tagName || b.tagName.toLowerCase() != "li") {
          b = b.parentNode
      }
      if (!(YAHOO.util.Dom.hasClass(b, "folded") || YAHOO.util.Dom.hasClass(b, "unfolded"))) {
          return
      }
      if (YAHOO.util.Dom.hasClass(b, "folded")) {
          YAHOO.util.Dom.replaceClass(b, "folded", "unfolded");
          var c = b.getElementsByTagName("ul")[0];
          b.eff.setOpacity(0);
          c.style.display = c.originalDisplay;
          b.eff.custom(0, 1)
      } else {
          YAHOO.util.Dom.replaceClass(b, "unfolded", "folded");
          var c = b.getElementsByTagName("ul")[0];
          c.style.display = "none"
      }
  },
  

  colcss(メインCSSに統合):CSSコード

  + 開く

  /* リストをdivっぽく仕立てる */
  .colmod-block > ul,
  .colmod-block > ul > li {
      display:block;
      line-height:normal;
      list-style:none;
      margin:0;
      padding:0;
  }
  /* _foldableMenuToggle()用のダミーリスト */
  .colmod-block > ul > li > ul,
  /* 折り畳み上部の閉じるリンク */
  li.folded > .colmod-link-top a + a,
  /* 折り畳み内包物 */
  li.folded > .colmod-content,
  /* 折り畳み下部の閉じるリンク */
  li.folded > .colmod-link-end a,
  /* 折り畳み上部の開くリンク */
  li.unfolded > .colmod-link-top a:first-child {
      display:none;
  }
  /* 折り畳み内包物
     cubic-bezier()はcollapsibleのアニメーションの再現
     ease-in-outはcubic-bezier()が使えないブラウザ用 */
  .colmod-content {
      -webkit-animation:colmod-fade-in 0.2s ease-in-out;
      -moz-animation:colmod-fade-in 0.2s ease-in-out;
      animation:colmod-fade-in 0.2s ease-in-out;
      -webkit-animation-timing-function:cubic-bezier(0.3649610494,0,0.6350389506,1);
      -moz-animation-timing-function:cubic-bezier(0.3649610494,0,0.6350389506,1);
      animation-timing-function:cubic-bezier(0.3649610494,0,0.6350389506,1);
  }
  /* 折り畳み内包物
     閉じているときはアニメーションを適応しない */
  li.folded > .colmod-content {
      -webkit-animation-name:none;
      -moz-animation-name:none;
      animation-name:none;
  }
  /* フェードイン・アニメーション */
  @-webkit-keyframes colmod-fade-in { from { opacity:0; } to { opacity:1; } }
  @-moz-keyframes colmod-fade-in { from { opacity:0; } to { opacity:1; } }
  @keyframes colmod-fade-in { from { opacity:0; } to { opacity:1; } }
  /* div.foldable-list-containerのclickイベントに_foldableMenuToggle()が登録されるため
     div.foldable-list-containerの当たり判定を中身に合わせる */
  [class|="colmod-link"] div.foldable-list-container {
      display:inline;
  }
  /* 偽りの認証のCSSを引用 */
  .colmod-collapsiblealt > [class|="colmod-link"],
  .collapsiblealt > .colmod-block > ul > li > [class|="colmod-link"] {
      margin:0.5em 0;
      text-align:center;
  }
  .colmod-collapsiblealt > [class|="colmod-link"] a,
  .collapsiblealt > .colmod-block > ul > li > [class|="colmod-link"] a {
      padding:0.1em 0.5em;
      text-decoration:none;
      background-color:#F4F4F4;
      border:1px solid #AAA;
      color:#000;
  }
  .colmod-collapsiblealt > [class|="colmod-link"] a:hover,
  .colmod-collapsiblealt > [class|="colmod-link"] a:active,
  .collapsiblealt > .colmod-block > ul > li > [class|="colmod-link"] a:hover,
  .collapsiblealt > .colmod-block > ul > li > [class|="colmod-link"] a:active {
      background:#DDD;
      text-decoration:none;
  }
  

  coltop:深層インクルード(初期値代入用)

  [[include component:coltop-deep
  ifprot={$ifprot}|ifprot=0
  |nohide={$nohide}|nohide=0
  |folded={$folded}|folded=1
  |hide={$hide}|hide=- hide block
  |show={$show}|show=+ show block]]

  coltop-deep:折り畳み上部本体

  [[div_ class="colmod-block"]]
  [[ul]]
  [[li class="
  [[#if {$folded} | folded | unfolded ]]
  [[#if {$ifprot} | colmod-collapsiblealt ]]"]]
  [!-- _foldableMenuToggle()用のダミーリスト --]
  [[ul]]_[[/ul]]\
  [!-- 折り畳み上部の開く・閉じるリンク --]\
  [[div class="colmod-link-top"]]
  [[div_ class="foldable-list-container"]]
  [# {$show}][[#if {$nohide} |  | [# {$hide}] ]]
  [[/div]][[/div]]
  [!-- 折り畳み内包物 --]
  [[div class="colmod-content"]]
  

  colend:深層インクルード(初期値代入用)

  [[include component:colend-deep
  nohide={$nohide}|nohide=0
  |hide={$hide}|hide=- hide block]]

  colend-deep:折り畳み下部本体

  [[/div]]
  [!-- 折り畳み下部の閉じるリンク --]
  [[div [[#if {$nohide} |  | class="colmod-link-end" ]] ]]
  [[div_ class="foldable-list-container"]]
  [[#if {$nohide} |  | [# {$hide}] ]]
  [[/div]][[/div]]\
  [[/li]][[/ul]][[/div]]
  

  
  
  △ 閉じる

Platform - 拡張構文一覧

SCP-JP SB3 » SNB-B12-JP3 » Platform

ようこそBoyu12の拡張構文一覧へ!
閲覧したい項目を選んで下さい。

• Colmod - 多重折り畳みColmod - 多重折り畳み

---

批評コメント

コメント投稿フォームへ

批評コメントTopへ

ERROR

The Boyu12's portal does not exist.

エラー:	Boyu12のportalページが存在しません。利用ガイドを参照し、portalページを作成してください。

利用ガイド

1. portal:3316163 ( 19 Jun 2018 13:16 )