QR Code Business Card

誰でも簡単にスマホサイトができる!jQuery Mobileの使い方 [基本編]

 簡単にスマートフォンサイトが作れる、jQuery Mobileを試してみましたので、使い方をご紹介します。基本的にhtmlを理解していれば問題ありませんでした。


jQuery Mobileのサンプルサイト

スマートフォンサイトサンプル01

 基本的な形は下記のようになります。 このくらいのhtmlで簡単にスマートフォン用のサイトが作ることができます。

link:sample_site01.html


表示:
jQuery Mobile sample01jQuery Mobile sample02


スマートフォンサイトサンプル02

link:sample_site02.html




jQuery Mobileのダウンロード

 まずはjQueryとjQuery Mobileを読み込みます。
 スタイルシートなど、特に変更しない場合はjQueryとjQuery Mobileを直接リンクで読み込めば使えるようになります。変更する場合は、ダウンロードしてファイルを読み込むように設定してください。

直接読み込む場合
 下記をheadタグ内に追加してください。最新のバージョンを確認してください。


ダウンロードする場合
 下記ダウンロード先より最新のファイルを入手してください。
 「jquery-***.js」「jquery.mobile-***.js」「jquery.mobile-***.css」とjquery.mobile用の画像ファイルを入手して、適当なフォルダにアップロードして読み込んでください。***はバージョンです。ファイル名にminがついているものは、改行とスペースを削除した軽量版です。追記するのであれば、minなしを選んでください。

link:jQueryダウンロードページ
link:jQuery Mobileダウンロードページ

 jQuery Mobileのファイルは、上記ダウンロードページの「Zip File: jquery.mobile-***.zip」をダウンロードすれば、必要なファイルが入手できます。


jQuery Mobileの詳しい使い方は、下記をご覧下さい。
link:jQuery Mobile デモ&ドキュメント(英語)



基本形について

 jQuery Mobileでは、data-role属性に役割を記述することにより、サイトを構成します。下記の場合、data-role=”page”を持つdivタグが4つありますが、data-role=”page”で1ページ分を表しますので、この場合index,page1~3の4ページの構成ということになります。最初のページが自動的にトップページになります。

link:sample01.html



 各ページにヘッダーとフッターを追記するには、ページ内にdata-role属性header,content,footerとしたdivタグを追加します。





リンクについて

テキストリンク

 jQuery Mobileではページは1ファイルに記述します。そのためページ間のリンクは、ページ内リンクの書き方になります。

link:sample03.html#index


表示
表示-テキストリンク


ボタンリンク

 aタグにdata-role=”button”を追記することによってボタンリンクになります。
link:jQuery Mobile デモ-ボタン

link:sample03.html#button


表示
表示-ボタンリンク


リストリンク

 ul,liタグにdata-role=”button”を追記することによってボタンリンクになります。
link:jQuery Mobile デモ-リスト

link:sample03.html#list


表示
表示-リストリンク


 リストを角丸にする場合は、ulタグにdata-inset=”true”を追加します。

link:sample03.html#list02


表示
表示-リストリンク角丸


テーマ変更

 属性を追加することにより、テーマを変更することができます。ボタンの場合aタグにdata-icon=”home” data-theme=”a”などを追記することにより、アイコンと色を変更することができます。
link:jQuery Mobile デモ-ボタンアイコン
link:jQuery Mobile デモ-ボタンテーマ

link:sample03.html#theme


表示
表示-テーマ変更



 jQuery Mobileを使って、スマートフォンサイトを作る基本的なことはこのような感じです。あとはレイアウトをどのようにするのかや、リンクボタンを押したときにポップアップするのか、スライドするのかなど細かいところになります。また次回に続きます。

 

SNSでもご購読できます。

コメントを残す

*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)