開閉エリアの解説

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

<div class="region_area">
<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>&nbsp;</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以外は全てクラスなので、文章に自由に付けることができます。

---

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

• <div class="region_area">
  開閉エリアに関わる内容を指定します。
  エディタ表示時に内側の文章を点線で囲み、「開閉エリア」と「（エリア解除）」を表示させます。
  エディタ表示時に内側の文章で、"uk-hidden"classが付いた文章を表示させます。
   
• <div class="region_switch">
  表示切替部分を指定します。
  エディタ表示時に内側の文章を点線で囲み、「開閉エリア」と「（エリア解除）」を表示させます。
  エディタ表示時に内側の文章の行間を見やすいように調整します。
   
• <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に働きはありません。

 

 

 

 

 

タグ

下書き