ちまたではjqMobiが話題なのにあえてのJQMネタです
呼び出し方
~~~
~~~
$.mobile.ajaxEnabled = false; はajax無効
$.mobile.pushStateEnabled = false はHash-Based URLを無効に
ajaxでの画面遷移をしているとうまく取ってこれないことがあったので上記設定にしています
※時間がないので詳細は追ってないけどやりようはきっとあるはず
基本構造
こう書くだけでもう見た目はスマホなサイト
すごい！
~~~
My Title
Hello world
Footer
~~~
http://dev.screw-axis.com/doc/jquery_mobile/overview/start_guide/
検索ボタンを作る
個人的にはlabelを使わないほうが使いやすい気がします
~~~
~~~
http://dev.screw-axis.com/doc/jquery_mobile/components/forms/search/
リストを作る
リンクのないシンプルなリスト
~~~
- リストのタイトル
-
2012-01-01
タイトル
内容
-
2012-01-01
タイトル
内容
-
2012-01-01
タイトル
内容
~~~
テキストが改行されずに…に省略されちゃう
リストで困ってくるのがこれですね、cssを上書きで対処します
~~~
~~~
jQuery Mobileを使ったスマートフォンサイト制作に役立つスニペット | デベロッパーセンター
ボタンを設置する
例えばhomeに戻るボタン
~~~
home
~~~
画像だけで文字をなくしたい場合
~~~
home
~~~
ナビゲーションを作る
~~~
~~~
http://dev.screw-axis.com/doc/jquery_mobile/components/toolbars/navbar/
といった感じで
これらを組み合わせるだけでもそれなりにスマホっぽいサイトが出来るjQueryMobileすごい！
癖はかなりありますし、脆弱性の問題などもありますが使って行きたいですね
コメント