jQuery Mobile: Sử dụng cùng một tiêu đề chân trang cho tất cả các trang

Question

Tôi đang cố gắng triển khai một số mã sẽ tạo đầu trang và chân trang trên tất cả các trang web của tôi thay vì mã hóa cứng chúng. Tôi đã thử điều này:

Tôi đã có điều này trong "trang chính" của tôi Tôi chỉ được gọi là gói tiêu đề tôi muốn trong một div.

<div id="headerProto"> 
    <div data-role="header" data-position="fixed" data-theme="b"> 
     <h1> Title </h1>   
    </div> 
</div> 

Sau đó, trong các trang khác tôi đã:

<div class="headerChild"> 
</div> 

Và tôi nói thêm:

$(".headerChild").html($("#headerProto").html()); 

Không xúc xắc. Dù bằng cách nào thì đó là một dự đoán tổng thể về cách tôi phải làm điều đó. Có cách nào tốt hơn?

Answer 1

Sử dụng .load() có thể trợ giúp, sau đó chỉ cần đặt mã bạn muốn đưa vào tệp bạn đang liên kết đến.

$('.headerChild').load('pathto/headerProto.html') 

Một cách khác nếu bạn không muốn giữ lại các dữ liệu trong một file riêng biệt: Tôi đã không làm điều này, nhưng từ một số nghiên cứu nhanh chóng bạn cũng có thể liên kết đến một yếu tố bên trong file.

$('.headerChild').load('pathto/mainPage.html #headerProto') 

Answer 2

Tín dụng chuyển đến mariachi.

http://forum.jquery.com/topic/jquery-mobile-fixed-header-and-footer-on-page-transition

Tôi chỉ dán giải pháp của mình.

1.) Wrap your data-role = "header" và đặt id = "constantheader-wrapper".

Sidor Mobile

Sử dụng một div nếu bạn muốn trong wrapper tiêu đề, nhưng cố gắng để có đầu ra tiêu đề trả lại đầy đủ như trong trường hợp này, nếu không nó sẽ mất phong cách khi bạn tải lại một trang. CHÚ THÍCH! Đặt tiêu đề trong trang đầu tiên của bạn, sau đó phương thức này chỉ thêm html tiêu đề vào tất cả các trang khác.

2.) Đặt các chức năng trong tập tin hoặc inline kịch bản:

jQuery.fn.headerOnAllPages = function() { 
    var theHeader = $('#constantheader-wrapper').html(); 
    var allPages = $('div[data-role="page"]'); 

    for (var i = 1; i < allPages.length; i++) { 
     allPages[i].innerHTML = theHeader + allPages[i].innerHTML; 
    } 
}; 

3.) Gọi hàm từ tài liệu đã sẵn sàng, ví dụ:

$(document).ready(function() { 
    $().headerOnAllPages(); 
}); 

Answer 3

tôi sử dụng.clone()

Trong nhiều trang dự án jQuery Mobile của tôi, tôi có một tiêu đề trên trang chính của tôi:

<div data-role="header" data-id="header" class="ui-header ui-bar-b" role="banner" id="headerMaster"> 
    <a href="#my-menu">Menu</a> 
    <h1 class="ui-title" role="heading" aria-level="1">My Header</h1> 
</div> 

và trong tất cả các trang tiếp theo (hoặc divs với dữ liệu-role = trang) Tôi có điều này:

<div class="headerChild"> 
</div> 

và sau đó trên pageinit bạn clone tổng thể và gắn cho tất cả các trẻ em:

$(document).delegate("#index", "pageinit", function() { 
     $("#headerMaster").clone().appendTo(".headerChild"); 
}); 

ED IT: nếu pageinit không hoạt động cho bạn, hãy thử sự kiện pagebeforecreate

$(document).delegate("#index", "pagebeforecreate", function() { 
    $("#headerMaster").clone().appendTo(".headerChild"); 
});