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

iPhoneアプリ開発 -バックグラウンド処理をした際にはまったこと-

* おきたこと 以下のメソッドを用いて、処理に時間がかかるもの(ここだとhoge)をバックグラウンド

記事を読む

iPhoneアプリ開発 -UIScrollViewでタッチを取得-

* やりたいこと UIScrollViewでタッチを取得する。 * 方法 通常のUIScrollV

記事を読む

スクリーンショット 2012-12-06 15.34.43

iPhoneアプリ開発 -端末がネットワークにつながっているかどうか知りたい-

* やりたいこと アプリがネットに繋がっていなければアラートボックスを表示させたい。 ネットに繋

記事を読む

no image

iPhoneアプリ開発 −iOS6からの「写真」へのアクセス問題−

写真を扱うアプリを開発している際に問題になったこと。 ※結構前の話を今更まとめてみる。 * 写真へ

記事を読む

no image

github-flowを使っての開発(3) -1つのプロジェクトを複数人で開発-

今まで2回ほどgithub-flowをもとにした開発の流れを書きました。 今回は、複数人で開発をする

記事を読む

Jenkins + iPhoneアプリ(番外1) -TestFlightを利用する-

* これまで - -- 執事(Jenkins)を雇いました。 * やりたいこと Jenk

記事を読む

no image

CakePHP1.3でテストコード(2) -フィクスチャをいじってみる(テストデータの動的登録)-

cakePHP1.3でのSimpleTestを使ったテストケースの第2回目。 今回は、動的にテストデ

記事を読む

no image

jQuery Mobileの初期設定 -jQuery Mobieを利用時にページ内リンクさせたい-

* 前提 jQuery Mobileを利用していて、以下のタグを使ってページ内遷移したいことがありま

記事を読む

Jenkins + iPhoneアプリ(2) -ローカルリポジトリにあるデータからipaファイル生成-

* これまで - * 最終目標 -(開発者)git(リモートリポジトリ)にソースをコミット

記事を読む

no image

iPhoneアプリ開発 −2本指で画像を移動させる−

* やりたいこと 表示させている画像(UIImageView)を2本指で移動させたい。 ※1本指は別

記事を読む

広告

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 ↑