タブを開く
タブの作り方｜開閉エリアのソース｜雑多なTips
◆タブの作り方
このページ(外部リンク)の様に複数の内容を切り替えて表示することができる、タブを作る方法です。
コピー＆ペーストと細かい編集を繰り返すので、PCでの作業をオススメします。作業は全てソースモード、若しくはメモ帳などの別エディターで行って下さい。
①コピーベースの作成
個人によって作りたいタブの個数や項目は異なると思います。まずはそれらに対応したコピーベースを作っていきます。
以下のことを行ってください。
- 以下のソースをタブの個数回コピー＆ペーストする
- 数字の部分をそれぞれ異なった値に変更する。（開閉バグを防ぐため大きな数の連番にする）
- 最後の項目の”｜”を削除する
<span data-uk-toggle="{target: '.region_area_1'}">タブの項目名｜</span>
変更後(例示として使用したページのソースです)
<span data-uk-toggle="{target: '.region_area_1'}">アニマルガール｜</span><span data-uk-toggle="{target: '.region_area_2'}">セルリアン｜</span><span data-uk-toggle="{target: '.region_area_3'}">職員｜</span><span data-uk-toggle="{target: '.region_area_4'}">来園者</span>
②個々のタブの作成
以下のことを行ってください。
- 下のソースをコーピ＆ペーストする（①のソースと混ざらないように注意）
- コピペしたソースの”<span class="(略)">”と”</span>”の間に①のソースをペーストする
- ①をペーストしたソースを個数分コピー＆ペーストする
<div class="region_area">
<div class="region_switch"><span class="region_area_1 region_close uk-hidden" data-uk-toggle="{target: '.region_area_1'}"></span></div>
<div class="region_area_1 region_content uk-hidden">
<p>項目の内容</p>
</div>
</div>
③タブの成形
細かい編集を行っていきます。以下のことを行ってください。
- 数字の部分を①と対応した数字に変更する
- 最初のタブの”uk-hidden”を二つとも削除する
- 最初のタブの”close”を”open”に変更する
<div class="region_area">
<div class="region_switch"><span class="region_area_1 region_close uk-hidden" data-uk-toggle="{target: '.region_area_1'}"></span></div>
<div class="region_area_1 region_content uk-hidden">
<p>項目の内容</p>
</div>
</div>
変更後(例示として使用したページのソースです)
<div class="region_area">
<div class="region_switch"><span class="region_area_1 region_open" data-uk-toggle="{target: '.region_area_1'}"><span data-uk-toggle="{target: '.region_area_1'}">アニマルガール｜</span><span data-uk-toggle="{target: '.region_area_2'}">セルリアン｜</span><span data-uk-toggle="{target: '.region_area_3'}">職員｜</span><span data-uk-toggle="{target: '.region_area_4'}">来園者</span></span></div>
<div class="region_area_1 region_content">
<p>アニマルガールは動物にサンドスターが触れて誕生したヒト化動物です。</p>
</div>
</div>
<div class="region_area">
<div class="region_switch"><span class="region_area_2 region_close uk-hidden" data-uk-toggle="{target: '.region_area_2'}"><span data-uk-toggle="{target: '.region_area_1'}">アニマルガール｜</span><span data-uk-toggle="{target: '.region_area_2'}">セルリアン｜</span><span data-uk-toggle="{target: '.region_area_3'}">職員｜</span><span data-uk-toggle="{target: '.region_area_4'}">来園者</span></span></div>
<div class="region_area_2 region_content uk-hidden">
<p>セルリアンは無機物とサンドスターが触れて誕生した特殊生命体です。</p>
</div>
</div>
<div class="region_area">
<div class="region_switch"><span class="region_area_3 region_close uk-hidden" data-uk-toggle="{target: '.region_area_3'}"><span data-uk-toggle="{target: '.region_area_1'}">アニマルガール｜</span><span data-uk-toggle="{target: '.region_area_2'}">セルリアン｜</span><span data-uk-toggle="{target: '.region_area_3'}">職員｜</span><span data-uk-toggle="{target: '.region_area_4'}">来園者</span></span></div>
<div class="region_area_3 region_content uk-hidden">
<p>職員はジャパリグループに雇用されている人物のことをさします。</p>
</div>
</div>
<div class="region_area">
<div class="region_switch"><span class="region_area_4 region_close uk-hidden" data-uk-toggle="{target: '.region_area_4'}"><span data-uk-toggle="{target: '.region_area_1'}">アニマルガール｜</span><span data-uk-toggle="{target: '.region_area_2'}">セルリアン｜</span><span data-uk-toggle="{target: '.region_area_3'}">職員｜</span><span data-uk-toggle="{target: '.region_area_4'}">来園者</span></span></div>
<div class="region_area_4 region_content uk-hidden">
<p>来園者はジャパリパークに訪れる一般人のことを指します。</p>
</div>
</div>
④バグ対応用ソース
複数のタブの項目名をドラッグすると、タブが全て閉じてしまい、表示されなくなってしまう事が確認されています。
もしそのバグが起こってしまったときのために、再表示させるためのソースを追加します。
以下の事を行って下さい。
- 下のソースの①を今まで書いたソースの一番上にコピー＆ペーストする
- タブの個数分、"<span region_area_(略)>"と"</span>"の間に入れ子構造にしてコピー＆ペーストする(変更後のソースを参考にして下さい)
- 一番目の”region_open”を"region_close uk-hidden"に変更する
- 数字を対応したものに変更する
- 下のソースの②を入れ子構造の一番内側にコピー＆ペーストする。数字は一つ目のタブのものに変更する
- 追加したソースの最初に"<p>"を、最後に</p>を追加する
①
<span class="region_area_1 region_open"></span>
②
<span data-uk-toggle="{target: '.region_area_1'}">タブを開く</span>
変更後
<p><span class="region_area_1 region_close uk-hidden"><span class="region_area_2 region_open"><span class="region_area_3 region_open"><span class="region_area_4 region_open"><span data-uk-toggle="{target: '.region_area_1'}">タブを開く</span></span></span></span></span></p>
以上で完成です。
タブの作り方｜開閉エリアのソース｜雑多なTips
開閉エリアのデフォルトソース(見やすくするため改行しています)
<div class="region_switch">
<span class="region_area_1 region_open" data-uk-toggle="{target: '.region_area_1'}">+</span>
<span class="region_area_1 region_close uk-hidden" data-uk-toggle="{target: '.region_area_1'}">-</span>
</div>
<div class="region_area_1 region_content uk-hidden">
<p> </p>
</div>
</div>
分解すると下記のようになります。(終了タグは省略)
- <div class="region_area">
- <div class="region_switch">
- <span class="region_area_1">
- <span class="region_open / close">
- <span data-uk-toggle="{target: '.region_area_1'}">
- <span / div class="uk-hidden">
- <div class="region_content">
data-uk-toggleがクラスでは無く、span要素の子要素であることに注意してください。
以下、それぞれの働きを列挙します。
(※エディタ表示時の働きについては不確定な部分があります)
- <div class="region_area">
開閉エリアに関わる内容を指定します。
エディタ表示時に内側の文章を点線で囲み、「開閉エリア」と「（エリア解除）」を表示させます。
エディタ表示時に内側の文章で、"region_content"classが付けられた文章の"uk-hidden"classを無効化し表示させます。
- <div class="region_switch">
表示切替部分を指定します。
エディタ表示時に内側の文章を点線で囲み、「開閉エリア」と「（エリア解除）」を表示させます。
エディタ表示時に内側の文章の行間を見やすいように調整します。
エディタ表示時に内側の文章で、"region_open / close"classが付けられた文章の"uk-hidden"classを無効化し表示させます。
- <span class="region_area_1">
このclass自体に意味はありません。
"data-uk-toggle"で切り替える範囲を指定します。
- <span class="region_open / close">
開いているとき / 閉じているときの表示を指定します。
意味を指定するだけで、このclassだけで切り替えができるわけではありません。
内側の文章にカーソルを合わせたとき、カーソルが選択表示になります。
- <span data-uk-toggle="{target: '.region_area_1'}">
切り替えのスイッチ的役割を指定します。
内側の文章をクリックしたとき、ターゲットとして指定したclassが付けられた文章の開閉状態が切り替わります。
target: '.クラス名' でclassを指定します。
- <span class="uk-hidden">
内側の文章の開閉の初期状態を閉にします。
"region_area"class内もしくは"edit_memo"class内に無い限り、エディタ表示時に内側の文章は表示されません。
- <div class="region_content">
このclass自体に意味はありません。
開閉エリアの中身を指定します。
意味を指定するだけで、このclassに働きはありません。
タブの作り方｜開閉エリアのソース｜雑多なTips
このタブには開閉エリアに関した様々な豆知識を載せています。
- "region_area_1"などのclassは働きが特に無いため、自由に変更出来ます。例えばこのページでは、”a”,”b”,”c”を使っています。
- 開閉スイッチのtargetは自由に変えられます。例えば'.tc_red'とした場合、"tc_red"classが付いた(文字が赤色の)文章の開閉を切り替えることができます。
- 開閉スイッチは内包関係にすることで二重、三重にすることができます。その場合複数の開閉エリアを同時に開くことができます。
- "data-uk-toggle"はインライン要素なので文章の一部に付けることができます。
- "region_area"class、"region_switch"classは無くても正常に動きますが、エディタ表示時の編集がやり難くなるので、付けることをお勧めします。
- "region_open / close"classを付けておくことで開閉エリアに気付きやすくなります。よほどの隠し要素としたいのならば別ですが、きちんと気付いてもらえるように付けておくことをお勧めします。
コメント
最新を表示する
NG表示方式
NGID一覧