FC2ブログ

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

を参考にさせていただきました
スポンサーサイト



テーマ : プログラミング
ジャンル : コンピュータ

trackback


この記事にトラックバックする(FC2ブログユーザー)

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

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

コメント

非公開コメント

最新記事
検索フォーム
GREEハコニワ攻略サイト
リンク
カテゴリ
月別アーカイブ
フリーエリア
最新記事
FXプライムレート
最新コメント
最新トラックバック