最終更新:2015-07-15 (水) 13:57:11 (1164d)  

jQuery Mobile はてなブックマークを見る
Top / jQuery Mobile

http://jquerymobile.com/

div要素?によってメインページ、サブページを記述し、各ページのヘッダやコンテンツを記述する

<!-- ぺージ -->
<div data-role="page">
	<!-- ヘッダー -->
	<div data-role="header">
		<h1>Page Title</h1>
	</div>
	<!-- コンテンツ -->
	<div data-role="content">
		Page Contents
	</div>
	<!-- フッター -->
	<div data-role="footer">
		<h1>Page Footer</h1>
	</div>
</div>

読み込み

  • <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

jQuery Mobile 1.0 日本語リファレンス

jQuery Mobile/バージョン

チュートリアル

jQuery Mobile 基礎編

jQuery Mobileで作られたスライド

対応プラットフォーム

http://jquerymobile.com/gbs/

Strategy

Delivering top-of-the-line JavaScript and a unified User Interface across the most-used smartphone web browsers.

機能

  • テーマとレイアウト
  • ヘッダとフッター(据え付けが可能で永続的な)
  • フォーム制御
  • ダイアログ
  • リスト表示
  • イベント
  • アニメーション

ページ遷移

  • ページ遷移はリンクやフォームが自動的にajax通信になる。
  • 戻るボタンも自動生成

ページ内遷移

<!-- リンク -->
<a href="#menu">menu</a>

<!-- 遷移先のページ -->
<div id="menu" data-role="page">

エフェクト

<!-- slide -->
<a href="#menu"
	data-transition="slide">menu</a>

通常のリンクにしたい場合

<!-- 違うドメインの場合はそのまま -->
<a href="http://jquerymobile.com/"></a>

<!-- targetを指定する -->
<a href="#menu" target="_blank"></a>

<!-- rel属性にexternalを指定する -->
<a href="#menu" rel="external"></a>

ボタン作成

<a href="index.html" data-role="button">削除</a>
<a href="index.html" data-role="button" data-icon="delete">削除</a>
<div data-role="controlgroup" data-type="horizontal">
   <a href="index.html" data-role="button"data-icon="arrow-u">上へ</a>
   <a href="index.html" data-role="button"data-icon="arrow-d">下へ</a>
   <a href="index.html" data-role="button"data-icon="delete">削除</a>
</div>

デザイン

jQTouchとの違い

http://stackoverflow.com/questions/3624660/difference-between-jqtouch-and-jquery-mobile

リリースノート超訳

jQuery Mobileの使い方と挙動のまとめ その1

ギャラリー

連載

スライド

関連

参考