今更ながらjQueryMobileの門を叩いてみる

Jquery Mobile: Up and Running

ちまたではjqMobiが話題なのにあえてのJQMネタです

呼び出し方

$.mobile.ajaxEnabled = false; はajax無効
$.mobile.pushStateEnabled = false はHash-Based URLを無効に

ajaxでの画面遷移をしているとうまく取ってこれないことがあったので上記設定にしています
※時間がないので詳細は追ってないけどやりようはきっとあるはず

基本構造

こう書くだけでもう見た目はスマホなサイト
すごい!

http://dev.screw-axis.com/doc/jquery_mobile/overview/start_guide/

検索ボタンを作る

個人的にはlabelを使わないほうが使いやすい気がします

http://dev.screw-axis.com/doc/jquery_mobile/components/forms/search/

リストを作る

リンクのないシンプルなリスト

テキストが改行されずに…に省略されちゃう

リストで困ってくるのがこれですね、cssを上書きで対処します

jQuery Mobileを使ったスマートフォンサイト制作に役立つスニペット | デベロッパーセンター

ボタンを設置する

例えばhomeに戻るボタン

画像だけで文字をなくしたい場合

ナビゲーションを作る

http://dev.screw-axis.com/doc/jquery_mobile/components/toolbars/navbar/

といった感じで

これらを組み合わせるだけでもそれなりにスマホっぽいサイトが出来るjQueryMobileすごい!
癖はかなりありますし、脆弱性の問題などもありますが使って行きたいですね

スポンサーリンク

シェアする

フォローする

コメントを残す

トップへ戻る