Làm cách nào để tải các tab chân trang động bằng jquerymobile trong ứng dụng PhoneGap?

Question

Tôi đang sử dụng jQuery Mobile cho ứng dụng PhoneGap của mình trong Xcode. Tôi đã tạo nhiều trang có các tab ở chân trang. Nó hoạt động đúng trong trang tĩnh như sau.

<div data-role="footer" data-position="fixed">  
    <div data-id="mainTab" data-role="navbar"> 
     <ul id="footer_tabs"> 
      <li><a href="search_page.html" data-transition="slideup" data-icon="search">Search</a></li> 
      <li><a href="my_favorite_page.html" data-icon="star" data-transition="slideup">Favorites</a></li> 
      <li><a href="my_account_page.html" data-icon="gear" data-transition="slideup">Account</a></li> 
      <li><a href="create_ad_page.html" class="ui-state-persist ui-btn-active" data-transition="slideup" data-icon="plus">Create Ad</a></li> 
     </ul> 
    </div> 
<div> 

Khi tôi cố tải các tab theo vai trò người dùng. HTML code trong trang:

<div data-role="footer" data-position="fixed">  
    <div data-id="mainTab" data-role="navbar"> 
     <ul id="footer_tabs"> 
     </ul> 
    </div> 
<div> 

mã jQuery:

$('#footer_tabs').append('<li><a href="search_page.html" data-transition="slideup" data-icon="search">Search</a></li>'); 
$('#footer_tabs').append('<li><a href="my_favorite_page.html" data-transition="slideup" data-icon="search">Favorite</a></li>'); 
$('#footer_tabs').append('<li><a href="my_account_page.html" data-transition="slideup" data-icon="search">Account</a></li>'); 
if(userRole == '3'){ 
    $('#footer_tabs').append('<li><a href="create_ad_page.html" data-transition="slideup" data-icon="search">Create Ad</a></li>'); 
} 
$('#footer-tabs').listview('refresh'); 

Picture of tải tĩnh:

Ảnh tải từ jQuery:

Tôi đã làm mới danh sách quá, nhưng không hoạt động. Tôi không biết vấn đề là gì. Xin hãy giúp tôi.

Cảm ơn, -regeint

Answer 1

Tôi không chắc chắn làm thế nào bạn refresh một widget nabvar trong khuôn khổ jQuery Mobile nhưng tôi biết rằng bạn có thể loại bỏ trước navbar và chèn một tươi một:

//create an output variable, I used an array 
var output = ['<div data-id="mainTab" data-role="navbar"><ul id="footer_tabs">']; 

//push items onto the output array 
output.push('<li><a href="search_page.html" data-transition="slideup" data-icon="search">Search</a></li>'); 
output.push('<li><a href="my_favorite_page.html" data-transition="slideup" data-icon="search">Favorite</a></li>'); 
output.push('<li><a href="my_account_page.html" data-transition="slideup" data-icon="search">Account</a></li>'); 
if(userRole == '3'){ 
    output.push('<li><a href="create_ad_page.html" data-transition="slideup" data-icon="search">Create Ad</a></li>'); 
} 
output.push('</ul></div>'); 

//this last line is important, the output array is being joined into a string, then appended to the footer element, 
//also the `create` event is being triggered on the footer element so the jQuery Mobile framework will update the widget with all the necessary styles 
$('[data-role="footer"]').html(output.join('')).trigger('create'); 

Đây là bản trình diễn: http://jsfiddle.net/ZVGSZ/

Lưu ý rằng tôi đã tạo một chuỗi chuỗi HTML và sau đó join chỉnh sửa chúng lại với nhau để làm một đơn .append() thay vì nối thêm cho mỗi chuỗi HTML (.html(string) == (.remove() + .append(string))).

Answer 2

Tôi không có đại diện để cảm ơn Jasper, nhưng đó là một giải pháp tuyệt vời.

Chỉ muốn thêm ở đây rằng tôi đã làm như vậy và sử dụng một navbar trống để nuôi vào, vì vậy trong html theres một div trống:

<div data-role="navbar" data-iconpos="left" id="PageLinks">

sau đó trong kịch bản:

$('#PageLinks').html(footerLinks.join('')).trigger('create');

nhắm mục tiêu - có thể hữu ích nếu mọi người có nhiều trang trong tệp của họ.

Cảm ơn bạn lần nữa