jQuery Mobile1.2のCollapsible Listsを試してみた　－画像のカスタマイズについて－

8月1日にjQuery Mobile1.2 Alphaが出ました。
403 Forbidden

まだAlphaなので自身のサービスには使いませんが、以前勉強会で聞いて気になっていた「Collapsible Lists」のカスタマイズを試したのでメモしておきます。

　今までのCollapsible Lists

そもそもCollapsible Listsってなんだっけ？から説明。
以下のサイトの説明を見てもらえば一目瞭然。
開閉式コンテンツ | jQuery Mobile 1.1.0 日本語リファレンス

しかし以下の点が気に入っておらず、使っていませんでした。

• 開閉時の画像がカスタマイズできない。

1.2からカスタマイズできるということで試してみました。

　1.2でのCollapsible Listsの画像のカスタマイズ方法

変更方法として以下の2つを書いておきます。

• jQuery Mobileで使えるアイコンを利用した場合
• オリジナル画像を利用する場合

　jQuery Mobileで使えるアイコンを利用した場合

HTMLのサンプルコードは以下のとおりです。

<div data-role="collapsible" data-theme="b" data-content-theme="d" data-collapsed-icon="arrow-u" data-expanded-icon="arrow-d" data-inset="true" data-iconpos="right">
 <h2>サンプル</h2>
  <ul data-role="listview">
   <li><a href="index.html">SampleA</a></li>
   <li><a href="index.html">SampleB</a></li>
   <li><a href="index.html">SampleC</a></li>
  </ul>
</div>

上記のコードを書くと以下のように表示されます。

※ちなみにアイコンが右側に表示されているのは、「data-iconpos=”right”」を設定しているからです。

以下に好きなアイコン(arrow-dなど)を指定すれば、アイコンが変更できます。

• data-collapsed-icon：閉じている時のアイコン
• data-expanded-icon：開いている時のアイコン

使えるアイコンは以下になります。
jQuery Mobile Docs – Button icons
今回だと、「arrow-u」と「arrow-d」を利用しています。

　オリジナル画像を利用する場合

まずCSSで利用する画像を指定します。

.ui-icon-custom-collapsed-img {
background-image: url("collapsed.png"); no-repat; background-size: 18px 18px;
}
.ui-icon-custom-expanded-img {
background-image: url("expanded.png"); no-repat; background-size: 18px 18px;
}

※利用する画像サイズにもよるので、background-sizeは適宜変更してください。

上記のCSSを利用した際のHTMLのサンプルコードは以下のとおりです。

<div data-role="collapsible" data-theme="b" data-content-theme="d" data-collapsed-icon="custom-expanded-img" data-expanded-icon="custom-expanded-img" data-inset="true" data-iconpos="right">
 <h2>サンプル</h2>
  <ul data-role="listview">
   <li><a href="index.html">SampleA</a></li>
   <li><a href="index.html">SampleB</a></li>
   <li><a href="index.html">SampleC</a></li>
  </ul>
</div>

注意するべき点は、ui-icon-の箇所は記入しないところです。
それ以降を記入します。

上記のコードを書くと以下のように表示されます。

オリジナルの画像が使われているのがわかります。

[おまけ]
ちなみに、「data-collapsed-icon」と「data-expanded-icon」に同じ値をセットするとdata-expanded-iconのほうは表示されなくなるので注意してください。

　まとめ

上記の通り、簡単にオリジナルの画像が使えるようになりました。
これでだいぶ便利になったんじゃないかなと思います。

さらに、カスタマイズの項目が増えています。
今回は、data-iconposでアイコンの表示位置を右側にしています。
これは、右側だけでなくて下(bottom)にも上(top)にもできます。