jQuery Mobileのリストでデフォルトの高さのリストにサムネイルを高さ一杯に含める

ちょっと意味不明なタイトルですが。
jQuery Mobileでリストを書くときの
Tipsです。昨日ちょっと個人的に話題
に上がったのでメモ的に記事にします。
最近はすっかりJQMの話題が減っていた
ので丁度いいですね。

というわけで備忘録的な記事。jQuery Mobileの話です。触ったことがある方向けですかね。普通のリストの高さに合わせてサムネイルを含めます。正しい方法かどうかは知りません。

jQuery Mobileのリスト

これが普通のリストです。このマークアップは以下のような感じ。

<ul data-role="listview">
<li><a href="example01.html">foo</a></li>
<li><a href="example02.html">bar</a></li>
</ul>

listviewというルール名をdata属性に与えればリスト化します。

画像付きにしたい・・けど

こういう感じで画像を含めたいんだ、という時は画像を入れれば良いだけ・・・

<ul data-role="listview">
<li><a href="example01.html"><img src="foo.jpg">foo</a></li>
<li><a href="example02.html"><img src="bar.gif">bar</a></li>
</ul>

ですが、画像を含めると自動でサイズが80ｘ80pxになり、リストの高さも高くなるのがJQMの仕様です。

よく見かける方法

この画像サイズを小さくする方法としてよく見かけるのが画像そのものにスタイルを書く、というもの。

<ul data-role="listview">
<li><a href="example01.html"><img src="foo.jpg" style="width:16px;height:16px;" class="ui-li-icon">foo</a></li>
<li><a href="example02.html"><img src="bar.jpg" style="width:16px;height:16px;" class="ui-li-icon">bar</a></li>
</ul>

こうです。画像にスタイルを書いてclass=”ui-li-icon”を直書きします。ただ、このままだとli内はセンターに寄せられるので16px以上を使えません。

これを、高さ一杯に含めよう、というのが本題。

positionが使われているので

.ui-li-iconのデフォルトのスタイルは以下のようになっています。

.ui-li-thumb, 
.ui-listview .ui-li-icon {
position: absolute;
left: 1px;
top: 0;
max-height: 80px;
max-width: 80px;
}
.ui-listview .ui-li-icon {
max-height: 40px;
max-width: 40px;
left: 10px;
top: .9em;
}

position: absolute;が付いており、場所も決められています。なので、topとleftをstyle属性で加えればCSSファイルを触らずに場所を指定できますね。

画像とかのサイズは勘で書いたので微調整はご自身でお願いします。多分40px前後じゃないですかね。

高さ一杯にするなら両方0にします。

<ul data-role="listview">
<li><a href="example01.html" style="padding-left:50px;"><img src="foo.jpg" style="max-width:40px;max-height:40px;top:0;left:0;" class="ui-li-icon">foo</a></li>
<li><a href="example02.html" style="padding-left:50px;"><img src="bar.jpg" style="max-width:40px;max-height:40px;top:0;left:0;" class="ui-li-icon">bar</a></li>
</ul>

テキストも含める場合はアンカーにもpadingを入れて調整しないとです。ちょっと無理やり感あるし、面倒ですね・・文句言うなら使うなって話ですがｗ

因みに画像はアンカーに含めなくても一応大丈夫ですが、位置の調整が変わるかもなので注意してください。

<ul data-role="listview">
<li><img src="foo.jpg" style="max-width:40px;max-height:40px;top:0;left:0;" class="ui-li-icon"><a href="example01.html" style="padding-left:50px;">foo</a></li>
<li><<img src="bar.jpg" style="max-width:40px;max-height:40px;top:0;left:0;" class="ui-li-icon">a href="example02.html" style="padding-left:50px;">bar</a></li>
</ul>