jQuery Mobileフレームワークは比較的長い間リリースされてきましたが、
やっとリリースできました。 その前に、jQTouchとSencha Touchを扱いました。 それぞれに長所と短所がありますが、今日はjQuery Mobileでの開発について説明します。 基本的な経験を得るために、いくつかのページ、twitterおよびgoogleマップとの統合、および基本要素のセットを備えた単純なアプリケーションの作成について説明します。 行こう！
そこで、最初にフレームワークとスタイルを接続します。
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" /> <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
それでは、ページを見ていきましょう。 ここで、jQuery MobileとjQTouchの類似点に注目する価値があります。アプリケーション全体は、特別な方法でマークされたdivがアプリケーションの「ページ」である1つのhtmlページです。 このような「アプリケーションページ」の基本形式は次のとおりです。
<div data-role="page"> <div data-role="header">...</div> <div data-role="content">...</div> <div data-role="footer">...</div> </div>
data-roleパラメーターは、ページ、ヘッダー、ページコンテンツ、またはフッターのdivロールを指定します。 また、アプリケーションをナビゲートできるように、
div data-role = "page"の
idパラメーターを設定する必要があります。
すぐに言及する価値があるのは、別のパラメーター
data-themeです。 このオプションはすべてのページ要素に適用され、使用するデフォルトのスタイルを決定します。 利用可能なトピックの例は
ここにあります 。
そのため、アプリケーションのメインページにはメニューがあり、その要素は例のあるページにつながります。 メニューを作成するには、
ulのリストが必要です。 次のようになります。
<ul data-role="listview" data-inset="true" data-theme="a"> <li><a href="#twitter_page">Twitter example</a></li> <li><a href="#map_page">Map example</a></li> <li><a href="#search">Search example</a></li> <li><a href="#about">About</a></li> </ul>
ulタグオプションについて：
- data-role = "listview"-これが様式化が適用されるリストであることを示します。
- data-inset = "true"-リストは画面の幅全体に表示されません;そうでない場合はfalseと同等です。
- data-theme = "a"-配色aを適用します。
jQuery Mobileでは、多くのタイプのリストを見つけることができます：シンプル、アイコン付き、画像付き、その他、その他。 例は
ここにあります 。
また、ツールバーに設定ボタンが必要です。 とても簡単です：
<a href="#settings" data-icon="gear" class="ui-btn-right">Options</a>
ご覧のとおり、このボタンは設定ページにつながり、歯車アイコン（
data-icon = "gear" ）があり、ツールバーの右側にあります（
class = "ui-btn-right" ）。 フレームワークには、事前に定義されたアイコンのセットが既にあり
ます 。
ここでそれらを確認でき
ます 。
最終的に、メインページは次のようになります。
<div data-role="page" id="main_page" data-theme="b"> <div data-role="header" > <h1 id="twi_acc">Home page</h1> <a href="#settings" data-icon="gear" class="ui-btn-right">Options</a> </div> <div data-role="content" > <ul data-role="listview" data-inset="true" data-theme="a"> <li><a href="#twitter_page">Twitter example</a></li> <li><a href="#map_page">Map example</a></li> <li><a href="#search">Search example</a></li> <li><a href="#about">About</a></li> </ul> </div> <div data-role="footer"> </div> </div>
それでは、残りのページの作成に移りましょう。 設定ページに行きましょう。 その上にフォーム要素のいくつかを配置し
ます 。その完全なリストは
ここにあります 。
マニュアルでは、特定のdiv内のすべての要素をグループ化することを推奨しています。
<div data-role="fieldcontain"> </div>
この推奨に従います。
フォームに次の要素を配置します。
入力欄
<label for="name">My name:</label> <input type="text" name="name" id="name" value="" />
大きなテキストボックス
<label for="textarea">About myself:</label> <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
スライダー、最大値、最小値、現在の値に設定
<label for="slider">Value this site:</label> <input type="range" name="slider" id="slider" value="0" min="-50" max="50" />
スイッチ
<label for="slider2">Value this site:</label> <select name="slider2" id="slider2" data-role="slider"> <option value="off">Like</option> <option value="on">Dislike</option> </select>
セレクター
<select name="select-choice-1" id="select-choice-1"> <option value="standard">Tired</option> <option value="standard">Happy</option> <option value="standard">Sick</option> <option value="standard">Sunny</option> </select>
設定ページはこれですべてです。 ところで、既存のコードを実行し、作成したページに移動すると、「戻る」ボタンが自動的に作成されたことがわかります。 些細なことですが、素晴らしい。
次に、別の簡単なページ-検索ページを作成しましょう。 入力フィールドと結果のリストという2つの主要な要素があります。
<div data-role="content" > <label for="search">Search</label> <input type="search" name="password" id="search" value="" /> <ul data-role="listview" data-inset="true" id="searchresult"> </ul> </div>
それでは、javascriptを見てみましょう。 キーアップイベントの入力フィールドにバインドし、結果のリストを埋めます。
$("#search").keyup(function(){ var res = shuffle(monthes); var list=''; $.each(res, function(index, value) { list+='<li role="option" tabindex="0" data-theme="a" class="ui-btn ui-li ui-btn-up-a"><div class="ui-btn-inner"><div class="ui-btn-text">'+value+'</div><span class="ui-icon ui-icon-arrow-r"></span></div></li>'; }); $("#searchresult").html(list); });
コードに関するいくつかの言葉。 最初の行では、既存の配列をミックスします。 以下のシャッフル機能。
var shuffle = function(o){
次に、リスト自体を作成します。 リスト要素が動的に追加され、フレームワークが必要なスタイルとパラメーターをハングさせるためにそれらを処理しないため、この方法で作成する必要があります。 しかし、おそらくもっと良い方法があります。
次に、いくつかの興味深いページを作成します。 1つ目は@Anywhereを使用してTwitterで動作します。 まず、必要なライブラリを接続します。
<script src="http://platform.twitter.com/anywhere.js?id=key_value&v=1" type="text/javascript"></script>
キーを取得するには、
ここで登録する必要があり
ます 。
次に、必要なページのコードを作成します。
<div data-role="page" id="twitter_page" data-theme="b"> <div data-role="header" > <h1>Simple twitter example</h1> </div> <div data-role="content" > <div id="twi_list"></div> </div> <div data-role="footer"> </div> </div>
そして今、最も重要なことは、必要なページが開いたときに実行されるjavascriptコードです。 このイベントを追跡するための
pageshowという特別なイベントがあります。 他のイベントについては
こちらをご覧ください 。
$('#twitter_page').live('pageshow',function(event, ui){ twttr.anywhere(function(T) { T.User.find('andrebrov').timeline().first(20).each(function(status) { $('div#twi_list').append('<p>' + status.user.name + ': ' + status.text + '</p>'); }); }); });
@Anywhereの操作の詳細については、
こちらをご覧ください 。
作成したページを開くと、しばらくの間空のままであることがわかります-ツイートが読み込まれます。 現在何かが起こっていることをユーザーに知らせるには、スピナーを追加します。 次に、コードは次のようになります。
$('#twitter_page').live('pageshow',function(event, ui){ twttr.anywhere(function(T) { $.mobile.pageLoading(); var j=0; T.User.find('andrebrov').timeline().first(20).each(function(status) { $('div#twi_list').append('<p>' + status.user.name + ': ' + status.text + '</p>'); j++; if (j==1){ $.mobile.pageLoading(true); } }); }); });
スピナーやその他のユーティリティについては
こちらをご覧ください 。
それでは、地図ページに行きましょう。 まず、必要なスクリプトを接続します
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script type="text/javascript" src="http://www.google.com/jsapi"></script>
次に、ページを作成します
<div data-role="page" id="map_page" data-theme="b"> <div data-role="header" > <h1>Map example</h1> </div> <div data-role="content" > <div id="map_canvas"></div> </div> <div data-role="footer"> </div> </div>
map_canvas要素にはマップも含まれます。 彼をスタイリングしましょう
#map_canvas{ width:100%; height: 100%; position:relative; top:0px; }
そして、現在の位置を決定するJavaScriptコードを追加し、それを基準にして地図を中央に配置し、中央にマーカーを追加します。 とりわけ、このマーカーをクリックしてイベントをハングさせます。
$('#map_page').live('pageshow',function(event, ui){ navigator.geolocation.getCurrentPosition(function(location) { var point = new google.maps.LatLng(location.coords.latitude, location.coords.longitude); var myOptions = { zoom: 13, center: point, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions); var marker = new google.maps.Marker({position: point,map: map}); google.maps.event.addListener(marker, 'click', function() { alert("Current coodinates are: latitude "+location.coords.latitude+", longitude "+location.coords.longitude); }); }); });
そして最後に、私に関するページ=）その上で、リスト項目は興味深い要素になります：
曲線区切り記号
<li data-role="list-divider" role="heading" tabindex="0" class="ui-li ui-li-divider ui-bar-b ui-corner-top"></li>
メールクライアントを開くリンク
<li><a href="mailto:mailme@gmail.com" class="ui-link-inherit">EMail me</a></li>
ダイヤルリンク
<li><a href="tel:+79000000000" class="ui-link-inherit">Call me</a></li>
リンクタイプについては
こちらをご覧ください 。
これで、アプリケーションの準備ができました！
最終結果 。
ソースドキュメントあなたの仕事を楽しんでください！