我生成了一个带有标题和roundrectList的可滚动视图。一切都很好,但标题不是固定的,所以我用addFixedBar代替标题的addchild。现在标题是固定的,但它覆盖了RoundRectList。列表的上端在标题后面,我看不清。如何让列表变小?
if (parentNodeId !== previousParentNodeId){
var newDiv = new dojox.mobile.ScrollableView({
id: divNodesId,
dojoType: "dojox.mobile.ScrollableView",
scrollDir: "v",
style: "background-color: #d0d0d0"
});
newDiv.placeAt('mobileView','first');
//look if there is a previous parent, only if there is one generate back button; needed for root div
if (previousParentNodeId == null){
var newHeading = new dojox.mobile.Heading({
id: h1NodesId,
dojoType: "dojox.mobile.Heading",
fixed: "top",
label: "Knotenübersicht"
});
}
else {//create heading with back button
var newHeading = new dojox.mobile.Heading({
id: h1NodesId,
dojoType: "dojox.mobile.Heading",
back: "zurück",
moveTo: previousParentNode,
fixed: "top",
label: divNodeLabel
});
}
//newHeading.placeAt(divNodesId,'first');
newDiv.addFixedBar(newHeading);
newHeading.startup();
ulNodesId = "ulNodes"+parentNodeId;
var newUl = new dojox.mobile.RoundRectList({
id: ulNodesId,
dojoType: "dojox.mobile.RoundRectList"
});
newUl.placeAt(divNodesId,'last');
}
尝试直接为RoundRectList标签添加css style属性
例如:<div id="divNodesId" style="z-index: 1;position: relative;top: 15px;"></div>
你也可以尝试添加相同的样式到:
var newUl = new dojox.mobile.RoundRectList({
id: ulNodesId,
dojoType: "dojox.mobile.RoundRectList",
style: "z-index: 1;position: relative;top: 15px;"
});
使用css position来移动它,或者使用z-index来查看它。
也许尝试添加宽度和高度css得到你想要的??:
var newDiv = new dojox.mobile.ScrollableView({
id: divNodesId,
dojoType: "dojox.mobile.ScrollableView",
scrollDir: "v",
style: "width: 800px,height: 90px;background-color: #d0d0d0"
});
你也可以设置css左边,右边,底部。使用+或- px数字来找到您想要的位置。不知道如何使列表更小,你可能不需要用上面的css的东西。如果没有一个完整的例子,很难说…
您的代码中有许多东西需要更改,包括:
- 添加一个调用scrolllableview(放置)的startup()方法将视图添加到DOM之后)。
- 为添加RoundRectList到scrolllableview,使用例如newUl.placeAt(newDiv.containerNode);(我使用你的变量持有RoundRectList和scrolllableview的实例的名称。请注意,列表被添加到ScrollableView的containerNode)。
- 删除dojoType构造函数参数(这不是用于编程instanciation)。
最简单的方法是将您的代码与dojox/mobile/tests/test_dynamic-ScrollableView-vh-vf.html(您可以找到源代码发行版)进行比较。