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