jQueryMobileで横すべりに半開きになるメニューを追加

最近スマホアプリでよく見かけるメニューの表示方法、ボタンを押すと横からメニューがニュッと出てくるやつ、これをjQueryMobileで実装するにはPanelを使う。

以前につくったページにPanelを追加したら、contentがカラム落ちしてしまうという問題が発生した。なんでだろうと思って調べたら、<div data-role="content"/>要素を記述し忘れていて、<div data-role="page"/>の直下に表示内容を記述していたことが原因だった。これまで正常に動作していたことがむしろ不思議だ。

jQuery MobileだとIE7ではてなブックマークボタンも表示できない

jQuery Mobileを使うと、IE7からのアクセスで、はてなブックマークボタンを表示できないようです。ページが真っ白になってしまいます。

jQuery MobileのページにAdSenseを組み込むとIE7でページが真っ白になることは気づいていましたが、はてなブックマークボタンも駄目でした。TwitterボタンとFacebookいいねボタンは大丈夫なようですが、使えないWebパーツがたくさんありそうなので注意が必要です。

User-Agentに「MSIE 7」という文字列が含まれているかどうかで処理を切り分けていますが、これで判定できるのはブラウザモードです。
表示できないのはドキュメントモードがIE7の場合なので、IE9などでドキュメントモードのみIE7にしているとやはり真っ白になります。しかし、ユーザーエージェントを見てドキュメントモードを判定することはできそうにないので、仕方がありません。

AdSenseを使うとjQuery MobileのページをIE7で開けない

jQuery MobileのページをIE7で開けないとしたら、それはAdSenseなどの広告コードが含まれているかもしれません。
もし広告コードが原因ならば、User-Agentに「MSIE 7.」という文字列が含まれているかどうかでIE7からのアクセスかどうかを判定して、広告コードを取り除けばよいでしょう。

jQueryMobileのListviewの中で文章を改行して表示

jQuery MobileのListviewを使ったとき、長くて一行に収まりきらない文章は「...」でちょん切られちゃうんですけど、改行して文章全体が表示されるようにしたい場合があります。項目のタイトルと説明からなるリストだと、説明の末尾を「...」で切らないで複数行にわたって文章を表示した方がいい場合の方が多いように思います。

なんでちょん切られているのかというと、CSSで white-space: nowrap; が指定されているからです。こんな指定がされています。

.ui-li .ui-btn-text a.ui-link-inherit { 
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

white-space: normal; を指定し直せば、ちゃんと改行されるようになります。
個人的には、.ui-li-desc はデフォルトで white-space: normal; でいいような気がします。

Android端末でJQuery Mobileのページ幅が正しく計算されない

JQuery MobileでつくったページにFacebookのJavaScript SDKを組み込む場合は、Androidのブラウザで画面の向き（Screen Orientation）を変えると、ページ幅が正しく調整されないことがあるので注意したい。
画面を横にしたときに広がったページ幅が、縦に戻しても元に戻らないのだ。この現象は、JQuery Mobileの1.0 RC2でも1.0 finalでも起こる。

 どうやらbodyタグの中にscriptタグがあることが、この問題の原因となっているようだ。 <script style="width:0px;">とやったら、多くの場合にこの現象を防ぐことができることを確認した。ただ、完全に防ぐことに成功したわけではなく、たまにページ幅が正しく調整されないこともある。