2

data-role="content"要素の周りにいくつかの静的な境界線を表示したいと思います。

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

これを実現するために、現在、ページのコンテンツを一連のdivでラップしています。これにより、cssを介して境界線が作成されます。これらのdivには、上部と左側にのみ境界線があります。

$(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"/>');
});

問題は、コンテンツをスクロールするときに、ビューポートから/ヘッダーの後ろにスクロールすると上部の境界線が消えることです。data-role="content"では、コンテンツがスクロールしている間、-divを他のdivに「ラップ」して、境界線が固定されたままになるようにするにはどうすればよいでしょうか。

編集：コンテンツdivの左上隅の例（ヘッダーのすぐ下）。この境界線は、スクロール中は固定されたままである必要があります。 画像の例

4

2 に答える 2

0

#content内のコンテンツをスクロール可能にする必要があります

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

そうすれば、境界線はそのままになりますが、内部のコンテンツはスクロールします

更新-例：

<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);
}
于 2012-11-12T22:19:02.703 に答える
0

コンテンツが後ろにスクロールしている間、その場所にとどまる要素に境界線を追加できます。

次のような疑似ページの例：

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

このようなCSSを適用できます：

.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;
}

これにより、ヘッダーの下部、フッターの上部、およびコンテンツ領域の左側/右側に境界線が配置されます。

宣言は、計算の複雑さを軽減するためのbox-sizing : border-box;ものです（要素の高さ/幅の寸法内の境界線/パディングが含まれます）。

これがデモです：http：//jsfiddle.net/2M5Jc/

ドキュメントbox-sizing：https ：//developer.mozilla.org/en-US/docs/CSS/box-sizing

固定位置のヘッダーまたはフッターが必要ない場合は、高さがゼロで境界線のある要素をその場所に配置するだけです。

于 2012-11-12T22:31:45.453 に答える