10分悩むのはハマったうちに入るんだろうか?

「アコーディオン」を採用するか「タブ」を採用するかは結構悩むところはあるけど、ワタシが今使いたい対象の場合、「カテゴリごとに量が違う」ので多分アコーディオンの方がいいかなぁ、と…、思ったんだけど、やってみたら「うーん、タブでも一緒か」と思ったりもした。

ともあれ Accordion Widget、猿真似ようとしていきなり躓く。…、あ「h3 だけじゃダメなのね、The markup of your accordion container needs pairs of headers and content panels。そりゃそーだ。ヘディングだけだと DOM アクセス的にフレームワークは「どーしようも出来ない」。なのでワタシのケースだと例えばこんな:

 1 <!-- そもそも Dialog で包んでる -->
 2 <div id="node-filters" class="dialog" title="Node filters">
 3 
 4 <!-- 全体を優しくアコーディオンに包む S -->
 5 <div id="node-filters-accordion" class="accordion-in-dialogs">
 6 <h3>Anime</h3> <!-- ヘディングと… -->
 7 <div> <!-- コンテントパネル S -->
 8 <fieldset>
 9 <legend>Type:</legend>
10 <!-- ... -->
11 </fieldset>
12 <!-- ... -->
13 </div> <!-- コンテントパネル E -->
14 <h3>Character</h3>
15 <div> <!-- コンテントパネル S -->
16 <!-- ... -->
17 </div> <!-- コンテントパネル E -->
18 </div> <!-- 全体を優しくアコーディオンに包む E -->
19 </div> <!-- Dialog なえんど -->

html としてはね。スクリプトの方は…。

1 <script>
2 // デフォルトで既にイケてることを祈る
3 $(".accordion-in-dialogs").accordion({
4 });
5 </script>

をーい…。しかも…:

ゆえ…:

1 <script>
2 // どうやらワタシのには fill が向いてる
3 $(".accordion-in-dialogs").accordion({
4     heightStyle: "fill",
5 });
6 </script>

はーいぃ:

いいんだけどたださぁ、一般的なアコーディオンて、「今アクティブなヤツをクリック」したら、「次のが開く」の振る舞いの方が普通じゃないの? この子、かたくなに「開いたら開きっぱ」なのね、今の場合「character」をクリックするまでは。

どうしたもんかなぁと。唯一それっぽいことが出来そうな collapsible はどう読んでみても期待のものとは違いそうであるし…、けどやってみる?:

1 <script>
2 $(".accordion-in-dialogs").accordion({
3     heightStyle: "fill",
4     collapsible: true,
5 });
6 </script>

そりゃぁそうだ、「閉じれる」てのはこういうことだもの:

まぁ「なんで閉じれたいか」なんてのはさ、ワタシの例ではっきり出てるけど「次のアイテムまで遠いから」でしょ、違うの? という意味ではまぁこれでもひとまず「ユーザのストレス」にはならんわけか、まぁこれでもいいか…。

たぶん「一個閉じたら次のが自動で開く」は、リスナーを自分で書け、つーことだろう。まぁそれでもいいとは思う。どっちが快適かはものによるもの。(ワタシの挙げたケースだと勝手に開いた方が操作が楽だが、常にそうだとは限らない。以前 kivy-launcher でまさにその例をやった。)

てなわけで、ワタシの例で出来上がったものは、「あぁ、タブの方がいいかもしらんなぁ」と。をしまい。

ちなみに「h3 でなけりゃならんの?」はこれは変更出来る。あまりやらんとは思うけど「アコーディオンを入れ子」にしたいとして、「入れ子の構造なんだから同一レベルヘディングで並べるのは論理的におかしいので滅茶苦茶気持ち悪い」というときに使えるだろう。(どんなだよ。)