jQuery Mobileで簡単なアプリケーションを作成する

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){ //v1.0 for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x); return 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>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

リンクタイプについてはこちらをご覧ください 。



これで、アプリケーションの準備ができました！



最終結果 。

ソース

ドキュメント



あなたの仕事を楽しんでください！