1

携帯電話の 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 リクエストを減らすため。
4

1 に答える 1

1

わかりました

ここでソウルションを参照してくださいhttp://jsbin.com/uraya5/10/ 私がしなければならなかった：

  1. 何らかの理由で各ボタンの幅を 19% に設定すると、各ボタンの間にスペースがあり、20% は機能しません。
  2. ui-bar-a の背景を黒に設定して、画像間のスペースを非表示にします
  3. この JS コードを使用してページをナビゲートします $.mobile.changePage($("#about"), "flip", true, true);

http 呼び出しを減らすために、5 つの異なる画像を使用する代わりに、単一の画像を使用したいと考えています。だから、誰かがこれのための優雅な魂を見つけたら、私に知らせてください.

于 2011-01-07T05:16:07.090 に答える