0

我知道之前提出的所有问题都提出了完全相同的问题。

我不想更改任何原始代码，或添加任何额外的样式。

根据此页面：

http://view.jquerymobile.com/1.3.0/docs/widgets/navbar/footer-persist-a.php

我需要做的就是复制给定的代码，并将其粘贴到我的 HTML 中。

我这样做了：

<head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!-- CSS -->
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
        <!-- CSS end -->

        <!-- Javascripts -->
            <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
            <script type="text/javascript" src="<?php echo base_url('Assets/js/defaults/jquery-mobile.js');?>"></script>
        <!-- Js End -->
    </head>

这是HTML

<div data-role="page">
    <div data-role="header">
        <div data-role="navbar">
            <ul>
                <li><a href="#" class="ui-btn-active">One</a></li>
                <li><a href="#">Two</a></li>
                <li><a href="#">Three</a></li>
            </ul>
        </div><!-- /navbar -->  
    </div>

    <div data-role="content">       
        <p>Some Content here</p>
    </div>

    <div data-role="footer" data-id="foo1" data-position="fixed">
        <div data-role="navbar">
            <ul>
                <li><a href="a.html">Info</a></li>
                <li><a href="b.html">Friends</a></li>
                <li><a href="c.html">Albums</a></li>
                <li><a href="d.html">Emails</a></li>
            </ul>
        </div><!-- /navbar -->
    </div><!-- /footer -->

</div>

并且页脚离底部很远。事实上，它挂在中间的某个地方。

我正在使用最新的 jquery 手机。

有任何想法吗？ 在此处输入图像描述

4

1 回答 1

1

您必须data-position="fixed"在页脚容器上设置data-role="footer"。

您的代码将如下所示：

<div data-role="footer" data-position="fixed">
    <div data-role="navbar">
        <ul>
            <li><a href="#">One</a></li>
            <li><a href="#">Two</a></li>
            <li><a href="#">Three</a></li>
        </ul>
    </div><!-- /navbar -->
    <p style="text-align:center;">I'm the footer</p>
</div><!-- /footer -->

这是一个工作小提琴：http: //jsfiddle.net/pV2S4/

于 2013-03-30T08:29:08.570 回答