JQueryMobile wrap data-role="content" div

Möchte ich zeigen, einige statische Grenzen rund um die data-role="content" element.

<div data-role="page" id="moodle" data-add-back-btn="true">
    <div data-role="header"><h1>MyPage</h1></div>
    <div data-role="content">
        Some Content
    </div>
</div>

Um dies zu erreichen, ich bin derzeit auf der Verpackung meiner Seite Inhalte in einer Reihe von divs, die um die Grenzen über css. Diese divs haben nur Ränder am oberen und linken Rand.

$(document).bind("ready",function(){
$('div[data-role="content"]').each(function(k,v){
    $(v).wrap('<div class="b1"/>');
    $(v).wrap('<div class="b2"/>');
    $(v).wrap('<div class="b3"/>');
    $(v).wrap('<div class="b4"/>');
    $(v).wrap('<div class="content"/>');
});

Das problem ist, dass beim scrollen der Inhalt, den oberen Rand verschwindet, wie es Schriftrollen aus dem viewport /hinter dem header. So, wie die "wrap", die data-role="content"-div in meine anderen divs, um sicherzustellen, die Grenzen fixiert bleiben, während der Inhalt gescrollt wird?

BEARBEITEN:
Beispiel der oberen linken Ecke des content-div (einfach rechts unter dem header). Diese Grenzen sollten befestigt bleiben beim scrollen:
JQueryMobile wrap data-role=

InformationsquelleAutor gorootde | 2012-11-12
  1. 0

    Können Sie Rahmen hinzufügen, um Elemente, die weiterhin an Ihrer Position, während der Inhalt scrollt hinter Ihnen.

    Ein Beispiel für die pseudo-Seite wie diese:

    <div data-role="page">
    <div data-position="fixed" data-role="header">
        <h1>Header</h1>
    </div>
    <div data-role="content">
        <p>Content</p>
    </div>
    <div data-position="fixed" data-role="footer">
        <h2>Footer</h2>
    </div>
</div>​

    Kann CSS wie dieses angewendet:

    .ui-page .ui-header {
    box-sizing    : border-box;
    border-bottom : 4px solid red;
}
.ui-page .ui-footer {
    box-sizing : border-box;
    border-top : 4px solid red;
}
.ui-mobile .ui-page {
    box-sizing   : border-box;
    border-left  : 4px solid red !important;
    border-right : 4px solid red !important;
}

    Welche Orte einen Rahmen am unteren Rand der Kopfzeile, die oben auf der Fußzeile und die Links/rechts den content Bereich.

    Den box-sizing : border-box; Erklärungen zu den Berechnungen weniger kompliziert (es umfasst den Rand/Polsterung in der Höhe/Breite des Elements).

    Hier ist eine demo: http://jsfiddle.net/2M5Jc/

    Docs für box-sizing: https://developer.mozilla.org/en-US/docs/CSS/box-sizing

    Wenn Sie nicht wollen, eine Feste position Kopf-oder Fußzeile, können Sie einfach platzieren Sie ein element in Ihrem Platz, die null-Höhe und Rahmen.

    • Alles in Ordnung. Ich muss aber hinzufügen, mehrere Grenzen, um meinen content-div. E. g. denken Sie an einen Regenbogen von der linken unteren -> oben Links -> rechts oben den Inhalt div. Das ist der Grund, warum ich bin mit dieser massiven Anzahl von divs. Bearbeitet meine post und ein Beispiel wie es auszusehen hat.
    • werfen Sie einen Blick auf CSS border-image: developer.mozilla.org/en-US/docs/CSS/border-image
    • border-image hat die Arbeit - trotz der Tatsache, dass es teurer ist als div-Grenzen.
    InformationsquelleAutor Jasper
  2. 0

    Du brauchst, um den Inhalt in #content Scrollbar sein soll

    http://outof.me/native-scrolling-in-jquery-mobilephonegap-applications

    Diese Weise Ihre Grenzen dort bleiben, wo Sie sind, aber den Inhalt im Bildlauf

    UPDATE - Beispiel:

    <div data-role="page" id="moodle" data-add-back-btn="true">
    <div data-role="header"><h1>MyPage</h1></div>
    <div data-role="content" class="scrollable">
        Some Content
    </div>
</div>


div[data-role="content"] {
    position: absolute;
    top: 41px;
    bottom: 0;
    left: 0;
    right: 0;
}

.scrollable {
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

/* iOS specific fix, don't use it on Android devices */
.scrollable > * {
    -webkit-transform: translateZ(0px);
}
    • Dies bedeutet nichts anderes, als die native data-position="fixed" von jqm. Wie auch immer, ich kann nicht sehen, wie löst dies mein problem.
    • Lesen Sie den blog-post nochmal. Ja, data-position="fixed" ist für den Kopf-und ja, Sie wollen wahrscheinlich gelten, dass - aber das ist nicht der Punkt. Der Punkt ist, dass der Inhalt innerhalb von #content Scrollbar sein soll, d.h. overflow-y: scroll && -webkit-overflow-scrolling: touch; Wenn Sie das tun, dann wird der Inhalt scrollen, aber die Grenzen im Platz zu bleiben wird.
    InformationsquelleAutor asgeo1
Schreibe einen Kommentar