*

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

公開日: : 最終更新日: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

ポップアップを表示する

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

記事を読む

no image

jQueryMobileとフォームを組み合わせてみる

フォーム(user-submittable form)は、HTMLタグでは<form>タ

記事を読む

no image

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

値を選択するボタンは以下の2つがあります。 ・複数の値から1つだけを選択するウィジェット ラジ

記事を読む

no image

ページ遷移時にアニメーションを付けてたり、Ajaxによるアクセスを禁止する

リンクを操作し、あるページから別のページに飛ぶときに、MozillaやWebkitベースのブラウザで

記事を読む

no image

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

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

記事を読む

no image

同じHTML文書に複数ページを作成してみる

jQueryMobileでは、同じHTML文書内に複数ページを作成することができます。手順は以下の通

記事を読む

no image

折りたたみを設定する

おりたたみ(collapse)は、予め概要を示す文字列が表示されている領域をクリックかタップすると、

記事を読む

no image

リンク先を設定したり、アイコンを利用する。

リンク(link)とは、次の画面に表示するコンテンツを表すもので、HTMLではaタグで表します。jQ

記事を読む

no image

ダイアログ

ダイアログは、ユーザーに対して警告や注意をひくために、伝えたいことを表示します。ダイアログが表示され

記事を読む

no image

ボタン内にアイコンを表示したり、デザインを変更する

ボタン内にアイコンを表示するには、リンクと同じように、data-icon属性、data-iconpo

記事を読む

スポンサードリンク

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 ↑