JQueryMobile wrap data-role =「content」div

Question

我想在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的左上角示例（位於標題正下方）。而滾動此的邊界應該保持固定：

Answer 1

您可以將邊框添加到在內容滾動後保持其位置的元素中。

舉一個例子僞頁面這樣的：

<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

如果你不希望一個固定的位置，頁眉或頁腳，你可以將一個元素在他們的地方具有零高度和邊框。

Answer 2

你需要讓內部＃內容滾動

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