jQuery Mobileテンプレートの使い方

Posted by : Izumikawa Fukumi 2014年1月1日水曜日

今回jQuery Mobileテンプレート(スマートフォンテンプレート)の使い方をご紹介したいのですが、
まず以下のサイトにあるテンプレートを使用します。

jQuery Mobileのテンプレート

こちらのサイトでもある程度詳しく書いてありますが、ここでは更に詳しく書いて行きたいと思います

ではまずダウンロードして展開して編集する準備をしましょう。

展開したフォルダーには[images]と[index.html]と[style.css]のフォルダー・ファイルが含まれていると思います。このテンプレートでは大体1つのファイルで複数のページを作る事が出来ます。

コンテンツはdiv要素ごとに管理出来ます。

リンクの設定

1つのファイルでサイトを管理するのでリンク方法もやりたい事によって変わって行きます。

私が引っかかったのはGETで値などを送る時のリンクです。

基本的にページ内の要素に移動するので、適切な「target=""」ターゲットフレームを指定する必要があります。この部分に注意して編集をすれば必ず失敗しません。

テーマの設定

各コンテンツのdivに「data-theme="b"」プロパティを追加する事により、テーマの変更が出来ます。




コンテンツ2





このテンプレート個人・法人を問わず自由にご利用頂けます。

ベースデザインについては「data-theme」で変更可能。

また、アイコンやページ遷移時のエフェクトも自由に変更できます。

こちらのページで簡単なチートシートがご覧になれます。

jQuery Mobileのまとめ資料




PC用サイトへ
会社情報
お問い合わせ



00-0000-0000