Createing Web site Study Blog ~ WEB制作に関するお勉強ブログ ~

  • Share on Tumblr

「jQuery」という名前がついているが、JavaScriptフレームワークであるjQueryとは内容も使い方も異なる。


1. jQuery Mobileとは?

jQuery Mobileとは、「jQuery」のプラグインのこと。スマートフォンなどに対応したモバイルサイト制作に特化したJavaScriptのフレームワークである。簡単な記述で、質の高いスマートフォンサイトを構築できる。

jQuery Mobileでの制作は、「HTML + CSS + JavaScript」という通常のコーディングとは異なり、基本的なことはマークアップのみで実現できる。基本的なUIやAPIはひと通り揃っているので、新たにプラグインを導入したり、JavaScriptを書いたりしなくても、優れたUIを実現できる。



2. マークアップの方法


2-1. 単一ページの記述

jQuery Mobileでは、要素内で「data-role属性」を設定して、要素に役割を与えます。


そうすると、ブラウザではこのように表示されます。

サンプルページはこちら


2-2. 複数ページを1ファイルで作る

さらに、jQuery Mobileでは、1ファイルに複数のページを作成することができます。ページのコンテナを用意し、それぞれにid属性を追加するだけ。尚、デフォルトページの表示は、一番最初に定義されたコンテナになります。


また、ページタイトルを各ページで個別に指定したい場合は、ページコンテナにdata-title属性を追加すればOK!

※このような仕様のため、jQuery Mobileでは通常のページ内リンクは使用できないということに注意。

サンプルページはこちら


3. ページ遷移にエフェクトをつけてみる

jQuery Mobileの代表的な機能、ページ遷移の切り替えエフェクトを試してみる。
デフォルトの「slide」のほか、全部で以下の6種類のエフェクトがあらかじめ用意されていて、簡単な設定で実現できる。
各エフェクトには、「data-transition=”エフェクト名”」を使用する。

  • slideエフェクト
  • slideupエフェクト
  • slidedownエフェクト
  • popエフェクト
  • fadeエフェクト
  • flipエフェクト(Android端末対象外)


サンプルページはこちら



jQuery(ジェイクエリー)は、JavaScriptとHTMLの相互作用を強化する軽量なJavaScriptライブラリ。ジョン・レシグが2006年1月に開催された BarCamp NYC でリリースした。MIT License と GNU General Public License のデュアルライセンスであり、フリーかつオープンソースである。jQuery(ジェイクエリー)は、JavaScriptとHTMLの相互作用を強化する軽量なJavaScriptライブラリ。ジョン・レシグが2006年1月に開催された BarCamp NYC でリリースした。MIT License と GNU General Public License のデュアルライセンスであり、フリーかつオープンソースである。



jQuery(ジェイクエリー)は、JavaScriptとHTMLの相互作用を強化する軽量なJavaScriptライブラリ。ジョン・レシグが2006年1月に開催された BarCamp NYC でリリースした。MIT License と GNU General Public License のデュアルライセンスであり、フリーかつオープンソースである。

コメントを残す

コメントを投稿するにはログインしてください。