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

公開日: : 最終更新日:2014/04/20 IT, jQueryMobile


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)にもできます。

広告

関連記事

no image

Objective-cで悩んでいたこと −アクセサのことについて−

* 疑問 以前書いたiPhoneアプリを開発していて(Objective-Cを触っていて)疑問に思

記事を読む

no image

Twitterでサービスにログイン -ソーシャルログイン-

* やりたいこと -自身のWebサービスにTwitterIDでログイン(ソーシャルログイン)したい。

記事を読む

no image

iPhoneアプリ開発 -iOS6から変わったこと-

Deployment Targetを5.1にしていた時には気がつかなかったのですが、iOS6になって

記事を読む

no image

CakePHP1.3にSmartyを導入

いい加減、CakePHP(1.3)にもSmartyを導入することにしました。 * ダウンロード

記事を読む

no image

CakePHP1.3でテストコード(3) -ENUM型が使えない-

cakePHP1.3でのSimpleTestを使ったテストケースの第3回目。 今回は、テーブル構成で

記事を読む

no image

リンク文字をタッチしても色が変わらない --webkit-tap-highlight-colorのメモ-

* 背景 jQuery Mobileを利用してスマートフォン対応をしたサイトにおいてリンク文字をタッ

記事を読む

no image

カレログ騒動で考えたライフログのこと

今回、カレログというAndroidアプリが話題になり騒動になってます。 というわけで、ふとカレログ

記事を読む

ndk

Androidアプリ開発 -画像処理をC言語で高速化-

* 画像を扱う際の問題(1):計算処理の遅さ 前回、セピア画像にする方法を書きました。

記事を読む

Jenkins + iPhoneアプリ(1) -執事を雇う-

アプリ開発をしていると、自動化出来るところは自動化したくなってきますよね。 開発しているアプリも増え

記事を読む

no image

iPhoneアプリ開発 −フォントの変更−

一言:最近、iPhoneアプリの開発のためMacばかり触ってて、Windowsに戻ると混乱します。

記事を読む

広告

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

広告

no image
[感想] Effective Objective-C 2.0 ☆☆☆☆★(4.5)

* 構成 - 第1章 Objective-Cに慣れる -

no image
[感想] iOSアプリテスト自動化入門 ☆☆☆(3.0)

* 構成 - Chapter 1 テスト自動化への取り組み

DeployGateを試してみた(iOS編) -DeployGateがiOSに対応-

今までのDeployGate - -[http://pplace.

iPhone/iPadアプリを開発するためにやったこと

今までに、iPhoneを3本ほどリリース((リリースしたアプリは全て1

no image
ターミナルでgitのコマンドを補完したりブランチ名を表示する – macでgitを便利に使うために –

* やりたいこと macのターミナルでgitをいじっていると -今の

→もっと見る

PAGE TOP ↑