jQuery Mobileの使い方と挙動のまとめ その1 http://www.ark-web.jp/sandbox/wiki/6412.html

[edit]

目次

[edit]

概要

[edit]

使い方

上記のサンプル画像

[edit]

動作確認

[edit]

チートシート的なモノ その1

以降、動作確認できるものを↓こちらに置いてあります。

以降、各種data-roleなどを指定した場合にどのように変化するかをまとめたものです。
実際の挙動については上記チートページから確認できます。

チートページのイメージ

[edit]

Toolbar - 画面の上につくボタンとアイコンの種類

形式:

<div data-role="header" data-position="inline">
	<a href="index.html" data-icon="delete">Cancel</a>
	<h1>Edit Contact</h1>
	<a href="index.html" data-icon="check">Save</a>
</div>
data-icon形状表示場所サンプル文字数制限
delete角丸四角
(X)アイコン
下記参照<a href="#hoge" data-icon="delete">hoge</a>特に無し
(全角3字程度?)
check角丸四角
(レ)アイコン
下記参照<a href="#save" data-icon="check">save</a>特に無し
(全角3字程度?)
gear角丸四角
(*)アイコン
下記参照<a href="#options" data-icon="gear">Options</a>特に無し
(全角3字程度?)
plus角丸四角
(+)アイコン
下記参照<a href="#plus" data-icon="plus"> </a>特に無し
(全角3字程度?)
minus角丸四角
(-)アイコン
下記参照<a href="#minus" data-icon="minus"> </a>特に無し
(全角3字程度?)
arrow-l角丸四角
(<)アイコン
下記参照<a href="#prev" data-icon="arrow-l">戻る</a>特に無し
(全角3字程度?)
arrow-r角丸四角
(>)アイコン
下記参照<a href="#next" data-icon="arrow-r">進む</a>特に無し
(全角3字程度?)
arrow-u角丸四角
(∧)アイコン
下記参照<a href="#up" data-icon="arrow-u">上へ</a>特に無し
(全角3字程度?)
arrow-d角丸四角
(∨)アイコン
下記参照<a href="#down" data-icon="arrow-d">下へ</a>特に無し
(全角3字程度?)
refresh角丸四角
(○)アイコン
下記参照<a href="#" data-icon="refresh">再読込</a>特に無し
(全角3字程度?)
forward角丸四角
(→)アイコン
下記参照<a href="#forward" data-icon="forward">進む</a>特に無し
(全角3字程度?)
back角丸四角
(←)アイコン
下記参照<a href="#back" data-icon="back">戻る</a>特に無し
(全角3字程度?)
grid角丸四角
(田)アイコン
下記参照<a href="#list" data-icon="grid">リスト</a>特に無し
(全角3字程度?)
star角丸四角
(★)アイコン
下記参照<a href="#favorit" data-icon="star">お気入</a>特に無し
(全角3字程度?)
alert角丸四角
(▲)アイコン
下記参照<a href="#alert" data-icon="alert">ご注意</a>特に無し
(全角3字程度?)
info角丸四角
(!)アイコン
下記参照<a href="#help" data-icon="star">ヘルプ</a>特に無し
(全角3字程度?)
[edit]

最後に

今回は、基本的な使い方と、画面遷移について、ヘッダー部分についてをやりました。
機能は盛りだくさんなので、次回に続きます。どうぞよろしくお願いしますm(_ _)m

投稿者竹村 | パーマリンク

| append.gif

tag:JavaScript, スマートフォン?, ライブラリ?


添付ファイル: fileimg-02.jpg 1109件 [詳細] fileimg-01.jpg 1501件 [詳細]

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2010-11-04 (木) 12:37:47 (2127d)

アークウェブのサービスやソリューションはこちら