jQuery Mobileを使用してモバイルサイトを迅速に開発

10117 ワード

jquery httml 5 mobile other

AppleのiOSデバイスとAndroidがそれぞれ荒れ狂っているのを見て、あなたのサービスをどちらにすればいいのか分からないとき、一つのプラットフォームの開発を完了した後、このappを別のプラットフォームにポートすることをこっそり望んだことがありますか?jQuery Mobileはこのような便利なframeworkであり、特に小さな会社では人手が不足しており、jQuery Mobileはアプリケーションを異なるプラットフォームに発表する力を大幅に節約することができます.
この文章では、jQuery Mobileの運営の哲学、jQuery Mobileが提供するツール、そして実際の例でjQuery Mobile、jQuery Mobileが提供する様々な便利な機能を簡単に紹介します.
jQuery Mobileを知る
jQueryを使ったことがある人はきっとjQueryで有名な「write less,do more」を愛しているに違いない.jQueryを通していれば、悩ましいブラウザ間の問題を心配する必要はありません.しかし、手持ち式の装置が普及するにつれて、閲覧機の問題は携帯電話よりもPCよりも深刻になっていることが分かった.携帯電話ではブラウザだけでなく、OSの違いもPCよりも深刻だ.そして、2010年の10月にjQueryはついにみんなの期待の下でjQuery Mobileを発売しました.この簡単で使いやすいframeworkを使えば、すぐにdeviceにまたがるmobile appilcationを作ることができます.jQuery Mobileのいくつかの重要なfeaturesには、次のものが含まれます.

jQuery mobileは、iOS、Android、Blackberry、Palm WebOS、Nokia/Symbian、Windows Mobile、bada、MeeGo、HTMLが読める他のdevicesなど、異なるモバイルデバイスにまたがることができます.詳細な支援状況はMobile Graded Browser Support

を参照してください.

Progressive Enhancement & Graceful Degradation “taking a fully functional HTML web page, layering on additional JavaScript functionality, and giving capable browsers a top-of-the-line experience.” 古い携帯電話のように基本的な機能を見ることができます(evenはjavasciptを支援しません!!)、また、サポート度の高いブラウザで先進的な機能を楽しむことができます.

HTMLタグを設定することでjQuery Mobileの設定を完了するjQueryは主にHTML 5 data-*tagを通して様々なUIの設定を達成し、大まかな文法を認識すればjavascriptを1行書かずにappの雛形を迅速に構築することができる.JavaSriptに熱くないデザイナーや、UIのデザインについて頭が2人のエンジニアにとって、jQuery mobileの便利さは絶対に手放せません.

Hello World!
jQuery mobileの動作は簡単で、彼の主なプロセスには3つのステップが含まれています.

HTML 5 documnt

を宣言

include the jQuery mobile css,jQuery,jQuery mobile library(jQuery or google code CDN、または自分でdownloadこれらのファイルを自分のserverに置くこともできます)

jquery mobileで定義された構文(data-roleなど)を使用してpage structure

を定義する
簡単な例を次に示します.


<!DOCTYPE html>
<html>
 <head>
 <title>jQuery Mobile Tutorial on Codeforest.net</title>
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
 <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
 <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head>
<body>

<div data-role="page">

 <div data-role="header">
 <h1>Title</h1>
 </div><!-- /header -->

 <div data-role="content">
 <p>The content</p>
 </div><!-- /content -->

 <div data-role="footer">
 <h4>The Footer</h4>
 </div><!-- /footer -->
</div><!-- /page -->

</body>
</html>

いくつかのポイント:

ファイルをHTML 5に宣言されたフォーマット

headerの真ん中に,で必要なCSS&javascript library includeを

に入れる

data-role="page",data-role="header",data-role="content",data-role="footer"はjQuery Mobileが定義したtagsである.ここではHTML 5 custom data attributesのdata-*構文を使って、jQuery Mobileのどちらがheader、content、footerなのかをそれぞれ教えています.その中でpage&contentは必ずありますが、header&footerは自分のニーズに合わせています.

ブラウザでこのファイルのアドレスを入力すると、次の画面が表示されます.

jquery mobile sample 1 on android
jquery mobile sample 1 on ipad
List View
List Viewは、携帯電話でよく使われるUIといえ、上図のような顔をしています.jQuery MobileでこのようなUIを実装するのは簡単で、一般的なHTMLでよく使われるorderedリスト(

)、またはunorderedリスト(
- )、そして
  - - data-inset="true"は主にこのlistviewが文の真ん中に現れるかどうかを指定します.もしそうなら、jQuery Mobileは自動的に一番上のitemと一番下のitemに円弧の辺
    - リストをブロックに分割したい場合は(HTMLのtagに似ています)、liにdata-role="list-divider"のitemを追加できます.上記の例の
    - Overview
    - Nested list:listを多層構造にすると、jQuery Mobileは自動的にlist viewに上下層を切り替える効果を加える
    - List views with thumbnailsはliの最初にを加えると、jQuery Mobileは自動的に最左に縮図として配置されます.例えば:
```
<ul data-role="listview">
  <li><a href="index.html">
    <img src="images/album-bb.jpg" />
    <h3>Broken Bells</h3>
    <p>Broken Bells</p>
  </a></li>
  ...
</ul>
```
    - List views with Count Bubbles
    - に
      を追加すると、jQuery Mobileはbubbleにコンテンツパッケージを各itemの一番右側に置きます.例えば、
      <h2 style="padding: 1em 0;">A list with count bubbles</h2> <ul data-role="listview" data-inset="true"> <li><a href="#">SuperWidgets</a> <span>14</span></li> <li><a href="#">MegaWidgets</a> <span>0</span></li> <li><a href="#">WonderWidgets</a> <span>327</span></li> </ul>

第11週実践項目1—検証アルゴリズム(3)中序手がかり化二叉木のアルゴリズム検証

クラウドビットシステム開発