为什么我的道场标题覆盖我的roundRectList



我生成了一个带有标题和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(您可以找到源代码发行版)进行比较。

最新更新