1

我的 jQuery Mobile 网站的标题中有一个图像，我会自动调整它的大小以填满屏幕。在我的页面上有一个用于登录用户的子页面。但是在此页面上，图像的大小调整将不起作用。

当我在谷歌搜索解决方案时，我已经发现它是由 jQuery Mobile 引起的，它只允许 jQuery 在第一个 data-role="page" div 中工作。但是当我尝试每种解决方案时，它们似乎都不起作用。

你们能帮我找到解决方案吗？

我的代码（在简短的复制/粘贴示例中）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>WHY DON'T YOU WORK?</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
        <script>
            window.onresize = function (event) {
                resizeimage();
            }
            window.onload = function (event) {
                resizeimage();
            }            
            function resizeimage() {
                var img = document.getElementById('headerimage');

                var oldwidth = img.naturalWidth;
                var oldheight = img.naturalHeight;

                var newwidth = $(window).width();
                var newheight = oldheight / oldwidth * newwidth;

                img.width = newwidth;
                img.height = newheight;     
            }
        </script>
    </head>

    <body>
        <div class="PageDiv" data-role="page" data-add-back-btn="true" id="FrontPage">

            <div class="HeaderDiv" data-role="header" data-position="fixed">
                <img id="headerimage" name="headerimage" src="images/PSO_Banner_960x89.png" />
            </div>

            <div class="ContentDiv" data-role="content" data-theme="a">
                CONTENT #1
                <a href="#LoginPage">LoginPage</a>
            </div>

            <div class="FooterDiv" data-role="footer" data-position="fixed">
                FOOTER
            </div>
        </div>

        <div class="PageDiv" data-role="page" data-add-back-btn="true" id="LoginPage">

            <div class="HeaderDiv" data-role="header" data-position="fixed">
                <img id="headerimage" name="headerimage" src="images/PSO_Banner_960x89.png" />
            </div>

            <div class="ContentDiv" data-role="content" data-theme="a">
                CONTENT #2
                <a href="#FrontPage">FrontPage</a>
            </div>

            <div class="FooterDiv" data-role="footer" data-position="fixed">
                FOOTER
            </div>
        </div>
    </body>
</html>

仍在寻找解决方案...

4

1 回答 1

2

首先不要混合香草 javascript 和 jQuery。

你的问题是你有 2 页有 2 个相同的标题图片。它们中的 Bot 被加载到 DOM 中，并且您的功能始终访问第一个，即第一页中的图片。

您将需要一点 jQuery 和 jQuery Mobile 来完成这项工作。

而不是这个：

    var img = document.getElementById('headerimage');

用这个：

    var img = $.mobile.activePage.find('#headerimage');

编辑 ：

工作示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>WHY DON'T YOU WORK?</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
        <script>
            window.onresize = function (event) {
                resizeimage();
            }

            window.onload = function (event) {
                resizeimage();
            }    

            $(document).on('pageshow', '[data-role="page"]', function(){ 
                resizeimage();       
            });

            function resizeimage() {
                var img = $.mobile.activePage.find('#headerimage');//document.getElementById('headerimage');

                var oldwidth = img.naturalWidth;
                var oldheight = img.naturalHeight;

                var newwidth = $(window).width();
                var newheight = oldheight / oldwidth * newwidth;

                img.width(newwidth);
                img.height(newheight); 

                $(window).trigger( "throttledresize" );             
            }
        </script>
    </head>

    <body>
        <div class="PageDiv" data-role="page" data-add-back-btn="true" id="FrontPage">

            <div class="HeaderDiv" data-role="header" data-position="fixed">
                <img id="headerimage" name="headerimage" src="http://www.azhumane.org/wp-content/uploads/2012/06/AHS025_mastSM_21-11.png" />
            </div>

            <div class="ContentDiv" data-role="content" data-theme="a">
                CONTENT #1
                <a href="#LoginPage">LoginPage</a>
            </div>

            <div class="FooterDiv" data-role="footer" data-position="fixed">
                <h3>FOOTER</h3>
            </div>
        </div>

        <div class="PageDiv" data-role="page" data-add-back-btn="true" id="LoginPage">

            <div class="HeaderDiv" data-role="header" data-position="fixed">
                <img id="headerimage" name="headerimage" src="http://www.azhumane.org/wp-content/uploads/2012/06/AHS025_mastSM_21-11.png" />
            </div>

            <div class="ContentDiv" data-role="content" data-theme="a">
                CONTENT #2
                <a href="#FrontPage">FrontPage</a>
            </div>

            <div class="FooterDiv" data-role="footer" data-position="fixed">
                <h3>FOOTER</h3>
            </div>
        </div>
    </body>
</html>
于 2013-05-28T15:31:43.070 回答