Fork
0
Fav
0
View
659
  • Play

Fullscreen

Smart Phone

  • Readme
  • JavaScript 46 lines
  • HTML 96 lines
  • CSS 59 lines

概要

HTML文書を折り畳みたいときにはbootstrapとか使ってタブやアコーディオンにすることが多いけど、 外部スクリプトを使いたくないこともあるので、onclickにactivateという関数を書くだけで簡易的に似たようなことをしてみた。 activateは二階層の文書構造を仮定する。ある親親要素の下に複数の親要素がある。親要素は見出しとコンテンツを含む。 ある見出しをクリックすると、その見出しを含む親要素は表示し、他の親要素のコンテンツは隠すというような動作をさせたい。 その際、他の親要素の見出しはクリックしたいので表示させたままにしたい。

親親要素(例えばbody)
  |
  |--親要素(例えばdiv)
  |   |--見出し(例えばh1)onclick="activate(this)" を記述
  |   |--コンテンツ(例えばdiv)
  |   |--コンテンツ(例えばdiv)
  |
  |--親要素(例えばsection)
  |   |--見出し(例えばh1)onclick="activate(this)" を記述(optional)
  |   |--コンテンツ(例えばdiv)
  |
  |--親要素(例えばdiv)
      |--見出し(例えばh1)onclick="activate(this)" を記述(optional)
      |--コンテンツ(例えばdiv)
      |--コンテンツ(例えばdiv)

柔軟性を持たせるために、隠すとか表示させるとか言った動作はdisplay属性を直接操作する代わりにクラスを足したり引いたりすることにした。 必要なクラスの種類は、「選択されている親の見出し」「選択されている親のコンテンツ」「選択されていない親の見出し」「選択されていない親のコンテンツ」の4つである。 これらを親親要素のdatasetとして記述する。それぞれのdataset名は次の通り。 どれか一つの見出しのonclickでactivate(this)が発動すれば、全ての見出しに自動的にaddEventListenerされます。

  • 選択されている親の見出し : data-active-title-class
  • 選択されている親のコンテンツ : data-active-content-class
  • 選択されていない親の見出し : data-inactive-title-class
  • 選択されていない親のコンテンツ : data-inactive-title-class

使用例

HTML文書

<div class="hoge"
   data-active-title-class="active_title1"
   data-active-content-class="active_content1"
   data-inactive-title-class="inactive_title1"
   data-inactive-content-class="inactive_content1"
   >
   <div>
      <h1 onclick="activate(this)">
         項目1
      </h1>
      <p>
         内容1。本日は晴天なり。
         内容1。本日は晴天なり。
         内容1。本日は晴天なり。
         内容1。本日は晴天なり。
         内容1。本日は晴天なり。
      </p>
   </div>
   <div>
      <h1>
         項目2
      </h1>
      <p >
         内容2。昨日は雨天でした。
         内容2。昨日は雨天でした。
         内容2。昨日は雨天でした。
         内容2。昨日は雨天でした。
         内容2。昨日は雨天でした。
         内容2。昨日は雨天でした。
      </p>
   </div>
   <div>
      <h1>
         項目3
      </h1>
      <p >
         内容3。明日も晴れるといいな。
         内容3。明日も晴れるといいな。
         内容3。明日も晴れるといいな。
         内容3。明日も晴れるといいな。
         内容3。明日も晴れるといいな。
         内容3。明日も晴れるといいな。
      </p>
   </div>
</div>

スタイルシート

.active_title1 {
    display: block;
}

.inactive_title1 {
    display: block;
}

.active_content1 {
    display: block;
}

.inactive_content1 {
    display: none;
}

最新のコードとデモ

http://jsdo.it/TakashiSasaki/iHhR

  • activate: 長いページの一部を折り畳んだり
  • activate: 長いページの一部を折り畳んだり

play

Complete!

Description What kind of game?

Control Device

jsdo.it websocket controller

Mouse

keyboard

smartphone

Fullscreen

TakashiSasaki

Author

Ehime University. Majoring in MANET and overlay network. Interests on Android, OSS and Southeast Asia. Being single again :-) ササキタカシ 佐々木隆志 JS3QBC局免失効中 Osaka/Matsuyama/Tokyo, Japan http://slashdot.jp/~Livingdead/journal/

Default Panel

Size

  • Width: px
  • Height: px

code

QR Code

Discussion

Questions on this code?

Tags