2

複数ページのテンプレートをセットアップしています。私のホーム画面の背景色は他のページとは異なりますが、ページに追加するコンテンツの一部がフッターに到達するのに十分な長さではなく、デフォルトの背景色が背景とフッターの間のホーム画面。

ページを切り替える前にページの ui-page 背景色を変更して、ギャップを適切に埋める方法はありますか?

ページのデリゲートでそれを行うことを検討しました：

$(document).delegate("#pageDetail", "pagecreate", function () {
        $('.ui-page').css('background-color', '#ECF2FE');
    });

しかし、変更をそのままにして戻るボタンを押すと、それが壊れます。

各ページに正しい背景色を設定できるように、この変更を行うために使用できるイベントはありますか?それとも、欠けている簡単な方法はありますか?

ありがとう

4

1 に答える 1

6

イベントが発生したときpagecreate、疑似ページにはまだクラスが与えられていない.ui-pageため、そのクラスで選択しても役に立ちません。this代わりに現在の疑似ページを選択するために使用することをお勧めします。

$(document).delegate("#pageDetail", "pagecreate", function () {
    $(this).css('background', '#ECF2FE');//`this` refers to `#pageDetail`
});

backgroundまた、ではなくプロパティを更新したことにも注意してbackground-colorください。これは、jQuery Mobile がプロパティで指定されたグラデーションの背景を使用し、 で上書きbackground-imageできないためです。background-imagebackground-color

デモは次のとおりです: http://jsfiddle.net/WSzq3/ (ページ間をクリックすると、pagebeforeshowイベントごとに背景色が変わります)

于 2012-08-22T18:25:56.373 に答える