JQuery Mobile altbilgi şablon/şablon/kalıcı başlık oluşturma ve ™

SORU

5 ŞUBAT 2012, Pazar

JQuery Mobile altbilgi şablon/şablon/kalıcı başlık oluşturma ve ™

JQuery Mobile/ ™ ile mobil uygulama yazma dalıyorum. this sample template HTML/JS sayfaları oluşturmak için kullandığı başlatmak için kullanıyorum. Yerine tek bir html dosyası <page> tüm etiketleri daha kolay düzenlemek için çok bölme var.

Her sayfa için ayrı bir dosya gerekir beri, tempated üstbilgi/altbilgi eklemek için en iyi yolu nedir?Sadece kopyalamak ve tüm altbilgi -^ yapıştırmak için gereken yere gördüm . her HTML sayfasına gezinti çubuğu kodu. Bu olması gerektiği gibi görünmüyor. Eğer bir menü öğesi değiştirmek isterseniz, örneğin, her sayfasına git ve değiştirmek gerekir.

Atladığım çözüm nedir?

Belki de sadece jQuery Mobile anlayamıyorum. Örneğin, kendi Kenar Çubuğu onların dokümanlar için kullanın - Bu Kenar Çubuğu kodu kopyalayın ve her sayfa üzerine yapıştırılan? Bu hiç mantıklı değil. Altbilgi burada sorduğum soru ile aynı fikir.

http://jquerymobile.com/test/docs/pages/page-cache.html

Bu hak, ($.live('pageinit') çalışmıyor) gelmiyor mu var nedir. Bu HTML her HTML sayfası neler

<div id="mainFooter" data-position="fixed" data-id="mainFooter" data-role="footer" class="ui-footer ui-bar-a ui-footer-fixed fade ui-fixed-inline" role="contentinfo" style="top: 58px;">

Ve JS

$.live('pageinit', function (event) {
    displayFooter();
});

function displayFooter() {
    $('#mainFooter').html('<div data-role="navbar" class="nav-glyphish-example" data-grid="d">'  
        '<ul>'  
        '<li><a href="#" id="menuitem1" data-icon="custom">Menu Item 1</a></li>'  
        '<li><a href="#" id="menuitem2" data-icon="custom">Menu Item 2</a></li>'  
        '<li><a href="#" id="menuitem3" data-icon="custom">Menu Item 3</a></li>'  
        '</ul>'  
        '</div>');
}

CEVAP

11 ŞUBAT 2012, CUMARTESİ

Birkaç gün bu sorunu çözmek için çalışıyorum ve çözüme çok yaklaştım. Aşağıdaki HTML kodunu kullanın:

<body>
    <div data-role="page" id="page">

        <div data-role="header">
            <h1 id="title">Title</h1>
        </div><!-- /header -->

        <div data-role="content" id="content">  
            <p>Loading...</p>
        </div><!-- /content -->

        <div data-role="footer" id="footer" data-position="fixed">
            <div data-role="navbar" id="navbar">
            </div>
        </div><!-- /footer -->
    </div><!-- /page -->
</body>

Ve aşağıdaki fonksiyonları menü ajax kullanarak içerik yüklemek için hazırladım.

$(document).on('pageinit', "#page", function() {
    // for example: displayFooter();
    loadContent("main");
    loadMenu("default");
});

function loadContent(location) {
    return $('#content').load("views/content/" location ".html", function() { 
        $(this).trigger('create');
    });
}
function loadMenu(location) {
    $("#menu").remove();
    $("#navbar").remove();

    $("#footer").html('<div data-role="navbar" id="navbar">');
    $("#navbar").html('<ul id="menu"></ul>');

    $("#menu").load("views/menus/" location ".html", function() { $("#menu").parent().navbar(); });

    return true;
}

.trigger('create'); .navbar(); yöntemleri JQM stil doğru tutmak için gereklidir, ancak, yine de küçük bir hata var. Menü pozisyonunu css üst: kullanarak ayarlanır (...px) bazen doğru değil ve ilk danstan sonra. doğru konuma kendisi taşır Gerçekten de yakın!

Düzenleme:position: fixed; 12 *ayarlayarak küçük hata yukarıda bahsettiğim gitti. Ayrıca, eğer pozisyon JQM tarafından top değeri neden yanlışsa kolay #footer top (px) hesaplayan bir yöntem.

Bunu Paylaş: