jQuery移動固定導航欄工具欄

我是新來的網頁開發，我試圖創建一個靜態頁腳導航欄不會隨着滾動消失。我在這裏嘗試了很多例子，但沒有一個適合我。在我開始滾動後，頁腳就消失了。這裏是我的全碼：jQuery移動固定導航欄工具欄

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

來源

2013-05-31 ajito000

您正在測試這個什麼平臺上？爲什麼不用jQuery Mobile版本1.3.1來試用它？ – Gajotres

非常感謝！包括最新的jQuery版本解決了我的問題。我正在測試Firefox的桌面瀏覽器和Android。 – ajito000

試試這個，應該工作

<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

來源

2013-05-31 12:41:57 sajay

jQuery移動固定導航欄工具欄

回答

相關問題