jquery手機標頭/腳註

我有一些沒有jQuery頁面，每個頁眉和頁腳。我如何使它成爲單個頁眉和頁腳。（即）要在主頁面頁眉/頁腳部分加載頁眉/頁腳html文件。jquery手機標頭/腳註

請指教。

請看以下頁面結構....

<!DOCTYPE html> 
<html> 

<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Single page template</title> 
    <link rel="stylesheet" href="css/jquery.mobile-1.2.0.min.css" /> 

    <script src="js/jquery-1.8.2.min.js"></script> 
    <script src="js/customScript.js"></script> 
    <script src="js/jquery.mobile-1.2.0.min.js"></script> 
</head> 

<body> 

<div data-role="page" id="page1"> 
    <div id="hdr"> 
     <!--Need to include header.html--> 
    </div> 
    <div data-role="content"> 
     <!--Content--> 
    </div> 
    <div id="ftr"> 
     <!--Need to include footer.html--> 
    </div> 

</div> 

</body> 
</html>

在此先感謝....

來源

2013-04-03 Yesvinkumar

首先，你應該有JQM腳本和''樣式表的鏈接。 – Omar

我在帶有** header.php **文件和另一個** footer.php **的jQuery移動設備的移動設備上使用** php **。然後我用'<？php include'inc/header.php'給他們打電話。？>在每個需要的文件上。 – kevin

PHP將如何在移動設備上工作...？你可以提供一些代碼... – Yesvinkumar

您可以使用jQuery load()：

$(document).ready(function() { 
    $("#hdr").load("header.html"); 
    $("#ftr").load("footer.html"); 
});

來源

2013-04-03 13:08:21 Eli

我使用了相同的。但是，即使我添加觸發器（'創建'），樣式也不會更新。如果有，請提供一些代碼示例...？非常感謝... – Yesvinkumar

這裏有一個工作示例：

index.html

<!DOCTYPE html> 
<html> 
<head> 
    <title>jQM Complex Demo</title> 
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> 
    <script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>  
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>  
    <script> 
     $(document).on('pagebeforeshow', '[data-role="page"]', function(){  
      $.mobile.activePage.find('[data-role="header"]').load("header.html", function(){ 
       $(this).parent().trigger('pagecreate'); 
      }); 
      $.mobile.activePage.find('[data-role="footer"]').load("footer.html", function(){ 
       $(this).parent().trigger('pagecreate'); 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <div data-role="page" id="index"> 
     <div data-theme="a" data-role="header"> 

     </div> 

     <div data-role="content"> 

     </div> 

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

     </div> 
    </div>  
</body> 
</html>

了header.html

<h3> 
    Header 
</h3>

footer.html：

<h3> 
    Footer 
</h3>

這裏的竅門是觸發pagecreate（不創建）款式頁眉和頁腳a通過加載函數已添加內容。

閱讀本article/answer找到

trigger('create')

和

trigger('pagecreate').

之間的差別基本上，pagecreate將restyle整個頁面，而創建將僅樣式內容。

來源

2013-04-03 13:29:55 Gajotres

嗨Gajotres，感謝分享...這個解決方案適合我！ – Yesvinkumar

@Yesvinkumar，也許你應該將它標記爲答案。 –

添加頁眉

檢查，如果沒有標題，然後.append()頭.before() DIV data-role=content。

$(document).on('pagebeforeshow', function() { 
if ($(this).find('[data-role=header]').length == 0) { 
    $('[data-role=content]').before('<div data-role="header"><h1>Page header</h1></div>'); 
    $('[data-role=page]').trigger('pagecreate'); 
} 
});

新增註腳

檢查，如果沒有腳註，然後.append()頁腳.after() DIV data-role=content。

$(document).on('pagebeforeshow', function() { 
if ($(this).find('[data-role=footer]').length == 0) { 
    $('[data-role=content]').after('<div data-role="footer"><h1>Page footer</h1></div>'); 
    $('[data-role=page]').trigger('pagecreate'); 
} 
});

來源

2013-04-03 13:32:04 Omar

var currentPage=$.mobile.activePage; 

$('<div data-role="header" id="myheader"> 
     <a href="" >Home</a> 
     <a href="" >Back</a> 
    </div>').prependTo(currentPage).trigger('create'); 

$('<div data-role="footer" id="myfooter"> 
     <a href="">About Us</a> 
    </div>').appendTo(currentPage).trigger('create');

來源

2014-12-05 09:55:13

jquery手機標頭/腳註

回答

相關問題