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

今更ながらjQueryMobileの門を叩いてみる
Jquery Mobile: Up and Running

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

呼び出し方

~~~



~~~

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

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

基本構造

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



My Page



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すごい!
癖はかなりありますし、脆弱性の問題などもありますが使って行きたいですね