jQuery Mobile1.2のCollapsible Listsを試してみた -画像のカスタマイズについて-
公開日: :
最終更新日:2014/04/20 IT, jQueryMobile
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)にもできます。
広告
関連記事
-
iPhoneアプリ開発 芳名帳アプリ作成(5) -ペンサイズと入力エリア数の設定-
* 今までの流れ - -[http://pplace.jp/2013/06/1531/:titl
-
CAPTCHAの導入方法 -KCAPTCHAの導入-
CakePHP(1.2、1.3)にKCAPTCHAを導入してみたのでメモ。 * CAPTCHA
-
「Google Apps」無償版の新規登録が終了
以前、「Google Apps」を利用した以下の記事を書きましたが、とうとう無償版の新規登録が終了
-
Google Appsで独自ドメインメールの利用
独自ドメインでメアドを持ちたかったのでGoogle Appsを利用してみました。 その各種設定の覚
-
iPhoneアプリ開発 -UIScrollViewでタッチを取得-
* やりたいこと UIScrollViewでタッチを取得する。 * 方法 通常のUIScrollV
-
jQuery Mobileでdata-role=headerを使うときの注意点 -勝手にタイトルが変更される件-
* 現象 +headタグでtitleタグで文字列(A)を記述している +data-role=he
-
ターミナルでgitのコマンドを補完したりブランチ名を表示する – macでgitを便利に使うために –
* やりたいこと macのターミナルでgitをいじっていると -今のブランチってなんだっけ? -g
-
iPhoneアプリを開発してての疑問 -教えてエライ人!-
MacでiPhoneアプリを開発してて疑問に思ったのの解決してないことを列挙。 知識不足をさらけ出し
-
jQuery Mobileの初期設定 -jQuery Mobieを利用時にページ内リンクさせたい-
* 前提 jQuery Mobileを利用していて、以下のタグを使ってページ内遷移したいことがありま
-
研究室での進捗報告の方法について、ふと思ったこと
* 以下に加筆・修正して移動しました。