Как динамически загружать вкладки нижнего колонтитула с помощью jquerymobile в приложении phonegap? - PullRequest
Новая
       0

Как динамически загружать вкладки нижнего колонтитула с помощью jquerymobile в приложении phonegap?

6 голосов
/ 29 декабря 2011

Я использую jQuery Mobile для своего приложения PhoneGap в Xcode.Я создал несколько страниц с вкладками в нижнем колонтитуле.Он работает правильно на статической странице следующим образом. 

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

Когда я пытался загрузить вкладки в соответствии с ролью пользователя.HTML-код на странице: 

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

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

Изображение статической загрузки: enter image description here

Загрузка изображения из jQuery: enter image description here

Я тоже обновил список, но не работает.Я не знаю, в чем проблема.Пожалуйста, помогите мне.

Спасибо, -regeint

Ответы [ 2 ]

2 голосов
/ 29 декабря 2011

Я не уверен, как вы refresh nabvar виджет в jQuery Mobile Framework, но я знаю, что вы можете удалить предыдущий 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 отредактировал их вместе, чтобы сделать один .append() вместо добавления для каждой строки HTML (.html(string) == (.remove() + .append(string))).

0 голосов
/ 13 ноября 2014

У меня нет представителя, чтобы поблагодарить Джаспера, но это отличное решение.

Просто хотел добавить, что я сделал то же самое и использовал пустую панель навигации для ввода, поэтому в html есть пустой div: 

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

затем в сценарии: 

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

предназначается для этого - может быть полезно, если у людей есть многостраничные файлы.

Еще раз спасибо

...