jquery移动页眉/页脚_Jquery_Html_Jquery Mobile_Markup

jquery移动页眉/页脚

jquery html jquery-mobile

jquery移动页眉/页脚,jquery,html,jquery-mobile,markup,Jquery,Html,Jquery Mobile,Markup,我有一些jquery页面，每个页面都有页眉和页脚。如何使其成为单个页眉和页脚。（ie）要在主页页眉/页脚部分加载页眉/页脚html文件请给我一些建议请在下面找到页面结构 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1">

我有一些jquery页面，每个页面都有页眉和页脚。如何使其成为单个页眉和页脚。（ie）要在主页页眉/页脚部分加载页眉/页脚html文件

请给我一些建议

请在下面找到页面结构

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


单页模板

提前感谢……

您可以使用jQuery：

下面是一个工作示例：

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>

<h3>
    Header
</h3>

及

基本上，pagecreate将重新设置整个页面的样式，而create将只设置内容的样式。

添加页眉

检查是否没有标题，然后检查标题

.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');
 }
});

$(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');
 }
});

var currentPage=$.mobile.activePage；
$('
.prependTo（currentPage.trigger（'create'）；
$('
）.appendTo（currentPage.trigger（'create'）；

首先，您应该在

中有JQM脚本和样式表链接。我在我的移动开发工具上使用php，jQuery mobile带有header.php文件和另一个footer.php文件。然后我用

在每个需要的文件上调用它们。。。？你能提供一些代码吗…@Yesvinkumar PHP在服务器中工作，因此它独立于前端。无论如何，我想你应该读一些网络开发的介绍性概念。我也用了同样的概念。但即使我添加了触发器（'create'），样式也不会更新。你能提供一些代码样本吗。。。？非常感谢…嗨Gajotres，谢谢分享。。。这个解决方案对我来说很好@是的，也许你应该把它作为答案。

trigger('create')

trigger('pagecreate').

$(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');
 }
});

$(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');
 }
});

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');