jQueryモバイル/ jqtouch画像幅

Question

携帯電話のWebサイトでナビゲーション用の5つのボタンを備えた静的フッター画像が必要です。画像はこちらです http://www.pintum.com.au/jm/footer3a.jpg. 。青いアイコンはデフォルトである必要があり、黄色のアイコンはホバーまたはアクティブ状態に対してのみ表示される必要があります。

すべてのモバイルデバイス（ランドスケープとポートレート）の正しい幅にこの画像スケールを作成し、他のページへのリンクを持ち、現在/アクティブページのアイコンを黄色にするにはどうすればよいですか？

私がこれまでに試したこと

• 私は最初にCSSスプライトを作ろうとしましたが、それはすぐに（複雑な）になります。幅がどこでも幅を扱うのは痛いので、幅は動的であるため、ピクセルで高さを知る方法がなかったため、画像は正しく拡大します。 JSを使用して幅を見つけ、その場で高さを計算できます。しかし、これはやり過ぎのように聞こえます。

• 次に、幅100％の単一の画像を使用してから、画像の上にDivオーバーレイを配置しようとしました。しかし、このソリューションを使用して、JavaScriptクリックイベントを使用してページをナビゲートする方法を把握できませんでした。 http://jsbin.com/uraya5/3/ 。そして、divの正しい高さをデトルミングします

• 最後に、各ボタンを別の画像にしようとしました。これらはイースト主義的なソウルのようです。しかし、JQuery Mobileは、削除する方法がわからないボタンに追加のスタイルを追加します。見る http://jsbin.com/uraya5/4

---

それで、これを行うための最良の/最も簡単な方法は何ですか？

• リンクの周りのスタイルを削除するにはどうすればよいですか？
• または、単一の画像CSSスライディングドアメソッドを使用できますか？ HTTPリクエストを減らすため。

Answer 1

わかりました、私はそれを理解しました

こちらのSoultionを参照してください http://jsbin.com/uraya5/10/そうしなければならなかった：

1. 何らかの理由で各ボタンの幅を各ボタンの19％に設定して、各ボタンの間に間隔があり、20％が機能しません。
2. Ui-Bar-a背景を黒に設定して、私の画像の間にスペースを隠すように
3. このJSコードを使用して、ページ$ .MOBILE.CHANGEPAGE（$（ "＃about"）、 "flip"、true、true）をナビゲートします。

HTTP呼び出しを削減するために5つの異なる画像を使用する代わりに、単一の画像を使用したいと思います。だから誰かがこれのために際立った魂を見つけたなら、私に知らせてください。