ほぞん2

タブを開く

タブの作り方｜開閉エリアのソース｜雑多なTips

---

◆タブの作り方

このページ(外部リンク)の様に複数の内容を切り替えて表示することができる、タブを作る方法です。

コピー＆ペーストと細かい編集を繰り返すので、PCでの作業をオススメします。作業は全てソースモード、若しくはメモ帳などの別エディターで行って下さい。

 

①コピーベースの作成

個人によって作りたいタブの個数や項目は異なると思います。まずはそれらに対応したコピーベースを作っていきます。

以下のことを行ってください。

• 以下のソースをタブの個数回コピー＆ペーストする
• 数字の部分をそれぞれ異なった値に変更する。（開閉バグを防ぐため大きな数の連番にする）
• 最後の項目の”｜”を削除する

タブの項目名｜

変更後(例示として使用したページのソースです)

アニマルガール｜セルリアン｜職員｜来園者

 

②個々のタブの作成

以下のことを行ってください。

• 下のソースをコーピ＆ペーストする（①のソースと混ざらないように注意）
• コピペしたソースの””と””の間に①のソースをペーストする
• ①をペーストしたソースを個数分コピー＆ペーストする

 

 

 

項目の内容

 

 

 

③タブの成形

細かい編集を行っていきます。以下のことを行ってください。

• 数字の部分を①と対応した数字に変更する
• 最初のタブの”uk-hidden”を二つとも削除する
• 最初のタブの”close”を”open”に変更する

 

 

 

項目の内容

 

 

変更後(例示として使用したページのソースです)

 

アニマルガール｜セルリアン｜職員｜来園者

 

 

アニマルガールは動物にサンドスターが触れて誕生したヒト化動物です。

 

 

 

 

 

 

セルリアンは無機物とサンドスターが触れて誕生した特殊生命体です。

 

 

 

 

 

 

職員はジャパリグループに雇用されている人物のことをさします。

 

 

 

 

 

 

来園者はジャパリパークに訪れる一般人のことを指します。

 

 

 

④バグ対応用ソース

複数のタブの項目名をドラッグすると、タブが全て閉じてしまい、表示されなくなってしまう事が確認されています。

もしそのバグが起こってしまったときのために、再表示させるためのソースを追加します。

以下の事を行って下さい。

• 下のソースの①を今まで書いたソースの一番上にコピー＆ペーストする
• タブの個数分、""と""の間に入れ子構造にしてコピー＆ペーストする(変更後のソースを参考にして下さい)
• 一番目の”region_open”を"region_close uk-hidden"に変更する
• 数字を対応したものに変更する
• 下のソースの②を入れ子構造の一番内側にコピー＆ペーストする。数字は一つ目のタブのものに変更する
• 追加したソースの最初に"

  "を、最後に

  を追加する

①

②

タブを開く

変更後

 

以上で完成です。

---

開閉エリアのデフォルトソース(見やすくするため改行しています)

 

+

 

 

 

分解すると下記のようになります。(終了タグは省略)

•  
•  
•  

data-uk-toggleがクラスでは無く、span要素の子要素であることに注意してください。

---

以下、それぞれの働きを列挙します。

(※エディタ表示時の働きについては不確定な部分があります)

• 
  開閉エリアに関わる内容を指定します。
  エディタ表示時に内側の文章を点線で囲み、「開閉エリア」と「（エリア解除）」を表示させます。
  エディタ表示時に内側の文章で、"region_content"classが付けられた文章の"uk-hidden"classを無効化し表示させます。
• 
  表示切替部分を指定します。
  エディタ表示時に内側の文章を点線で囲み、「開閉エリア」と「（エリア解除）」を表示させます。
  エディタ表示時に内側の文章の行間を見やすいように調整します。
  エディタ表示時に内側の文章で、"region_open / close"classが付けられた文章の"uk-hidden"classを無効化し表示させます。
• 
  このclass自体に意味はありません。
  "data-uk-toggle"で切り替える範囲を指定します。
• 
  開いているとき / 閉じているときの表示を指定します。
  意味を指定するだけで、このclassだけで切り替えができるわけではありません。
  内側の文章にカーソルを合わせたとき、カーソルが選択表示になります。
• 
  切り替えのスイッチ的役割を指定します。
  内側の文章をクリックしたとき、ターゲットとして指定したclassが付けられた文章の開閉状態が切り替わります。
  target: '.クラス名' でclassを指定します。
• 
  内側の文章の開閉の初期状態を閉にします。
  "region_area"class内もしくは"edit_memo"class内に無い限り、エディタ表示時に内側の文章は表示されません。
• 
  このclass自体に意味はありません。
  開閉エリアの中身を指定します。
  意味を指定するだけで、このclassに働きはありません。

---

このタブには開閉エリアに関した様々な豆知識を載せています。

• "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を付けておくことで開閉エリアに気付きやすくなります。よほどの隠し要素としたいのならば別ですが、きちんと気付いてもらえるように付けておくことをお勧めします。