jQuery Mobileを使って携帯サイトを素早く開発します.

11462 ワード

jquery mobile

来源:http://brooky.cc/2011/04/18/jquery-mobile-for-fast-mobile-website-development/

AppleのiOS deviceとAndroidを見ていると、それぞれがすごい勢いで来ています.どのサービスを選ぶべきなのか分かりません.プラットフォームの開発作業を完成した後、このアプリを別のプラットフォームに紹介してもいいですか?jQuery Mobileはこのような便利なframe ewarkです.特に小さい会社の人手が足りないので、jQuery Mobileはあなたのappicationを違うプラットフォームにリリースする力を大幅に節約できます.
この文章は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を発売しました.この使いやすいフレームワークを使えば、すぐにdeviceにまたがるmobile apilcationができます.jQuery Mobileのいくつかの重要なfeat uresは以下を含む:

jQuery mobileは、様々なモバイルデバイスjQuery mobileにまたがり、supportの多くの異なるプラットフォームがあります.iOS、Android、Blackberry、Palm WebOS、Nokia/Symbian、Windows Mobile、bada、MeeGo、および他のHTMLが読めます.詳細な支援状況はMobile Graaded Browser Support

を参照することができます.

Progestive Enhancement&Gractful Degradation「tang a fully functional HTMLウェブページ、layering on additional JavaScript functionly、and giving capable browsers a top-off-the-experience.」の基本機能は、javascript-javascriptの機能を参照することができます.また、サポート度の高いブラウザでも、より先進的な機能を楽しむことができます.

はHTMLタグを設定してjQuery Mobileの設定jQueryを完成します.主にHTML 5 data-httを通じて各種のUIの設定を達成します.大雑把な文法を認識すれば、javascriptを書かなくても、素早くapの雛形を作ることができます.JavaSriptに対して熱くないデザイナーや、UIのデザインに関しては頭一つ二つの大きなエンジニアがいます.jQuery mobileの便利さは絶対に手放せません.

ハローワールド
jQuery mobileの動作はとても簡単です.彼の主な流れは三つのステップを含みます.

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>

いくつかのポイント:

はファイルを＜!DOCTYPE>>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 atributesの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でよく使われているorded list(＜ol＞＋＜li＞)や、unorded list(＜ul＞＋＜li＞)を使って、＜ul＞にdata-role=”listviewを加えるだけでいいです.上の図のUIのように、HTMLはとても簡単です.

...
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
  <li data-role="list-divider">Overview</li>
  <li><a href="docs/about/intro.html">Intro to jQuery Mobile</a></li>
  <li><a href="docs/about/features.html">Features</a></li>
  <li><a href="docs/about/accessibility.html">Accessibility</a></li>
  <li><a href="docs/about/platforms.html">Supported platforms</a></li>
</ul>
...

いくつかのポイント:

data-inset="true"は主にこのlistviewが文の中に現れるかどうかを指定します.もしそうなら、jQuery Mobileは自動的に一番上のアイテムと一番下のアイテムに円弧を付けてくれます.
listを一つのブロックに分けたいなら、list-dividerのitemをliの上に加えてもいいです.上記の例のように、「lidata-role=」list-divider」Overview

對 List views 的說明

Nested list:listを重層の構造に加えると、jQuery Mobileが自動的にlist viewに上下層を切り替える効果が加わります.

List view 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 view with Count Bubblesは

にを追加して、jQuery Mobileは各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>

<div data-role="footer">
 <div data-role="navbar">
 <ul>
 <li><a href="#" data-icon="grid" data-iconpos="top">Summary</a></li>
 <li><a href="#" data-icon="star" data-iconpos="top">Favs</a></li>
 <li><a href="#" data-icon="gear" data-iconpos="top">Setup</a></li>
 </ul>
 </div><!-- /navbar -->
 </div><!-- /footer -->

jQuery Mobileにはもともとたくさんの内建てのiconが使われています.data-incon="xxx"でiconをnavigation barに入れます.

あなたが望むなら、もう少し設定をしてもいいです.自分のiconを使ってもいいです.

<style type="text/css">
  .nav-glyphish-example .ui-btn .ui-btn-inner { padding-top: 40px !important; }
  .nav-glyphish-example .ui-btn .ui-icon { width: 30px!important; height: 30px!important; margin-left: -15px !important; box-shadow: none!important; -moz-box-shadow: none!important; -webkit-box-shadow: none!important; -webkit-border-radius: none !important; border-radius: none !important; }
  #chat .ui-icon { background:  url(glyphish-icons/09-chat2.png) 50% 50% no-repeat; background-size: 24px 22px; }
  #email .ui-icon { background:  url(glyphish-icons/18-envelope.png) 50% 50% no-repeat; background-size: 24px 16px;  }
  #login .ui-icon { background:  url(glyphish-icons/30-key.png) 50% 50% no-repeat;  background-size: 12px 26px; }
  #beer .ui-icon { background:  url(glyphish-icons/88-beermug.png) 50% 50% no-repeat;  background-size: 22px 27px; }
  #coffee .ui-icon { background:  url(glyphish-icons/100-coffee.png) 50% 50% no-repeat;  background-size: 20px 24px; }
  #skull .ui-icon { background:  url(glyphish-icons/21-skull.png) 50% 50% no-repeat;  background-size: 22px 24px; }
</style>

<div data-role="footer" class="nav-glyphish-example">
  <div data-role="navbar" class="nav-glyphish-example" data-grid="d">
    <ul>
      <li><a href="#" id="chat" data-icon="custom">Chat</a></li>
      <li><a href="#" id="email" data-icon="custom">Email</a></li>
      <li><a href="#" id="skull" data-icon="custom">Danger</a></li>
      <li><a href="#" id="beer" data-icon="custom">Beer</a></li>
      <li><a href="#" id="coffee" data-icon="custom">Coffee</a></li>
   </ul>
  </div>
</div>

はタッチ制御設計のUIであり、多くのフォームの要素をタッチ操作の多いポータブルdeviceで簡単に操作できるようにするために、多くのフォームの要素を自動的にタッチ操作の良い形に変換します.(icon 列表を参照してください.jQuery Mobileで自動的に変換するUIを使用したくないなら、素子にdata-role="none"を追加することができます.最適化前の形態に戻ります.
は元々Formであったtextの他に、textarea、radio、checkbox、select menus、jQuery Mobileも完整的 Form elements 列表、Slider、Flipを提供しています.
フレキシブルなフォーム表示(Dynamic form layout)jQuery Mobileは、そのアプリを利用して異なるプラットフォームにポートできるようにするために、異なるスクリーン幅に対して異なるラyoutをします.その中の一番著しい例はフォームです.スクリーンが狭いなら(~480 px)jQuery mobileはlabelをblock elementと見なします.広いスクリーンなら2-column layoutと見られます.この便利な機能を利用するには、data-role="fieldcontain"のdivだけでいいです.
```
<div data-role="fieldcontain">
  <label for="name">Text Input:</label>
  <input type="text" name="name" id="name" value=""  />
</div>
```

DatePicker本の内容は分かりやすいです.jQuery mobile List viewを使って、Yahoo!YQLを使って簡単なRSS reader
How to Build an RSS Reader with jQuery Mobileは、典型的にはAjaxを介してserverエンドプログラムのシリアル
jQuery Mobile Framework – A Forms Tutorial very detailed explination for different components of jQuery Mobile

jsのスタック