फोनगैप ऐप में jquerymobile का उपयोग करके गतिशील रूप से पाद लेख टैब कैसे लोड करें?

Question

मैं Xcode में मेरी PhoneGap अनुप्रयोग के लिए jQuery मोबाइल का उपयोग कर रहा हूँ। मैंने फ़ूटर में टैब वाले कई पेज बनाए हैं। यह निम्नानुसार स्थिर पृष्ठ में ठीक से काम करता है।

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

जब मैं उपयोगकर्ता भूमिका के अनुसार टैब लोड करने के लिए कोशिश की। पेज में एचटीएमएल कोड:

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

jQuery कोड: 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'); 

स्थिर लोड हो रहा है का चित्र

मैं सूची भी ताजा कर दिया है, लेकिन काम नहीं कर रहा है। मुझे नहीं पता कि समस्या क्या है। कृपया मेरी मदद करें।

धन्यवाद, -regeint

Answer 1

मुझे यकीन है कि आप refresh jQuery मोबाइल ढांचे में एक nabvar विजेट लेकिन मैं कैसे पता है कि तुम पिछले navbar हटाने और सम्मिलित कर सकते हैं कि नहीं कर रहा हूँ एक ताजा एक:

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

http://jsfiddle.net/ZVGSZ/

सूचना है कि मैं HTML तार की एक सरणी बनाया और फिर join उन्हें एक साथ एड करने के लिए:

यहाँ एक डेमो है प्रत्येक HTML स्ट्रिंग (.html(string) == (.remove() + .append(string))) के लिए संलग्न करने के बजाए एक .append()।

Answer 2

मैं प्रतिनिधि जैस्पर का शुक्रिया अदा करना भी है न, लेकिन इसकी एक महान समाधान।

बस यहाँ जोड़ने के लिए है कि मैं भी ऐसा ही किया था और, में खिलाने के लिए तो में एचटीएमएल एक खाली div theres एक खाली नेवबार प्रयोग किया है: स्क्रिप्ट में

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

तो:

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

लक्ष्य यह है - अगर लोग अपने फ़ाइल में बहु पृष्ठों है उपयोगी हो सकता है।

धन्यवाद फिर से