最終更新:2015-07-15 (水) 13:57:11 (3221d)
jQuery Mobile
Top / jQuery Mobile
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で作られたスライド
対応プラットフォーム
- iOS
- Symbian S60?
- Symbian UIQ?
- Symbian Platform?
- BlackBerry
- Android
- Windows Mobile
- webOS
- bada
- Maemo
- MeeGo
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
ギャラリー
連載
スライド
jQuery Mobile from yoshikawa_t
関連
参考
- http://ascii.jp/elem/000/000/607/607366/
- http://drumcoder.co.uk/blog/2010/nov/12/jquery-mobile-basics/
- http://www.moongift.jp/2010/10/2010102700-2/
- http://gigazine.net/index.php?/news/comments/20100816_jquerymobile/
- http://ascii.jp/elem/000/000/569/569140/?mail
- http://www.publickey1.jp/blog/11/jquery_mobile.html
- http://kachibito.net/web-design/jquery-mobile-mark-up-list.html
- http://blog.wonder-boys.net/?p=732