jQuery mobileのliタグ内に使える文字数が少ない

Read More

jQuery mobileのliタグ使うと、中に文字数が余り入らない。


半角英数字だと27文字(28文字目が点)


日本語だと14文字(15文字目が点)



まあスマートフォンに最適化させるのならそんなに文字を入れるなってことなんだろうけど、
このままじゃさすがに文字数が少なすぎる。



そこであるものを指定すると以下のように少しだけ文字数が確保できる。

半角英数字だと35文字(36文字目が点)
8文字増えた

日本語だと19文字(20文字目が点)
5文字増えた


比較すると、

・デフォルト
半角27文字、全角14文字

・あるものを加える
半角35文字、全角19文字


つまりあることをすると約1.3倍の文字数が増加する。

まーわずかな差なんだけどこれでもやらないよりはマシだ。




方法は以下のように。
<ul data-role="listview" data-inset="false">
 <li>
  <a href="hoge">
   <p class="ui-li-desc">text text 123456789 123456789 123456789 </p>
  </a>
 </li>
 <li>
  <p class="ui-li-desc">text text 123456789 123456789 123456789 </p>
 </li>
</ul>
pタグにclass="ui-li-desc"を指定する。
※ここでは便宜上aタグも段落を付けている

本来はこれ、補足的な文章を足すのに使うのだろうけど、
メインとなる文章を書かずに利用するとイイ感じに表示してくれる。



ちなみに本来の使い方はこちら
<ul data-role="listview" data-inset="false">
 <li>
  <a href="hoge">
   <h3>main text</h3>
   <p class="ui-li-desc">sub text</p>
  </a>
 </li>
 <li>
  <h3>main text</h3>
  <p class="ui-li-desc">sub text</p>
 </li>
</ul>


その見え方





あとstyle属性を直に記述することもできるけど、それをやっちゃうと動作が重くなるのでお勧めできない。

しかもstyle属性を加えるんだったらCSSやJS自体に手を加えるのも同じことだし、そうするとフレームワーク自体がVerUpした時にまた手を加えなくちゃならなくなるし、何よりフレームワークの意味がなくなってくる。

なのでなるべく提供されている機能だけで済ませたい。


まあ焦らずとも需要はかなりあるはずなので、高頻度でVerUpして色んな機能や見せ方が増えるよきっと。


まだ所詮α版だもの…