1

「HEAD」タグの下で実行するこの小さなスクリプトがあり、jquery モバイルで作業しています。画面の幅に合わせて画像のサイズを変更します。正常に動作しますが、毎回そのページを更新した後にのみ動作します。ページに入るたびに強制的に更新する方法はありますか? または、これを行うためのより良い方法はありますか?

スクリプトは次のようになります。

<script>
  $( document ).ready( function()
  {
     $width = $( '#content' ).width();
     $( '#content img' ).css( 
     {
        'max-width': $width, 'height': 'auto'
     } );
   } );
</script>

ありがとう

- - -更新しました - - - 

<body>
  <script>
    $( document ).live( 'pageload', function()
    {
      var maxWidth = $( '.content' ).width();
      $( '.content img' ).css( "max-width", maxWidth );
      $( '.content img' ).css( "height", auto );
    });
  </script>
</body>
4

2 に答える 2

1

まず、javascript/jquery コードを HEAD セクションに置かないでください。jquery モバイルはコードを除外するため、BODY にあることを確認してください。Jquery モバイルは、HEAD の TITLE のみを使用します。

次のようなものを使用します。

$(document).bind("pagecreate", function() {
    // make sure all submit buttons are disabled to being with
    $('input#submit').each(function() {
        $(this).button("disable");
    });
});

この例が探している機能ではないことはわかっていますが、概念は同じです。私が行ったように、イベントを「pagecreate」にバインドします。

于 2012-06-07T19:32:58.640 に答える
0

JQMのAJAXページローディングを使用していますか？もしそうなら、あなたはpageloadイベントにバインドする必要があります。すべてのイベントについては、http：//jquerymobile.com/demos/1.1.0/docs/api/events.htmlで説明されています。pageloadイベントハンドラーでは、コードを追加して画像のサイズを変更できます。

pageshow各ページのイベントにバインドすることもできます。

$('[data-role=page]').live('pageshow', function () {
//Image resize code here

}）;

于 2012-05-30T13:11:07.233 に答える