jQueryMobile でテキストリンクをボタンへ

スマートフォンの画面はパソコンなどに比べて小さいため
a タグでつくったテキストリンクを
間違えてクリックすることも多々あります
このため、一般的な対策としては
アイコンにするか、ボタンにする
というように、わかりやすさを求めます
リストビューメニューをボタンにしたいなら
リストを形成している
ul タグ
liタグの ulタグ

data-role=”listview”
を追記します
ソースをかくと
<ul data-role=”listview “>
<li><a href=”http://www.yahoo.co.jp/”>ヤフー</a></li>
<li><a href=”http://google.co.jp/”>グーグル</a></li>
<li><a href=”http://www.amazon.co.jp/”>アマゾン</a></li>
</ul>
さらに
data-inset=”true”
も設定すると、角が丸くなって見栄えもよくなります
<ul data-role=”listview data-inset=”true””>
<li><a href=”http://www.yahoo.co.jp/”>ヤフー</a></li>
<li><a href=”http://google.co.jp/”>グーグル</a></li>
<li><a href=”http://www.amazon.co.jp/”>アマゾン</a></li>
</ul>
jQuery mobile で作成するリスト Lists
http://billboardtop100.net/2011/02/jquery-mobile-lists.html

を参考にさせていただきました

「jQueryMobile でテキストリンクをボタンへ」への1件のフィードバック

  1. まとめtyaiました【jQueryMobile でテキストリンクをボタンへ】

    スマートフォンの画面はパソコンなどに比べて小さいためa タグでつくったテキストリンクを間違えてクリックすることも多々ありますこのため、一般的な対策としてはアイコンにするか、ボタンにするというように、わかりやすさを求めますリストビューメニューをボタンにした…

コメントを残す

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