スマホ用フレームワーク jQuery Mobile ( JQM ) のメモ

前から気になっていたスマートフォンサイトを構築するためのフレームワーク [ jQuery Mobile ] やってみる。

jqm-1

jQuery Mobile 公式サイト

[ jQuery Mobile ] サンプルページ ———————————————————————-

取り急ぎ、サンプルをアップしておきます。

jQuery Mobile のサンプル

上記のサンプルは、かちびと様制作の日本語サンプル をベースにさせて頂きました。ありがとうございます!

jqm-2

▲ 簡単なページなら、jQuery Mobile 公式サイトにあるサービスを使って、GUI でコードを生成できます。

複雑なものは、有料の Codiqa というサービスを使えば作れます。

デザイン ( テーマ ) を編集する ———————————————————————-

jQuery Mobile のサイトに ThemeRoller と言うページが用意されていて、CSS を書かずにスタイルを編集し、ZIP ファイルでダウンロードできます。

jqm-3

ThemeRoller

ボタンの角丸が大きすぎて、個人的に嫌だったんだけど、角丸の半径も編集できて素晴らしい!

jQuery Mobile Flat-UI Theme というフラットなデザインのテーマもありました。

わかった事 ———————————————————————-

data-role=”page” を持つ div 要素が1ページになる。 – a 要素の属性に data-direction=”reverse” を指定するとページ遷移時のアニメーションを逆向きに出来る。 – 普通にフォームのタグを書くとモバイル用にスタイリングされる。 – PC で検証するには、iOS, Android のエミュレーターをインストールするか、Safari で確認すると良いらしい。 – エラーメッセージ日本語化とか。 – jQuery Mobile をマジメに使うならやっておくべきローカライズとかの設定

ToDo・調べてみる事 ———————————————————————-

– jQuery Mobile を使うメリットは? – ナビゲーションバーに自動的に戻るボタンが表示されるんじゃないの? – 日本語のボタンは英語のボタンに比べて、縦幅が大きいので直したい。

参考にさせてもらったページ ———————————————————————-

ASCII.jp:西畑一馬の jQuery Mobile デザイン入門jQuery Mobile を使う際に知っておくと役立ちそうな Tips や情報のまとめ – かちびと.netjQuery Mobile が必須スキルになる!と思うのでこれから勉強する際に参考になる記事まとめ | バシャログ。

ありがとうございます!

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です