「jQueryMobile」カテゴリーアーカイブ

【jQueryMobile】data-themeをJavaScriptで変えたい

jQueryMobileのdata-themeを変えるやり方をみてみました。

http://stackoverflow.com/questions/7667603/change-data-theme-in-jquery-mobile

が参考になります。

展開用のボタンをクリックすると色が変わるようにする例です。buttonMarkupはbutton(‘refresh’)をしなくても画面上に反映してくれます。

なおbuttonMarkupはdata-role属性にbuttonを持ったaタグなどをボタンに変えるメソッドで、button要素にたいしては効きません。

buttonに対して書くとしたら

のようになりますが、hoverの対応とかもあるし、ちょっと大変ですね。

【jQueryMobile】cakePHPのためにjQueryMobileリンクのAjaxを無効にする

jQueryMobileではリンクはAjaxを使った読み込みとしてDOMに差し込まれます。

これが問題を起こすことがあります(cakePHPでundefinedと表示されるとか

検索かけると古い記事が多かったのでメモ書き。
そんなによくは調べてないですが、たぶん書かれてあるものよりこっちのほうがいいだろう、もしくはこっちじゃないと動かなかったってことで。

jQueryとjQueryMobileを呼び出している途中にスクリプトを入れます。

これはcakePHPの例ですが普通のHTMLではsrcの中身が通常のURLになるだけですね。
たまたまみつけた記事では$.mobile.ajaxEnabledが$.mobile.ajaxLinksEnabledになってましたがajaxEnabledになったようです。

なんでjQueryMobileの挙動を制御出来るかというとグローバル設定のドキュメントを見れば分かります。

ちなみに特定のリンクだけで無効にしたい場合はrel=”external”とすると外部サイトという意味で検索エンジンに影響与えそうな気がするので、data-ajax=”false”を属性として与えるのがいいんじゃないかと思います。

追記:cakePHPでundefinedと表示される問題については「WEBLE-CakePHP で jQuery Mobile を使用して Ajax を有効にした状態でページ遷移しようとすると真っ白な画面に undefined になる場合の解決方法」にあるようにView/Layouts/ajax.ctpを作ることで解決できました。Ajax読み込みを無効にするのは一時的、もしくはやむを得ない特殊な場合で、基本Ajaxリンクができるようなつくりにしたほうがよいです。