このスレッドは管理者によりロックされています。記事の閲覧のみとなります。
ホームに戻る > スレッド一覧 > 記事閲覧
jQuery Mobileの使い方とスマホサイト制作の掲示板
日時: 2012/05/26 22:25
名前: スマホサイト制作 掲示板

(*) 「jQuery Mobile辞典」
http://www.amazon.co.jp/gp/product/4798033650/ref=as_li_tf_tl?ie=UTF8&tag=heartlinks-22&linkCode=as2&camp=247&creative=1211&creativeASIN=4798033650

<内容>
スマホサイト制作の新手法jQuery Mobileの使い方を豊富な用例を使って解説したリファレンスブックです。毎年数多くのスマートフォンやタブレットが発売されるなか、Web制作の現場は多大な労力と工夫をついやして多彩なデバイスに対応することを求められています。そうしたなか、ほぼすべてのブラウザとプラットフォームに対応できるjQuery Mobileというフレームワークが注目されています。本書は、jQuery Mobileの概要から、実際にスマートフォン用に最適化されたUIを作るための機能の使い方、jQuery Mobileを拡張するためのスクリプトの知識までをリファレンス形式で解説。各種APIとの連携の例も掲載しています。iOSもAndroidも、Windows Phoneも、これ一冊で対応できます!

