折り畳みタブの諸所

Created By C-takeC-take

折り畳みタブにフッターを付ける

概要

tabviewにフッターをつけます。フッターとは常時tabviewの下部に表示されている文です。

構文(赤字がミソ)

[[tabview]]
[[tab]]
折り畳み文1
[[/tab]]
[[tab]]
折り畳み文2
[[/tab]]
フッター
[[div style="display:none;"]]
[[/tab]]
[[/tabview]]
[[/div]]

サンプル:

折り畳み文1

フッター

[[/tab]]



重要な事: 上記の構文の内、最後の赤字で記した[[/div]]は、これがなくともパッと見、構文が正常に動いているように見えるので、実はいらないのではないかという疑問を持つと思います。しかし、この最後の[[/div]]は重要です。詳しくは解説をご参照ください。

解説:フッターをつける

前置き: 恐らくですが、wikidotはwikidotの各構文に正しい書き方を設定し、その正しい書き方がされた場合に各構文をhtmlファイルの構文に書き換えます。これによってユーザーが誤った構文を書いた場合でもhtmlファイルに変換する事を防ぐ事によって、未然に大幅なレイアウト崩れが起きないようにしているのだと思います。

ただこの判定は何というか甘いです。

tabviewの判定: 下記の構文を書くと構文エラーとなりtabviewが閉じません。

[[tabview]]
[[tab]]
折り畳み文1
[[/tab]]
[[tab]]
折り畳み文2
[[/tab]]
フッター
[[/tabview]]

tabviewは必ず[[/tabview]]のすぐ上に[[/tab]]がある形、つまり構文の最後が

[[/tab]]
[[/tabview]]

でないとhtml(</div>)に変換されないのです。ただし構文の最後が上記の形にさえなっていれば、別の言い方をすれば[[/tabview]]のすぐ上に[[/tab]]がありさえすれば、この[[/tab]]に対応する[[tab]]がなくても構文エラーにはならないのです(これが私に今回の技法を気付かせる切っ掛けとなった質問を生みました)。

tabviewは何に変換されるの?: この解説の最後に、今回の技法でどのようなhtml構文が生成されているのか紹介しますが、tabviewに関する構文は<div>要素と<ul><li>要素に変換されます。またtabviewの最初と最後の箇所には<script>要素もつきます。レイアウトのみに的を絞って言えば<ul><li>は正に折り畳みを開くタブそのものです。それ以外はdivに囲まれています。

[[div]]~[[/div]]の変換条件: [[div]]が<div>に変換される条件はいまいちよくわかりません。

[[/div]]が</div>に変換される条件は簡単です。該当する[[/div]]より上に、これに対応する[[div]]さえあれば良いのです。そうその間に<div>~</div>に変換される別の構文があろうともです。

つまり何をしているのか: まずあえて対応する[[tab]]を持たない[[/tab]]を書き込む事によってtabviewの最後を

[[/tab]]
[[/tabview]]

という形にします。これよって構文エラー判定を回避しています。こうする事によってどのタブが開かれようとも必ずtabviewの下部に文章が表示される領域を確保します。

ただし、この状態ではフッターに[[/tab]]という余計な文章が挿入されるので、これを消す必要があります。だから、この[[/tab]]をdisplay:none(中の文章が見えなくなる設定)のdivで囲み、[[/tab]]という単語を消しているのです。

html変換: これは詳しく話すと長くので変換完了後のhtmlソースだけ載せます。ただし注意して欲しいのは、html構文に変換される際、各div要素に付けられるid要素の値はランダムだと言う事です。毎回違うidが付けられるのです。

<script type="text/javascript" src="http://d3g0gp89917ko0.cloudfront.net/v--edac79f846ba/common--javascript/yahooui/tabview-min.js">
</script>
<div id="wiki-tabview-4ef6e2921536dc2bd28f74368bee8109" class="yui-navset">
<ul class="yui-nav">
<li class="selected"><a href="javascript:;"><em>untitled</em></a></li>
<li><a href="javascript:;"><em>untitled</em></a></li>
</ul>
<div class="yui-content">
<div id="wiki-tab-0-0">
<p>折り畳み文1</p>
</div>
<div id="wiki-tab-0-1" style="display:none">
<p>折り畳み文2</p>
</div>
フッター
<div style="display:none;">
<p>[[/tab]]</p>
</div>
</div>
<script type="text/javascript">
//<![CDATA[
OZONE.dom.onDomReady(function(){
        var tabView4ef6e2921536dc2bd28f74368bee8109 = new YAHOO.widget.TabView('wiki-tabview-4ef6e2921536dc2bd28f74368bee8109');
                }, "dummy-ondomready-block");
 
//]]>
</script></div>

最後の構文が

<script></div>

と自動変換にしては不自然な形になっていますが、これは誤記ではありません。上記のhtml構文は本当にそのままページソースからコピペしたものです。

なぜこうなるのかというと、wikidotが想定していない構文を書いているからです。

