如何在通过<；导航到页面后调整页面大小；a>；？（jquerymobile）_Jquery_Jquery Mobile

如何在通过<；导航到页面后调整页面大小；a>；？（jquerymobile）

jquery jquery-mobile

如何在通过<；导航到页面后调整页面大小；a>；？（jquerymobile）,jquery,jquery-mobile,Jquery,Jquery Mobile,我通过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

我通过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>

似乎不起作用

是应用程序的一个示例

完整资料来源：

<!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>


函数resize（）
{
var content_h=$.mobile.getScreenHeight（）-$（.jq_页眉”）.outerHeight（true）-$（.jq_页脚”）.outerHeight（true）-
（$（“.jq_content”）.outerHeight（true）-$（“.jq_content”）.height（）；
$（“.jq_content”）。高度（content_h）；
}
$（文档）.on（“pagecontainershow”，函数（）
{
调整大小（）；
});
$（窗口）.on（“调整方向更改大小”，函数（）
{
调整大小（）；
});
$（文档）.ready（函数（）
{
$（“链接到联系人”）。在（“单击”，函数（）
{
调整大小（）；
});
});
标题




祝我快乐
让我伤心
页脚
标题




电邮：example@example.com

地址：格林街28号
页脚

为什么要使用JS？使用CSS和为页面创建良好的响应结构更容易、更可靠

考虑这一点：

删除所有以前的jQuery调整大小方法

对于每个

.ui页面

用一个具有类

表

将CSS规则添加到：.jq_页眉、.jq_内容、.jq_页脚以用作表行

添加一些基本的宽度和高度规则（基本上推到100%大小）

处理溢出，您就完成了

小提琴演示：

要添加的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;
}

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;
}