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

PCサイト

及川WEB室

当サイト「及川WEB室」は、個人的な備忘録です。
スマートフォンサイトの制作の仕方を勉強中です。
jquery.mobile-1.1.1 でスマートフォン用（Android,iPhone）のサンプルサイトを制作しながら勉強中です。

当サイトについて

HOME

及川WEB室

当サイト「及川WEB室」は、個人的な備忘録です。
当スマートフォンサイトは、Android,iPhone 向けのサンプルサイトです。
当スマートフォンサイトは、jQuery Mobile を使って構築しています。
jQuery Mobile とはスマートフォンやタブレット向けのJavascript のフレームワークです。

テーマ(色)サンプル

HOME

テーマ(色)サンプル

jQuery.mobile v1.1.0 では、a（黒）,b（青）,c（グレー）,d（代替）,e（アクセント） の5色のテーマ色が選択できる。
このページのテーマは a (黒)。

テーマ(色)　data-theme

a b c d e

テーマローラー

独自テーマの作り方は下記の[ jQuery Mobile 1.1.0 日本語リファレンス]のサイトのページを参照
テーマローラー概要
ThemeRoller (For jQuery Mobile) tool
ThemeRoller
※「ThemeRoller(For jQuery Mobile)tool」で作ったCSSファイルを設置するときの注意
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
↑
これを、下記のタグに変える。
↓
<link rel="stylesheet" type="text/css" href="css/themes/my-custom-theme.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile.structure-1.1.0.min.css" />
「css/themes/my-custom-theme.css」の部分は、「ThemeRoller （For jQuery Mobile） tool」で作ってダウンロードし、自分のサイト内に設置たCSSファイル。自分で設置したサイト内のパスに変更する。

※また、アイコンなどの画像が入ったimageフォルダを、テーマローラーで作ったCSSと同じディレクトリに入れる必要がある。
画像は、jQueryMobile のサイトからダウンロードできる。
http://jquerymobile.com/download/
↑このサイトから、全部のファイルがセットになっているZIPファイルをダウンロードし、その中のimages フォルダをテーマローラーで作ったCSSと同じディレクトリに入れる。

ボタン サンプル

HOME

ボタン サンプル

ボタン
data-role="button"

ボタンにしたい アンカータグ(<a>タグ)に data-role="button" 属性を追加するとボタンの形状になる。
ボタンは、デフォルトではブロックレベルになっている。

テーマ（色）
data-theme

data-theme="a" data-theme"=b" data-theme="c" data-theme="d" data-theme="e"

角丸の有無
data-corners

data-corners="true" data-corners="false"

インラインボタン
data-inline

インライン要素にする。横並びに出来る。
data-inline="true" data-inline="true"

アイコンの位置
data-iconpos

data-iconpos="left" data-iconpos="right" data-iconpos="top" data-iconpos="bottom"
data-iconpos="notext" data-iconpos="notext"

アイコンの種類
data-icon

data-icon="arrow-l" data-icon="arrow-r" data-icon="arrow-u" data-icon="arrow-d" data-icon="check" data-icon="grid" data-icon="gear" data-icon="grid" data-icon="star" data-icon="custom" data-icon="delete" data-icon="plus" data-icon="minus" data-icon="refresh" data-icon="forward" data-icon="back" data-icon="alert" data-icon="info" data-icon="search"

グループボタン
data-role="controlgroup"

グループにしたい複数のボタンを<div data-role="controlgroup">〜</div>で囲む
data-icon="arrow-l" data-icon="arrow-r" data-icon="arrow-u" data-icon="arrow-d"
さらに data-type="horizontal" 属性を追加。横並び。
1 2 3 4
さらに data-mini="true" 属性を追加。ボタンのサイズが小さくなる。
1 2 3 4

戻るボタン
data-rel="back"

data-direction="reverse" 属性を追加する事でトランジション効果を逆回しできる。 data-rel="back"

開閉式ボタン
data-role="collapsible"

テーマ（data-content-theme 属性）を追加する事により、角丸の枠になる。ボタンを入れ子にも出来る

PCサイト

及川WEB室 及川治建築設計室

リストビュー
data-role="listview"

ul要素のリストにいれたアンカータグをまとめてボタンにする。
※リストビューは上下の余白が-15px になり他の要素と重なってしまうようなので、 リストビューの上下に適度にpaddingを指定する。(実用的には、次項のインセットモードを使用する事をお勧め。)
下の例では、上下に 20px の padding を指定している。 リストビューは様々な表示方法があり、バリエーションが豊富。
jQuery Mobile のリファレンスなどで参照して下さい。
リストビューについて | jQuery Mobile 1.1.0 日本語リファレンス

インセットモード
data-inset="true"

リストビューでは -15pxのpadding があるためインセットモードで適度に余白を設ける。
リストビュー属性を追加したul要素に data-inset="true" 属性を追加する。

ボタンに補足情報(右側と下に文字)を入れる

サンプルソース
<ul data-role="listview" data-inset="true">
<li>
<a href="#button01">
<h4>ボタンサンプル・アイコンサンプル</h4>
<p>ﾎﾞﾀﾝ･ｱｲｺﾝ･ｸﾞﾙｰﾌﾟﾎﾞﾀﾝ･Backﾎﾞﾀﾝ等</p>
<p class="ui-li-aside">jQM1.1.0</p>
</a>
</li>
</ul>
リスト内のアンカータグ内を、見出しとp要素で構成。
右側に入れる文字の p要素には class="ui-li-aside" を追加する。
見出しは表示文字数が減り、省略されてしまうので注意。

ページ移動トランジション

HOME

ページ移動トランジション

ページ移動の際のエフェクト。

トランジション エフェクト data-transition

ブラウザの種類によって動きが違う。
Windows 7 64bit Safari(ver.11.0)ではきちんとトランジションが動いたが、 私の端末MediasWP(N-06C)(AndroidTM 2.3)のブラウザでは動きがぎこちない。

ちなみに、↑このボタンは、リストタグで作っており、ul タグに下記の属性を入れている。
data-role="listview"（リストをメニューボタン化）
data-inset="true"（角丸に）

AJAX 無しでの切り替え方法

jQuery Mobileでは、AJAXを使ってページ切り替えをする。
以下のようなとき、AJAXを使わずにリンクさせる。
※ページ切り替え時、トランジション効果をなくしたいとき。
※PCサイトに移動したときにPCサイトの表示が変になる場合がある。

AJAXを使わずにリンクさせる方法

お問い合わせ

HOME

お問い合わせ

当サイト「及川WEB室」は、個人的な備忘録です。
PCサイト
及川WEB室 建築設計