<目次>
第1章 jQuery Mobileについて
1-1 「jQuery Mobile」が、モバイルアプリケーション開発を大きく変える
1-2 jQuery Mobileの特徴
1-3 jQuery Mobileクイックスタート
1-4 カスタムデータ属性(data-*属性)とは
1-5 jQuery Mobileの定義済みクラス(ui-*クラス)
1-6 jQuery Mobileサイト設計のポイント
第2章 ページ構築
jQuery Mobileの1ページ
2-1 単一のHTMLでサイトを構築する
data-role="page"、id="ページ名を定義"
data-role="header"
data-role="content"
data-role="footer"
2-2 複数のHTMLでサイトを構築する
data-role="page"、id="ページ名を定義"
data-role="header"
data-role="content"
data-role="footer"
第3章 リンク(ページ遷移)
リンク(ページ遷移)について
3-1 ページリンクを作成する
<a href="#+ページid"></a>
<a href="同ドメインの他ファイル"></a>
3-2 Ajaxを用いないリンク(1)?Ajaxを使用しないと明示する方法
data-ajax="false"
3-3 Ajaxを用いないリンク(2)?外部サイトだと明示する方法
rel="external"
3-4 Ajaxを用いないリンク(3)?外部ドメインへのリンクを記述する
外部URLへリンク
3-5 Ajaxを用いないリンク(4)?target指定をする
target="target名"
3-6 ブラウザの「戻る」リンクを作る
data-rel="back"
3-7 遷移しないリンクを作る
<a href="#"></a>
3-8 ページ遷移エフェクト(1)?slide
data-transition="slide"
3-9 ページ遷移エフェクト(2)?slideup
data-transition="slideup"
3-10 ページ遷移エフェクト(3)?slidedown
data-transition="slidedown"
3-11 ページ遷移エフェクト(4)?pop
data-transition="pop"
3-12 ページ遷移エフェクト(5)?fade
data-transition="fade"
3-13 ページ遷移エフェクト(6)?flip
data-transition="flip"
3-14 ページ遷移エフェクトを逆方向にする
data-direction="reverse"
3-15 DOMキャッシュを使用する
data-dom-cache="true"
3-16 リンクにプリフェッチを使用する
data-prefetch
第4章 レイアウト
レイアウトについて
4-1 グリッドレイアウト
4-1-1 グリッドレイアウトを作成する
class="ui-grid-a"?"ui-grid-d"
class="ui-block-a"?"ui-block-e"
4-1-2 複数行のグリッドレイアウトを作成する
class="ui-grid-a"?"ui-grid-d"
class="ui-block-a"?"ui-block-e"
4-2 開閉パネル
4-2-1 開閉パネルを作る
data-role="collapsible"
4-2-2 開閉パネルを最初から開いておく
data-collapsed="false"
4-2-3 開閉パネルのテーマを設定する
data-theme="テーマ"
data-content-theme="テーマ"
4-3 アコーディオンパネル
4-3-1 アコーディオンパネルを作成する
data-role="collapsible-set"
4-3-2 アコーディオンパネルのテーマを設定する
data-theme="テーマ"
data-content-theme="テーマ"
第5章 ヘッダー
ヘッダーについて
5-1 ヘッダーを作成する
data-role="header"
5-2 ヘッダーに「戻る」ボタンを付ける(マークアップで設定する)
data-add-back-btn="true"
5-3 「戻る」ボタンのテキストを変更する(マークアップで設定する)
data-back-btn-text属性
5-4 「戻る」ボタンのテーマを変更する(マークアップで設定する)
data-back-btn-theme属性
5-5 ヘッダーにボタンを付ける(1)(左側にボタンを配置する)
<a href="#"></a>
5-6 ヘッダーにボタンを付ける(2)(両側にボタンを配置する)
<a href="#"></a>
5-7 ヘッダーにボタンを付ける(3)(右側にボタンを配置する)
ui-btn-rightクラス
5-8 ヘッダーにナビゲーションバーを付ける
data-role="navbar"
5-9 ヘッダーを固定配置する
data-position="fixed"
5-10 ヘッダーをフルスクリーンモードにする
data-position="fixed"、data-fullscreen="true"
第6章 フッター
フッターについて
6-1 フッターを作成する
data-role="footer"
6-2 フッターにボタンを付ける
ui-barクラス
6-3 フッターにナビゲーションバーを付ける
data-role="navbar"
6-4 フッターを固定配置する
data-position="fixed"
6-5 フッターをフルスクリーンモードにする
data-position="fixed"、data-fullscreen="true"
6-6 フッターをパーシステント(共通したフッター)にする
data-position="fixed"、data-id="フッターID"
第7章 ナビゲーションバー
ナビゲーションバーについて
7-1 ナビゲーションバーを表示する
data-role="navbar"
7-2 ナビゲーションバーのボタンにアイコンを表示する
data-icon属性
7-3 ボタンアイコンの表示位置を指定する(1)?テキストの下
data-role="navbar"、data-iconpos="bottom"
7-4 ボタンアイコンの表示位置を指定する(2)?テキストの左
data-role="navbar"、data-iconpos="left"
7-5 ボタンアイコンの表示位置を指定する(3)?テキストの右
data-role="navbar"、data-iconpos="right"
7-6 ナビゲーションバーのテーマを変更する
data-theme属性
第8章 ダイアログ
ダイアログについて
8-1 リンク先をダイアログとして開く
data-rel="dialog"
8-2 ダイアログの表示エフェクトをマークアップで個別変更する
data-transition属性
8-3 ダイアログを「閉じる」ボタンを作る(1)
data-rel="back"
8-4 ダイアログを「閉じる」ボタンを作る(2)(JavaScriptで閉じる)
dialog('close')メソッド
8-5 ダイアログの「閉じる」ボタンのテキストを変更する
data-close-btn-text属性
8-6 コントロールパネル風のダイアログを作成する
data-rel="dialog"、data-transition="slidedown"
8-7 ダイアログの最大幅を指定する
jQuery MobileのCSSの定義済みクラスを上書きする
8-8 ダイアログのタイトルを変更する
data-title属性
8-9 ダイアログのテーマを変更する
data-theme="テーマ名(a?e)"
data-overlay-theme="テーマ名(a?e)"
第9章 ボタン
ボタンについて
9-1 ボタンを表示する
data-role="button"、button要素、input要素(一部)
9-2 「戻る」ボタンを表示する
data-add-back-btn="true"
9-3 ボタンにアイコンを設定する
data-icon="アイコンの形状"
9-4 アイコンの表示位置を指定する(1)(テキストの上)
data-iconpos="top"
9-5 アイコンの表示位置を指定する(2)(テキストの下)
data-iconpos="bottom"
9-6 アイコンの表示位置を指定する(3)(テキストの右)
data-iconpos="right"
9-7 アイコンだけのボタンにする
data-iconpos="notext"
9-8 ボタンをグループ化する(1)(縦方向)
data-role="controlgroup"
9-9 ボタンをグループ化する(2)(横方向)
data-role="controlgroup"、data-type="horizontal"
9-10 四角いボタン形状にする(ボタンの角丸を取る)
data-corners="false"
9-11 ボタンの影を消す
data-corners="false"
9-12 ボタンをインライン化する
data-inline="true"
9-13 ボタンにテーマを設定する
data-theme属性
9-14 (リンク)要素で作成したボタンの使用可/不可を設定する
ui-disabled
第10章 リスト
リストについて
10-1 リストを表示する
data-role="listview"
10-2 リストを角丸にする
data-inset="true"
10-3 番号付きリストを作る
data-role="listview"
10-4 入れ子リスト(リストをネストする)を表示する
ul要素内のli要素の子要素として、さらにul要素を記述
10-5 リンクリストを作る(表示する)
li要素の子要素として<a href="#"></a>を1つ記述
10-6 リストにアイコンを表示する
data-icon属性
10-7 リストにテーマを設定する
data-theme="テーマ名"
10-8 分割リストを作る
li要素の子要素として<a href="#"></a>を2つ記述
10-9 分割リストのアイコンやアイコンのテーマを変更する
data-split-icon属性、data-split-theme属性
10-10 リストにデバイダーを入れる
data-role="list-divider"
10-11 リストのデバイダーのテーマを変更する
data-dividertheme属性
10-12 カウントバブルを表示する
span要素などにui-li-countクラスを指定
10-13 カウントバブルのテーマを設定する
data-count-theme属性
10-14 リストにサムネイル画像を表示する
li要素の子要素としてimg要素を記述
10-15 リストにアイコン画像を表示する
img要素に、ui-li-iconクラスを指定
10-16 リストに見出しを入れる
li要素の子要素としてh1?h6を記述
10-17 リストに説明テキストを表示する
li要素の子要素としてp要素などを記述
10-18 リストの右上に補足テキストを表示する
p要素などにui-li-asideクラスを指定
10-19 リストに検索フィルタを追加する
data-filter="true"
10-20 リストの検索フィルタの入力ヒントを変更する
data-filter-placeholder属性
第11章 フォーム
フォームについて
11-1 フォーム
11-1-1 フォーム要素とそのラベルをセットする
data-role="fieldcontain"、label要素
11-1-2 グループ化されたフォーム部品とラベルをセットする
data-role="fieldcontain"、legend要素
11-1-3 ラベルを非表示にする
ui-hidden-accessibleクラス、ui-hide-labelクラス
11-1-4 自動初期化を拒否する
data-role="none"
11-2 テキスト入力ボックス
11-2-1 テキスト入力ボックスを作成する
type="text"属性
11-2-2 テキスト入力ボックスのテーマを設定する
data-theme属性
11-2-3 入力のヒントを設定する
placeholder属性
11-2-4 検索ボックスを作成する
type="search"属性
11-2-5 パスワード入力ボックスを作成する
type="password"属性
11-2-6 数値入力ボックスを作成する
type="number"属性
11-2-7 URL入力ボックスを作成する
type="url"属性
11-2-8 メールアドレス入力ボックスを作成する
type="email"属性
11-2-9 電話番号入力ボックスを作成する
type="tel"属性
11-2-10 時刻入力ボックスを作成する
type="time"属性
11-2-11 年月日入力ボックスを作成する
type="date"属性
11-2-12 年月入力ボックスを作成する
type="month"属性
11-2-13 週入力ボックスを作成する
type="week"属性
11-2-14 日時入力ボックスを作成する
type="datetime"属性
11-2-15 ローカル日時入力ボックスを作成する
type="datetime-local"属性
11-2-16 色指定入力ボックスを作成する
type="color"属
11-2-17 テキストエリアを作成する
textarea要素
11-3 スライダー
11-3-1 スライダーを作成する
type="range"属性
11-3-2 スライダーのテーマを指定する
data-theme属性、data-track-theme属性
11-4 トグルスイッチ
11-4-1 トグルスイッチを作成する
data-role="slider"
11-4-2 トグルスイッチのテーマを指定する
data-theme属性、data-track-theme属性
11-5 ラジオボタン
11-5-1 ラジオボタンを作成する
type="radio"属性
11-5-2 ラジオボタンのテーマを指定する
data-theme属性
11-5-3 ラジオボタンを横に並べる
data-type="horizontal"
11-6 チェックボックス
11-6-1 チェックボックスを作成する
type="checkbox"属性
11-6-2 チェックボックスのテーマを指定する
data-theme属性
11-6-3 チェックボックスを横に並べる
data-type="horizontal"
11-7 セレクトメニュー
11-7-1 セレクトメニューを作成する
select要素、option要素
11-7-2 セレクトメニューのテーマを指定する
data-theme属性
11-8 カスタムセレクトメニュー
11-8-1 カスタムセレクトメニューを作成する
data-native-menu="false"
11-8-2 カスタムセレクトメニューを複数選択可能にする
multiple="multiple"
11-8-3 optgroup要素でoption要素をグループ化する
optgroup要素
11-8-4 カスタムセレクトメニューのテーマを設定する
data-theme属性、data-overlay-theme属性
第12章 初期設定
初期設定について
12-1 全体の初期設定
12-1-1 data-*属性に名前空間を設定する
ns
12-1-2 初期化スクリプトの呼出しを手動にする
autoInitializePage
12-1-3 サブページを参照するためのキーを指定する
subPageUrlKey
12-1-4 ページがアクティブになった場合に指定されるクラス名を変更する
activePageClass
12-1-5 ボタンがアクティブになった場合に指定されるクラス名を変更する
activeBtnClass
12-1-6 リンクやフォームにAjaxを利用するかどうかを設定する
ajaxEnabled
12-1-7 リンク要素への自動Ajaxのバインドを有効または無効にする
linkBindingEnabled
12-1-8 ハッシュの管理を有効化または無効化する
hashListeningEnabled
12-1-9 常にハッシュベースのURLを使う
pushStateEnabled
12-1-10 デフォルトのページ遷移エフェクトをまとめて設定する
defaultPageTransition
12-1-11 部分的スクロールのネイティブ機能を有効にする
touchOverflowEnabled
12-1-12 デフォルトのダイアログ表示時の表示エフェクトを設定する
defaultDialogTransition
12-1-13 ページのスクロール位置を記憶する最小距離を設定する
minScrollBack
12-1-14 ページロード中のメッセージを設定する(Ajaxによる遷移の場合のみ)
loadingMessage
12-1-15 ページロードのエラーメッセージを設定する(Ajaxによる遷移の場合のみ)
pageLoadErrorMessage
12-2 個別UIの初期設定
12-2-1 ヘッダーの「戻る」ボタンを初期設定する
$.mobile.page.prototype.options.addBackBtn
$.mobile.page.prototype.options.backBtnText
$.mobile.page.prototype.options.backBtnTheme
12-2-2 ヘッダーのテーマを初期設定する
$.mobile.page.prototype.options.headerTheme
12-2-3 コンテンツのテーマを初期設定する
$.mobile.page.prototype.options.contentTheme
12-2-4 フッターのテーマを初期設定する
$.mobile.page.prototype.options.footerTheme
12-2-5 input要素のtype属性の値を動的に変換する
$.mobile.page.prototype.options.degradeInputs
12-2-6 ボタンの初期設定をする
$.mobile.button.prototype.options.theme
$.mobile.button.prototype.options.corners
$.mobile.button.prototype.options.icon
$.mobile.button.prototype.options.iconpos
$.mobile.button.prototype.options.iconshadow
$.mobile.button.prototype.options.inline
$.mobile.button.prototype.options.shadow
12-2-7 テキスト入力ボックスの初期設定をする
$.mobile.textinput.prototype.options.theme
$.mobile.textinput.prototype.options.disabled
12-2-8 スライダーの初期設定をする
$.mobile.slider.prototype.options.theme
$.mobile.slider.prototype.options.trackTheme
$.mobile.slider.prototype.options.disabled
12-2-9 セレクトメニューの初期設定をする
$.mobile.selectmenu.prototype.options.theme
$.mobile.selectmenu.prototype.options.icon
$.mobile.selectmenu.prototype.options.iconpos
$.mobile.selectmenu.prototype.options.iconshadow
$.mobile.selectmenu.prototype.options.hidePlaceholderMenuItems
$.mobile.selectmenu.prototype.options.shadow
$.mobile.selectmenu.prototype.options.corners
$.mobile.selectmenu.prototype.options.menuPageTheme
$.mobile.selectmenu.prototype.options.overlayTheme
$.mobile.selectmenu.prototype.options.inline
$.mobile.selectmenu.prototype.options.closeText
$.mobile.selectmenu.prototype.options.nativeMenu
12-2-10 チェックボックス・ラジオボタンの初期設定をする
$.mobile.checkboxradio.prototype.options.theme
$.mobile.checkboxradio.prototype.options.disabled
12-2-11 ナビゲーションバーの初期設定をする
$.mobile.navbar.prototype.options.iconpos
12-2-12 ダイアログの初期設定をする
$.mobile.dialog.prototype.options.theme
$.mobile.dialog.prototype.options.closeBtnText
12-2-13 リストの初期設定をする
$.mobile.listview.prototype.options.inset
$.mobile.listview.prototype.options.theme
$.mobile.listview.prototype.options.splitIconTheme
$.mobile.listview.prototype.options.headerTheme
$.mobile.listview.prototype.options.dividerTheme
$.mobile.listview.prototype.options.countTheme
$.mobile.listview.prototype.options.splitIcon
$.mobile.listview.prototype.options.filter
$.mobile.listview.prototype.options.filterPlaceholder
$.mobile.listview.prototype.options.filterCallback
12-2-14 jQuery Mobileの自動初期化対象に含める
$.mobile.UIパーツ.prototype.options.initSelector
12-2-15 jQuery Mobileの自動初期化対象から外す
$.mobile.UIパーツ.prototype.options.keepNative
第13章 プロパティ
13-1 現在表示されているページを参照するプロパティ
$.mobile.activePage()
13-2 最初のページを参照するプロパティ
$.mobile.firstPage()
第14章 イベント
イベントについて
14-1 ページ関連イベント
14-1-1 ページ読み込みイベント
14-1-1-1 ページ読み込み前イベント
pagebeforeload
14-1-1-2 ページ読み込み後イベント
pageload
14-1-1-3 ページ読み込み失敗イベント
pageloadfailed
14-1-2 ページ遷移イベント
14-1-2-1 ページ遷移前イベント
pagebeforechange
14-1-2-2 ページ遷移後イベント
pagechange
14-1-2-3 ページ遷移失敗イベント
pagechangefailed
14-1-3 ページ表示イベント
14-1-3-1 ページ表示前イベント
pagebeforeshow
14-1-3-2 ページ表示後イベント
pageshow
14-1-3-3 ページ非表示前イベント
pagebeforehide
14-1-3-4 ページ非表示後イベント
pagehide
14-1-4 ページ初期化イベント
14-1-4-1 ページ初期化前イベント
pagebeforecreate
14-1-4-2 ページ初期化後イベント
pagecreate
14-1-4-3 ページ初期化イベント
pageinit
14-1-4-4 ページ削除時イベント
pageremove
14-2 タッチイベント
14-2-1 タップイベント
tap
14-2-2 タップホールドイベント
taphold
14-2-3 スワイプイベント
swipe
14-2-4 左スワイプイベント(スワイプイベント)
swipeleft
14-2-5 右スワイプイベント(スワイプイベント)
swiperight
14-3 スクロールイベント
14-3-1 スクロール開始イベント
scrollstart
14-3-2 スクロール終了イベント
scrollstop
14-4 仮想マウスイベント
14-4-1 マウスオーバーイベント
vmouseover
14-4-2 マウスダウンイベント
vmousedown
14-4-3 マウス移動イベント
vmousemove
14-4-4 マウスアップイベント
vmouseup
14-4-5 クリックイベント
vclick
14-4-6 マウスキャンセルイベント
vmousecancel
14-5 デバイスの向きを検出するイベント
14-5-1 端末回転イベント
orientationchange
14-6 レイアウトイベント
14-6-1 レイアウト変更イベント
updatelayout
第15章 API
APIについて
15-1 API
15-1-1 指定のページへ遷移する
$.mobile.changePage(to, options)
15-1-2 指定のページを読み込む(遷移はしない)
$.mobile.loadPage(url, options)
15-1-3 カスタムセレクタ関数
jqmData(name, value)
15-1-4 jQuery Mobileの(data-roleなどの)設定を削除する
jqmDataRemove()
15-1-5 ページ読み込みのメッセージを表示する
$.mobile.showPageLoadingMsg()
15-1-6 ページ読み込みのメッセージを非表示にする
$.mobile.hidePageLoadingMsg()
15-1-7 固定ツールバーを表示状態にする
$.mobile.fixedToolbars.show(immediately)
15-1-8 固定ツールバーを非表示状態にする
$.mobile.fiexedToolbars.hide(immediately)
15-1-9 固定ツールバーのトグル機能をON/OFFにする
$.mobile.fiexedToolbars.setTouchToggleEnabled(immediately)
15-1-10 URLなどを解析し、必要な情報を取り出すメソッド(URLパースAPI)
$.mobile.path.parseUrl(url)
15-1-11 絶対パス作成API
$.mobile.path.makePathAbsolute(relPath, absPath)
15-1-12 絶対URL作成API
$.mobile.path.makeUrlAbsolute(relUrl, absUrl)
15-1-13 同一ドメイン判別API
$.mobile.path.isSameDomain(url1, url2)
15-1-14 相対URL判別API
$.mobile.path.isRelativeUrl(url)
15-1-15 絶対URL判別API
$.mobile.path.isAbsoluteUrl(url)
15-1-16 サイレントスクロール関数
$.mobile.silentScroll(yPos)
15-2 個別UIのAPI
15-2-1 ページを初期化する
page()
15-2-2 ボタンの使用可/不可を設定する
button(options)
15-2-3 リンク(a要素)のボタンの装飾をまとめて指定する
buttonMarkup(options)
15-2-4 テキスト入力ボックスorテキストエリアの使用可/不可を設定する
textinput(options)
15-2-5 スライダー(input[type="range"])を初期化する
slider(options)
15-2-6 セレクトメニュー(select要素)を初期化する
selectmenu(options)
15-2-7 チェックボックス・ラジオボタンを初期化する
checkboxradio(options)
15-2-8 開閉パネルを初期化する
collapsible()
15-2-9 ナビゲーションバーを初期化する
navbar()
15-2-10 ダイアログをJavaScriptから閉じる
dialog('close')
15-2-11 リストを初期化する
listview('refresh')
補 章
補-1 テーマシステムについて
・jQuery Mobileのテーマシステム
・オリジナルのカスタムテーマの作成
・ThemeRollerを活用してテーマをらくらく作成
補-2 jQuery Mobileを具体的に使う(各種API連携とTIPS集)
・jQuery Mobileの日本語化
・Google MapsをjQuery Mobieサイトに埋め込む
・TwitterのタイムラインをjQuery Mobileページに表示する
巻末資料
巻末資料(1) data-*属性リファレンス
巻末資料(2) ボタンアイコン一覧(data-icon属性)



------------------------------

(*)ビジネススキルとキャリアアップの情報掲示板
http://makingsense.sakura.ne.jp/cgi-bin/business/patio.cgi
ビジネス、経済、投資、マーケティング、マネジメント、経営戦略、キャリアアップ、ビジネススキル、仕事術、就職活動、転職、役立つ資格の掲示板

------------------------------

[1338038726-1.jpg]
メンテ

Page: 1 | 全部表示 スレッド一覧