*

アイコンとサムネイルを表示する

公開日: : 最終更新日:2016/05/07 jQueryMobile ,

各項目のレイアウトを設定する

<li>の中には、色々なレイアウトを設定できます。いずれもHTMLタグと属性を追加するだけで大丈夫です。

<li>の中のレイアウト
・文字列のレイアウト
 <p>とか<h1>を<li>内に作成

・アイコンとサムネイル
 項目の左端に画像を表示

・バルーン内の文字列を表示(次回の記事で書きます。)
 小さい楕円の囲み内に文字列を表示する(位置は文字列の右隣)

・分割して表示
 2つのリンクにより右端を分割

ちなみに<li>内に表示する文字列のレイアウトには下記の表のタグや属性を利用する。これらはCSSにより自動的に文字の大きさや表示位置が決まります。

<li>内のタグに対応したCSSの設定
タグ、属性 CSS設定
<h1>~<h6> font-size:16pxとかいろいろ
<p>、<dl> font-size:12pxとかいろいろ
class=”ui-li-aslide” text-align:rightほか

・アイコンとサムネイル
<li>タグ内には、画像アイコンやサムネイルを設置できます。これらはどれも<p>の前に作成することで
項目の左側に置くことができます。以下の表はこれらの最大サイズや作成するHTMLタグです。

画像の設定
種類 最大画像サイズ HTMLタグ 説明
アイコン 16ピクセル四方 <img class=”ui-li-icon”> レイアウトにより位置の微調整が必要
サムネイル 80ピクセル四方 <img> 最初の1つだけがサムネイルに設定される

アイコンは<li>タグ内にある<img class=”ui-li-icon”>で表します。iconの大きさは最大16px四方に調整され、アイコンを配置するときは、レイアウトにより位置の微調整が必要になることがあります。

サムネイルは、<li>内にある初めの<img>で表します。サムネイルのときは、アイコンの大きさは最大80px四方に調整される。ですが、このタグにclass=”ui-li-icon”を設定してしまうと動作がうまくいかないです。

サンプルコードの実行結果はこちら

スポンサードリンク

関連記事

no image

ヘッダ内、フッタ内にボタンを表示する

ヘッダ内にボタンを表示してみる ヘッダ内にリンクであるaタグを作成すると、それがボタンとして表示さ

記事を読む

no image

jQueryMobileカテゴリーで出てくる用語集

jQueryMobileの記事で登場する用語を下記の表にまとめました。学習するときの助けになるかも。

記事を読む

no image

ナビゲーションバーを表示

ナビゲーションバーは、ヘッダ、フッタ内の複数のリンクをボタンのようにして表示するウィジェットです、よ

記事を読む

no image

ページのURLを設定する

ユーザーにページのURLを知らせる時に使用するのがdata-url属性です。 data-url属性

記事を読む

no image

項目リストを設定する

項目リスト(listview)は、ふくすうの項目を列挙するためのウィジェットで、項目には文字列や、画

記事を読む

no image

項目選択の複数ウィジェットをグループ化する

年月日など、複数のリストから同時に選択したいとき、ウィジェットのグループ化が有効です。グループ化され

記事を読む

no image

ポップアップを表示する

ポップアップ(popup)とは、pageの上に付加情報や画像などのコンテンツを重ねて表示するウィジェ

記事を読む

no image

コンテンツを表示する

コンテンツはそのページのメインとなる情報を表示する部分です。コンテンツはヘッダとフッタの間に配置しま

記事を読む

no image

data-属性によるウィジェットの設定

テーマの他にもウィジェットにdata-属性を追加して、色々な事ができます。 ウィジェ

記事を読む

no image

トグルスイッチを設定する

トグルスイッチ(toggle switch)とは、〇型のつまみを左右にドラッグして2つの値のうちどち

記事を読む

スポンサードリンク

Message

メールアドレスが公開されることはありません。

CAPTCHA


次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">



スポンサードリンク

jQueryMobile
トグルスイッチを設定する

トグルスイッチ(toggle switch)とは、〇型のつまみを左右に

jQueryMobile
項目選択の複数ウィジェットをグループ化する

年月日など、複数のリストから同時に選択したいとき、ウィジェットのグルー

jQueryMobile
<select>により項目選択

ボタンによる選択では、1つの項目だけ選択するか、複数を同時に選択するか

jQueryMobile
値を選択するボタンを表示する

値を選択するボタンは以下の2つがあります。 ・複数の値から1つだ

jQueryMobile
ボタンを設定する

前回の記事では<a data-role="button">

→もっと見る

  • スポンサーリンク

PAGE TOP ↑