jQuery Mobileのリストの見た目をちょっとカスタマイズ -覚書-

公開日: : IT, jQueryMobile


jQuery Mobileを使えば簡単にスマートフォン対応できる言えば出来るのですが、少しでもカスタマイズしたいなと思うと色々とcssやjsを触る必要があります。
というわけで、今回はよく使うリストについての覚書。

 リストとは?

以下のようなものをリストといいます。
スマートフォン対応サイトではよく見るかと思います。

<ul data-role="listview" data-inset="true">
 <li><a href="#">サンプル</a></li>
</ul>

細かいことについては以下のサイトを参考

 カスタマイズについて

カスタマイズするには、cssとjsファイルを用意します。

<link rel="stylesheet" href="./jquery.mobile/jquery.mobile-1.0rc1.min.css" />
<link rel="stylesheet" href="./custom.css" /> <!-- これを用意 -->
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="/js/jquery-custom.js"></script><!-- これを用意 -->
<script src="./jquery.mobile/jquery.mobile-1.0rc1.min.js"></script>

今回はcss(custom.css)だけ用意すればOK。

 (ケース1) マージンをとりたい -幅いっぱいはいや!-

幅いっぱいではなくて間に幅を取りたい場合。
自身のcssでmarginを取ればOK。

<ul data-role="listview" data-inset="true" class="narrow">
 <li><a href="#">サンプル</a></li>
</ul>
(custom.css)
ul.narrow {
 margin: 10px;
}

そうすると以下のようになります。

 (ケース2) リストの中にリストを作りたい

リストの中にリストを作りたい場合。

<ul data-role="listview" data-inset="true" class="narrow-sample">
 <li data-role="list-divider">サンプルタイトル</li>
 <ul data-role="listview" data-inset="true" class="narrow-wide">
   <li data-role="list-divider">サンプルタイトルA</li>
   <li><a href="#">サンプルA-1</a></li>
   <li><a href="#">サンプルA-2</a></li>
   <li><a href="#">サンプルA-3</a></li>
 </ul>
 <ul data-role="listview" data-inset="true" class="narrow-wide">
   <li data-role="list-divider">サンプルタイトルB</li>
   <li><a href="#">サンプルB-1</a></li>
   <li><a href="#">サンプルB-2</a></li>
   <li><a href="#">サンプルB-3</a></li>
 </ul>
</ul>
ul.narrow-sample {
 margin: 10px;
 padding: 0px 0px 1px 0px;
}
ul.narrow-wide {
 margin: 5px 5px 5px 5px;
}

そうすると以下のようになります。

広告

関連記事

sample1

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

8月1日にjQuery Mobile1.2 Alphaが出ました。 まだAlphaなので自

記事を読む

no image

PhoneGapを触ってみた(3) -画像を扱う(Camera APIを使ってみる)-

今回は、PhoneGapのCamera APIを使って携帯のアルバムにある画像を扱ってみます。

記事を読む

no image

Selenium2.0でUIテスト(2) -Rubyでやってみよう-

前回は、Selenium + PHPを試しました。 今後はRubyでやってみようということでSele

記事を読む

no image

iPhoneアプリ開発 -Bundle identifierを変えてはまった-

* 現象 Bundle identifierを変えた際にXcodeで実機に転送しようとすると以下のエ

記事を読む

no image

iPhoneアプリ開発 -UIButtonのTouch Down、Touch up Inside、Touch up Outsideの使い方-

* Touch DownとTouch up Inside、Touch up Outsideの違い

記事を読む

no image

アプリのためにFacebookページ作成 -現時点で注意すべき点-

* 前回 会社のメルアドでFacebookページを作成する方法を載せました。 * Faceboo

記事を読む

setup

Google Appsで独自ドメインメールの利用

独自ドメインでメアドを持ちたかったのでGoogle Appsを利用してみました。 その各種設定の覚

記事を読む

no image

jQuery Mobileの1.0Beta3、1.0RC1で起きた現象 -iOS5で動かない!?-

最近おきたjQuery Mobile周りについてのメモ。 本来なら色々チェックしてちゃんと原因を調

記事を読む

no image

iPhoneアプリ開発 -スライドアウトするスプラッシュ画像-

* やりたいこと アプリを起動すると表示される画像(スプラッシュ画像)があります。 単に表示されるだ

記事を読む

no image

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

* やりたいこと macのターミナルでgitをいじっていると -今のブランチってなんだっけ? -g

記事を読む

広告

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 ↑