jquery-mobilejquery-mobileを使い始める


備考

これについては、JQuery MobileのWebサイトから直接取得しています。

http://jquerymobile.com/about/

jQuery Mobileは、スマートフォン、タブレット、デスクトップのすべてのデバイスでアクセス可能な応答性の高いWebサイトとアプリケーションを作成するために設計されたHTML5ベースのユーザーインターフェイスシステムで、堅実なjQueryとjQuery UI基盤上に構築されています。ページ遷移、タッチイベント、および様々なウィジェットが含まれています。軽量なコードは、プログレッシブなエンハンスメントで構築され、柔軟かつ簡単にテーマ設定可能なデザインを備えています。 - JQuery Mobileチーム

JQuery Mobileの詳細については、このサイトをご覧ください。これは初心者を助けるための抜粋です。

また、jquery-mobileの公式ページ( https://jquerymobile.com/demos)に関するサンプルや情報もあります

セットアップ

JQuery Mobileの現在のバージョンは1.4.5で、 https ://jquerymobile.com/からダウンロードできます。

  • zipファイルをダウンロードし、すべてのファイルを展開します。
  • アプリケーションの内部(wwwフォルダ内)にライブラリ(またはlib)フォルダを作成します。
  • libフォルダ内にjquery-mobileフォルダを作成します(mine jqmという名前です)。
  • jquery-mobileフォルダ内に抽出したすべてのjquery-mobileファイルを配置します。これで、index.htmlファイルのこれらのファイルにリンクすることができます。

下のコードでは、javascriptとcssファイルがURLに含まれています。代わりに、上記の箇条書きのポイントに従って、ローカルマシン上にあるパス、つまり以下のように含めることもできます。

<link href="lib/jqm/jquery.mobile-1.4.5.min.css" rel="stylesheet" />
...
<script type="text/javascript" src="lib/jqm/jquery.mobile-1.4.5.min.js"></script>
 

これらは、cssファイルとjsファイルの縮小版です。代わりに、開発中に非縮小バージョンを含めることができます。これにより、読み込みが必要な場合に読みやすくなります。もしそうなら、私は、実稼働環境への展開時にそれらを縮小バージョンに戻すことをお勧めします。

<!-- it is imported inside head tags. -->

<!-- no additional files needed, if css and js referred with full path. -->

 <!DOCTYPE html>
 <html>
 <head>
 <!-- Viewport setup. -->
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <!-- jQuery Mobile styles come first before js. -->
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
 <!-- Basic jQuery library -->
 <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
 <!-- jQuery Mobile library kind of extends upon jQuery -->
 <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
 </head>
 <body>

 <!-- example page element using jQuery mobile tags: -->      
 <div data-role="page" id="pageone">

     <div data-role="header" id="pageone-header">
        <h3>Insert Page header Here</h3>
     </div><!-- /header -->

     <div role="main" class="ui-content" id="pageone-content">
        <center><h3>Page title</h3></center>
        <!-- All HTML for the page content goes here -->
     </div><!-- /content -->
        
    <div data-role="footer" data-position="fixed">
        <h4>Insert Page footer Here</h4>
    </div><!-- /footer -->

 </div>
  
 </body>
 </html>