Question

我是网络开发的新手，我正在尝试创建一个静态页脚导航栏，它不会随着滚动而消失。我在stackoverflow上尝试了很多例子，但它们都不适用于我。在我开始滚动后，页脚就会消失。这是我的完整代码：

<!DOCTYPE html>
<html>
<head>
<title>jQueryMoblie</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet"href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css"/>

<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"</script>
<script type="text/javascript">  

    $(document).ready(function(){

    $.("[data-role=footer]").setTouchToggleEnabled(false);

        $.mobile.page.prototype.options.backBtnText = "indietro";
        $('a.item').click(function(){
            var id = $(this).attr('id');
            $.mobile.changePage({
                url: "result.php",
                type: "get",
                data: "id="+id
            },"slide");
            return false;
            });
        });
</script>

</head>
<body>  

<div data-role="page" id="lista">
    <div data-role="header">

        <h1>Lista </h1>
    </div>

    <div data-role="content">
        <ul data-role="listview" data-theme="d">

        <?php            
        $type= "";

$type = $_REQUEST['type'];

            include_once 'resultList.class.php';
    $author->showList($type);

        ?>
        </ul>
   </div>

    <div data-role="footer" data-position="fixed">

<div data-role="navbar"data-position="fixed" data-tap-toggle="false">
    <ul>
        <li><a href="#">One</a></li>
        <li><a href="#">Two</a></li>
        <li><a href="#">Three</a></li>
    </ul>
</div>

</div>

</body>
</html>

Answer 1

试试这个，应该有效

<div data-role="header" data-position="fixed">
    <h1>Single page</h1>
</div><!-- /header -->

<div data-role="content">   
    <p>This is a single page boilerplate template that you can copy to build your first jQuery Mobile page. Each link or form from here will pull a new page in via Ajax to support the animated page transitions.</p>      
    <p>Just view the source and copy the code to get started. All the CSS and JS is linked to the jQuery CDN versions so this is super easy to set up. Remember to include a meta viewport tag in the head to set the zoom level.</p>
    <p>This template is standard HTML document with a single "page" container inside, unlike a <a href="multipage-template.html" data-ajax="false">multi-page template</a> that has multiple pages within it. We strongly recommend building your site or app as a series of separate pages like this because it's cleaner, more lightweight and works better without JavaScript.</p>

    <p>This is a single page boilerplate template that you can copy to build your first jQuery Mobile page. Each link or form from here will pull a new page in via Ajax to support the animated page transitions.</p>      
    <p>Just view the source and copy the code to get started. All the CSS and JS is linked to the jQuery CDN versions so this is super easy to set up. Remember to include a meta viewport tag in the head to set the zoom level.</p>
    <p>This template is standard HTML document with a single "page" container inside, unlike a <a href="multipage-template.html" data-ajax="false">multi-page template</a> that has multiple pages within it. We strongly recommend building your site or app as a series of separate pages like this because it's cleaner, more lightweight and works better without JavaScript.</p>
</div><!-- /content -->

<div data-role="footer" data-position="fixed">
    <h4>Footer content</h4>
</div><!-- /footer -->

http://readystate.in/codetest/jquerymobile.html

jQuery移动固定导航栏工具栏

1 个答案: