Append Syntax

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

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]]

    • _

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

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

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

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

    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 - 拡張構文一覧

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

ERROR

The Boyu12's portal does not exist.


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


利用ガイド

  1. portal:3316163 ( 19 Jun 2018 13:16 )
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License