検索

クイックアクセス

チラ裏

おなかすいた族！

リンク

人気の50件

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

jQuery
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 日本語リファレンス

http://dev.screw-axis.com/doc/jquery_mobile/

jQuery Mobile/バージョン

チュートリアル

jQuery Mobile 基礎編

http://yst.web.infoseek.co.jp/jquerymobile/

jQuery Mobileで作られたスライド

http://yst.web.infoseek.co.jp/jquerymobile.html

対応プラットフォーム

http://jquerymobile.com/gbs/

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.

http://jquerymobile.com/strategy/

jQuery Mobile Overview - Boston from Todd Parker

機能

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

ページ遷移

ページ遷移はリンクやフォームが自動的に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>

デザイン

http://jquerymobile.com/designs/

jQTouchとの違い

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

jQTouchはWebKit専用

リリースノート超訳

http://d.hatena.ne.jp/yuunachan/20101018/1287359932

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

http://www.ark-web.jp/sandbox/wiki/6412.html

ギャラリー

http://www.jqmgallery.com/

連載

http://www.atmarkit.co.jp/fdotnet/chushin/jqmobile_01/jqmobile_01_01.html

スライド

jQuery Mobile from yoshikawa_t

関連

参考