*

バルーンを表示、項目を分割、折り畳みやポップ内にlistviewを作成する。

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

バルーンとは、円形の囲みのことで、jQueryMobileでは、その内部に文字列を表示するために、実際の形は小さい長円形です。バルーンは<li>内の文字列の右側に表示されます。表示される文字列を想定されているのは数値で、フォントサイズは11pxです。

バルーンは<span class=”ui-li-count”>により表示できます。テーマの設定はウィジェットに対して、data-count-theme属性を追加します。なので、同じウィジェットのバルーンは全て同じテーマが適用されます。

●分割表示
<li>の内にリンクを2つ作ると、項目が横2つに分割されて、それぞれの領域が別々のリンクとして設定されます。後のリンクは自動的にアイコンのみのボタンとして設定されるため、data-icon属性によりアイコンの種類を設定します。また、この部分のデフォルトのテーマは”a”で設定されいますが、data-split-theme属性で変更できます。

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

別のウィジェット内に表示

このlistviewウィジェットは、ポップアップや折り畳みの書くウィジェット内にも表示できますが、CSSで調整が必要なことがあります。

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

スポンサードリンク

関連記事

no image

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

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

記事を読む

no image

data-属性により、ヘッダとフッタを常時表示する

前回の記事の続きです。 ヘッダとフッタを常時表示 ページのヘッダとフッタにdata-posi

記事を読む

no image

ボタンを設定する

前回の記事では<a data-role="button">によるボタンを取り上げましたが

記事を読む

no image

移動しないヘッダ、フッタにIDを設定する

MozillaやWebkitベースのブラウザでは、リンクにdata-transition="slid

記事を読む

no image

<select>により項目選択

ボタンによる選択では、1つの項目だけ選択するか、複数を同時に選択するかで、ラジオボタンかチェックボッ

記事を読む

no image

class属性によりレイアウトとテーマを設定する

ウィジェットが画面に表示されるとき、HTMLタグには様々なclass属性が追加されます。これらはCS

記事を読む

no image

ダイアログ

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

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 ↑