リファレンス - jquery mobile 見出し




phonegapアプリケーションでjquerymobileを使用して動的にフッタータブを読み込む方法 (2)

私はXcodeでPhoneGapアプリケーションのためにjQuery Mobileを使用しています。 私はフッターにタブを持つ複数のページを作成しました。 静的ページでは次のように正しく動作します。

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

静的荷重の画像:

jQueryからの画像読み込み:

私もリストをリフレッシュしましたが、動作しません。 私は問題が何であるか分からない。 私を助けてください。

ありがとう、-regeint


私はjQuery Mobileフレームワークでnabvarウィジェットをrefreshする方法がわかりませんが、以前の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)) )。


ジャスパーにも感謝する担当者はいないが、その素晴らしい解決策だ。

ちょうど私が同じことをしてフィードに空のnavbarを使用したことをここに追加したいので、html theresで空白のdiv:

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

スクリプトの中で:

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

それをターゲットにする - ファイルに複数のページがある場合に便利です。

再度、感謝します