最後の[[/div]]について: これは重要な構文です。上記のhtml構文を見るとわかる通り、tabviewは大雑把に言えば下記の構造のhtml文に生成されます。

div class名 yui-navset

div class名 yui-content

div class名 <無し 折り畳み文>

div class名 <無し 折り畳み文>


.
.
.

そして、これによって変換されるhtml構文の

</div>
</div>
<script type="text/javascript">
<![CDATA[
OZONE.dom.onDomReady(function(){
var tabView4ef6e2921536dc2bd28f74368bee8109 = new YAHOO.widget.TabView('wiki-tabview-4ef6e2921536dc2bd28f74368bee8109');
}, "dummy-ondomready-block");

]]>
</script></div>

上記の赤字で示した2つ並んだ</div>ですが、これは本来class名が"yui-navset"と"yui-content"の2つのdiv要素を閉じる構文です。しかし、今回はyui-contentの中に[[div style="display:none;"]]つまり<div style="display:none;">の構文を仕込んだ為、上記の赤字の</div>ではクラス名がyui-navsetのdivが閉じないのです。その為、クラス名がyui-navsetのdivを閉じる目的で[[/tabview]]のすぐ下に[[/div]]の構文を追記しているのです。

これはwikidot構文のhtml構文への変換法則を前提とした話であり、またwikidot構文の本来の使い方からは外れた話である為、難しい話になると思います。しかし、こういうのを意識すると表現の幅がグッと広まりますのでちょっと意識してみてください。

皆さんもご興味がありましたら、wikidotの穴を突くゲームをやってみましょう!バグや構文エラーが最大のアイデア源です!

折り畳みタブのデザインを変更する

基本

上記の解説を見てtabviewがどのようなhtml構文に変換されるのかを理解した方は折り畳みタブのデザインの変更の仕方も知ったと言えるでしょう。

一例を紹介します。折り畳みタブをCUI風(灰色と黒のデザイン)にします。

[[module css]]
.yui-nav{
border:none !important;
color:#EEE !important;
background-color:#000 !important;
padding:1px;
}
.yui-nav li a em{
border:solid #EEE 1px !important;
color:#EEE !important;
background-color:#000 !important;
}

.yui-nav li.selected a em{
border:none !important;
color:#000 !important;
background-color:#EEE !important;
}
.yui-navset{
background-color:#000 !important;
}
.yui-content{
border:none !important;
background-color:#000 !important;
color:#EEE !important;
}

[[/module]]

サンプル:

折り畳み文1

タブの配置変更

cssの-webkit-inline-flexなんてものを扱えば、表現の幅が更に広まります!
参考: CSS3の「フレキシブルレイアウト」使い方まとめ

タブも横書き(隠し機能)

css:

[[include :scp-jp-sandbox2:inc:addspecialcss]]

※隠し機能(各自タブと文章格納スペースのwidthを設定する必要がある為)

.CustomTabR .yui-navset{
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    vertical-align: top;
    width:100%;
    border-left:none;
}
 
.CustomTabR .yui-navset ul {
   border-bottom:none;
    padding:0;
    border-right:solid #333 2px;
}
 
.CustomTabR .yui-navset ul li{
    display: inline-block;
}
.CustomTabR .yui-navset .yui-nav li{
margin:0;
}
 
.CustomTabR .yui-navset ul li.select{
    display: block;
    margin:0;
    border-radius:0;
}
 
.CustomTabR  .yui-content{
        background-color:#F6F6F6;
        display:inline-block;
        border:solid #000 1px;
}
 
.CustomTabR  .yui-content:after{
 
}
 
.CustomTabR  .yui-content div{
    width:100%;
    border:none;
    background-color:transparent;
}

構文:

[[div class="CustomTabR"]]
[[tabview]]
[[tab タブ1]]
折り畳み文1
[[/tab]]
[[tab タブ2]]
折り畳み文2
[[/tab]]
[[tab タブ3]]
折り畳み文3
このようにタブと折り畳み文章の配置が変わります。
[[/tab]]
[[/tabview]]
[[/div]]

サンプル:

折り畳み文1

タブが縦書き(公開機能)

css:

[[include :scp-jp-sandbox2:inc:addspecialcss]]

※公開機能

構文:

[[div class="CustomTabRJ"]]
[[tabview]]
[[tab タブ1]]
折り畳み文1
[[/tab]]
[[tab タブ2]]
折り畳み文2
[[/tab]]
[[tab タブ3]]
折り畳み文3
このようにタブと折り畳み文章の配置が変わります。
[[/tab]]
[[/tabview]]
[[/div]]

折り畳み文1

[[div class="CustomTabRJC"]]
[[tabview]]
[[tab タブ1]]
折り畳み文1
[[/tab]]
[[tab タブ2]]
折り畳み文2
[[/tab]]
[[tab タブ3]]
折り畳み文3
このようにタブと折り畳み文章の配置が変わります。
[[/tab]]
[[/tabview]]
[[/div]]

折り畳み文1

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License