FC2ブログ

jQuery Mobile

jQuery Mobile は
jQuery ベースのモバイル向けUIを簡単に
構築できるようにしたライブラリ

まず。必要なファイルをダウンロード
http://jquerymobile.com/download

から
jquery.mobile-1.2.1.zip をダウンロード

あとは、解凍して
プロジェクトディレクトリに配置する

unzip コマンドで簡単に解凍可能
unzip jquery.mobile-1.2.1.zip

解凍するといろいろファイルとかディレクトリあるけど
使うのは
images/
jquery.mobile-1.2.1.css
jquery.mobile-1.2.1.js

注意点としては、
css ファイルと
images ディレクトリを同じ階層におかないと
アイコンが表示されなくなるの注意

あとは、このディレクトリのところにHTMLファイルなどを
書いていくことで、スマートフォン向けのものが
作成できます
スポンサーサイト



テーマ : プログラミング
ジャンル : コンピュータ

jQuery Mobile デザインのカスタマイズ


Jquery Mobile でボタンの色などを変更できます

jQuery Mobile Framework - Static Containers, States

でサンプルを見ることができます
ちなみに、こちらは英語なので、わかりにくいときには

ボタンのテーマ色

をみるとわかりやすいです

ベースカラーは5種類あり、
A~Eの表記をします

A=黒
B=青
C=灰色
D=白
E=黄色

となっています

指定するには
data-them="b"
というように指定します

<button value="ボタン" data-theme="e"></button>
とすると、ボタンの色が黄色になりますし

<div id="top" dara-role="page" data-theme="e">
とすれば
div タグのところに反映されます

テーマ : プログラミング
ジャンル : コンピュータ

jQueryMobile でリンクをボタンにするには

スマートフォンの場合、画面がパソコンより小さいので
間違えてクリックする可能性が高いため、
できだけ
リンクなどは
ボタンにかえるようにします

やりかたは簡単で
a タグのリンクの場合
<a href="index.html" data-role="button">
戻る
</a>
というように、

dara-role="button" を
追記するとボタンになります

英語のサイトになりますが
Adding Icons to Buttons
でアイコンの一覧もでています

ちなみに、アイコンをつけるなら、
data-icon 属性を使います
もし、戻るアイコンをつけたいのなら

<a href="index.html" data-role="button" data-icon="back">
戻る
</a>

というようにかきます

テーマ : プログラミング
ジャンル : コンピュータ

jQuery Mobile での外部リンク設定

jQuery Mobile で外部リンクをはるには
aタグに
rel="external"
を追記します

これは
jQuery Mobile が基本的に ajax による画面遷移をしているためです
このおかげで画面をリフレッシュせずに切り替えできるのですが
外部サイトにリンクしたり
javascript ファイルを読み込んだりすると
不具合がでる可能性があります

このため、
ローカルサーバーなどなら
<a href="ローカルファイルのパス" rel="external">リンク</a>

外部へのリンクなら
<a href="リンク先のURL" rel="external">リンク</a>

というようにします

例えば Amazon なら
<a href="http://www.amazon.co.jp" rel="external">アマゾンへとぶ</a>
というようにします

テーマ : プログラミング
ジャンル : コンピュータ

jQuery Mobile で戻るボタン設置

jQuery Mobile で戻るボタンを設置するには
data-add-back-btn="true"
を追記します

追記するのは
<div id="ページID" data-role="page" >
に追記します

<div id="ページID" data-role="page" data-add-back-btn="true">
これで、戻るボタンが追記されます

テーマ : プログラミング
ジャンル : コンピュータ

最新記事
検索フォーム
GREEハコニワ攻略サイト
リンク
カテゴリ
月別アーカイブ
フリーエリア
最新記事
FXプライムレート
最新コメント
最新トラックバック