Question

我通过resize（）函数使页面适合设备屏幕：

function resize()
{
    var content_h = $.mobile.getScreenHeight()-$(".jq_header").outerHeight(true)-$(".jq_footer").outerHeight(true)-
        ($(".jq_content").outerHeight(true)-$(".jq_content").height());
    $(".jq_content").height(content_h);
}

页面更改为：

<a href="#contacts" class="ui-btn ui-icon-mail ui-btn-icon-left" id="link_to_contacts">Contacts</a>

如何在点击此链接并加载“联系人”页面后调用调整大小？

$(document).ready(function()
{
    $("#link_to_contacts").on("click",function() 
    {
        resize();
    });
});

似乎不起作用。

Here是应用的一个示例。

完整来源：

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
        <script>

            function resize()
            {
                var content_h = $.mobile.getScreenHeight()-$(".jq_header").outerHeight(true)-$(".jq_footer").outerHeight(true)-
                    ($(".jq_content").outerHeight(true)-$(".jq_content").height());
                $(".jq_content").height(content_h);
            }
            $(document).on( "pagecontainershow", function()
            {
                resize();        
            });

            $(window).on("resize orientationchange", function()
            {
                resize();
            });
            $(document).ready(function()
            {
                $("#link_to_contacts").on("click",function() 
                {
                    resize();
                });
            });
        </script>
    </head>
    <body>
        <div data-role="page" data-theme="a" id="photos" class="ui-page">
            <div data-role="header" data-theme="a" class="jq_header">
                <h1>Header</h1>
                <div data-role="navbar">
                    <ul>
                        <li><a href="#" class="ui-btn-active ui-state-persist ui-icon-camera ui-btn-icon-left">Photos</a></li>
                        <li><a href="#contacts" class="ui-btn ui-icon-mail ui-btn-icon-left" id="link_to_contacts">Contacts</a></li>
                    </ul>
                </div>
            </div>
            <div data-role="content" data-theme="a" class="jq_content">
                <div data-role="collapsible" data-content-theme="b" style="text-align : center;">
                    <h3>Happy me</h3>
                    <img src="http://www.happyologist.co.uk/wp-content/uploads/happy.jpeg" style="width:194px;height:182px;"/>
                </div>
                <div data-role="collapsible" data-content-theme="b" style="text-align : center;">
                    <h3>Sad me</h3>
                    <img src="http://mazakmasti.in/wp-content/uploads/2015/01/Sad-smiley-with-tears.png" style="width:194px;height:182px;"/>
                </div>
            </div>

            <div data-role="footer"  data-theme="a" class="jq_footer">
                <h1>Footer</h1>
            </div>
        </div>
        <div data-role="page" data-theme="a" id="contacts"  class="ui-page">
            <div data-role="header" data-theme="a" class="jq_header">
                <h1>Header</h1>
                <div data-role="navbar">
                    <ul>
                        <li><a href="#photos" class="ui-btn ui-icon-camera ui-btn-icon-left">Photos</a></li>
                        <li><a href="#" class="ui-btn-active ui-state-persist ui-icon-mail ui-btn-icon-left">Contacts</a></li>
                    </ul>
                </div>
            </div>
            <div data-role="content" data-theme="a" class="jq_content">
                    <div>E-mail: example@example.com</div><br/>
                    <div>Address: Green st. 28</div>
            </div>

            <div data-role="footer"  data-theme="a" class="jq_footer">
                <h1>Footer</h1>
            </div>
        </div>
    </body>
</html>

Answer 1

你为什么使用JS？使用CSS更简单可靠，并为您的网页提供良好的响应结构。

考虑一下：

删除所有以前的jQuery调整大小方法......
对于每个.ui-page包装内部内容，其中DIV具有类table
将CSS规则添加到：.jq_header，.jq_content，.jq_footer以充当表格行。
添加一些基本的宽度和高度规则（基本上推到100％大小）。
处理溢出，你就完成了。

小提琴演示： With your code after applying changes

要添加的CSS：

body, html{ 
    height:100%; 
    width:100%;
    overflow:hidden;
}
.ui-page {
    width:100%;
    height:100%;
    padding:0;
    margin:0;
    overflow:hidden;
}
.table {
    display:table;
    height: 100% !important;
    width: 100%;
}
.jq_header,
.jq_content,
.jq_footer {
    display:table-row;
    width: 100%;
}
.jq_content {
    height:100%;
    overflow-y:auto;
    overflow-x:hidden;
}

如何通过<a>? (JQuery Mobile)</a>导航到页面后调整页面大小

1 个答案: