1

我有这个在“HEAD”标签下运行的小脚本，与 jquery mobile 一起使用。它根据屏幕宽度调整图像大小。它工作正常，但只有在每次刷新该页面后才能工作。无论如何，我每次进入页面时都可以强制刷新吗？或者有没有更好的方法来做到这一点？

脚本是这样的：

<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 部分，确保它在 BODY 中，因为 jquery mobile 会过滤掉那里的代码。Jquery mobile 仅使用 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 回答