Jquery Mobile Cùng một chân trang trên các trang khác nhau

Question

Tôi muốn có cùng tiêu đề và chân trang trên tất cả các trang trên ứng dụng di động jquery của tôi và kiểm soát nó bằng cách sử dụng một tệp khác ví dụ như footer.html. Điều này là dễ sử dụng PHP bao gồm nhưng tôi không thể vì tôi đang lập kế hoạch về việc sử dụng ứng dụng này với phonegap.

tìm kiếm xung quanh tôi thấy sử dụng

<div data-role="footer"> 
<div class="footerExt"></div> 
    </div> 

và javascript

$('.footerExt').load('footer.html') 

Tuy nhiên điều này không hoạt động. Tôi nên đề cập đến rằng tôi là người mới bắt đầu javascript, tôi hầu như không hiểu những gì đang xảy ra.

Thanks a lot

Answer 1

Hãy thử với sự kiện sau đây, nó hoạt động với mã của tôi:

$('[data-role=page]').live('pageshow', function (event, ui) { 
      $("#" + event.target.id).find("[data-role=footer]").load("footer.html", function(){ 
       $("#" + event.target.id).find("[data-role=navbar]").navbar(); 
      }); 
     }); 

này gist cho thấy toàn bộ mã.

Answer 2

Bạn cần phải tải mã html bên ngoài để một div với một dữ liệu-role = "footer", vì vậy bạn cần phải thay đổi:

<div class="footerExt"></div> 

để

<div data-role="footer" class="footerExt"></div> 

và ví dụ html chân của bạn có thể có một h3

<h3>This is your footer</h3> 

Answer 3

từ jquery 1.9 trở lên live is now deprecated vui lòng sử dụng chức năng với bật. Trong giao diện điều khiển nó sẽ cho Lỗi Loại:. $ (...) sống không phải là một chức năng

dụ thay đổi mã của bạn

$('[data-role=page]').live('pageshow', function (event, ui) { 
      $("#" + event.target.id).find("[data-role=footer]").load("footer.html", function(){ 
       $("#" + event.target.id).find("[data-role=navbar]").navbar(); 
      }); 
     }); 

Replace with

$('[data-role=page]').on('pageshow', function (event, ui) { 
       $("#" + event.target.id).find("[data-role=footer]").load("footer.html", function(){ 
        $("#" + event.target.id).find("[data-role=navbar]").navbar(); 
       }); 
      });