jQuery Mobileを触りながら覚えよう! [Japanese Version Only]

「jQuery Mobileを勉強したいけど、準備するのは面倒だなあ」と思っている方にオススメ!

サンプルを用意しました!フォークしてjQuery Mobileを体験してみよう!

スマートフォンサイトをプレビューするには、エディタ画面の「Smart Phone Preview」ボタンをクリックしてください。

こんなことを試してみるとオススメ!

そもそもjQuery Mobileってなんだっけ?

jQuery Mobileはモバイルサイト構築のためのフレームワークです。
スマートフォンサイトやWebアプリを作成する際に利用します。
非常に手軽に利用でき、少し勉強するだけでそれなりのものが作れてしまうんですよ!

ということで、jQuery Mobileに特徴をまとめてみました。

  • HTML5のコーディングのみでWebアプリが開発可能(JSが書けなくても大丈夫!)
  • data属性を使ってマークアップにセマンティクスを与えることができる
  • iPhone、Androidはもちろん、その他数多くのデバイスに対応

実際に動いているところを見てみましょう

以下のコードがこのように変換されて表示されます。(PLAYボタンをクリックしてください)

<div data-role="page" id="page">
  <div data-role="header">
    <h1>タイトル</h1>
  </div>
  <div data-role="content">     
    <ul data-role="listview">
      <li><a href="#page2">2 ページ</a></li>
      <li><a href="#page3">3 ページ</a></li>
      <li><a href="#page4">4 ページ</a></li>
    </ul>          
  </div>
  <div data-role="footer">
    <h4>ページフッター</h4>
  </div>
</div>

このように、divやul要素にdata-**属性を付加するだけで、jQuery MobileのUIに変換されるんですね。
htmlの要素に属性を足していくだけなので、JSを書く必要はありません!

続いてページ遷移を試してみましょう

先ほどのコードに、2ページ目を追加してみます。

<-- 前のコードの下に↓を貼り付けるだけ -->
<div data-role="page" id="page2">
  <div data-role="header">
    <h1>2 ページ</h1>
  </div>
  <div data-role="content">	
    <img src="#" id="largeImage" />
  </div>
  <div data-role="footer">
    <h4>ページフッター</h4>
  </div>
</div>

動かして確認するために、コードページから
「Smart Phone Preview」ボタンをクリックしてください。
実機で動作させているようにプレビューすることができます。(この機能はベータ版です!)

サンプルをフォークして jQuery Mobile を体験してみましょう!

jQuery Mobileに興味がでてきましたか?
jsdo.itでテンプレートコードを作成しました。このコードをもとにぜひjQuery Mobileを試してみてください!

スマートフォンサイトをプレビューするには、エディタ画面の「Smart Phone Preview」ボタンをクリックしてください。

関連リンク

Comment

Recommendations

Facebook page