如何向dojo标题窗格添加按钮

x759pob2  于 2022-12-20  发布在  Dojo
关注(0)|答案(2)|浏览(264)

有没有办法在TitlePane标题(标题栏右侧)中添加按钮,这样我就可以进行一些操作(下载、删除......)
先谢了。

7xzttuei

7xzttuei1#

dijit TitlePane标头包含以下内容

<div class="dijitTitlePaneTitleFocus" data-dojo-attach-point="focusNode" aria-pressed="true" role="button" aria-controls="dijit_TitlePane_0_pane" tabindex="0">
<span data-dojo-attach-point="arrowNode" class="dijitInline dijitArrowNode" role="presentation"></span><span data-dojo-attach-point="arrowNodeInner" class="dijitArrowNodeInner">-</span><span data-dojo-attach-point="titleNode" class="dijitTitlePaneTextNode" style="user-select: none;">Rule</span>
<span class="dijit dijitReset dijitInline dijitButton" role="presentation" widgetid="dijit_form_Button_1">
<span class="dijitReset dijitInline dijitButtonNode" data-dojo-attach-event="ondijitclick:__onClick" role="presentation">
<span class="dijitReset dijitStretch dijitButtonContents" data-dojo-attach-point="titleNode,focusNode" role="button" aria-labelledby="dijit_form_Button_1_label" tabindex="0" id="dijit_form_Button_1" style="user-select: none;">
<span class="dijitReset dijitInline dijitIcon dijitNoIcon" data-dojo-attach-point="iconNode"></span><span class="dijitReset dijitToggleButtonIconChar"></span>
<span class="dijitReset dijitInline dijitButtonText" id="dijit_form_Button_1_label" data-dojo-attach-point="containerNode">x</span></span></span></span>
</div>

如您所见,我们可以参考多个连接点。
要添加任何项目,甚至是dijit或自定义小部件,请执行以下操作,将项目放置在focusNode附加点中最后一个项目之后(注意:你必须正确地设置它的样式,才能让项目出现在你想要的位置)

var myTitlePane = new TitlePane({ title: "TitlePane" });            

        var deleteButton = new Button({
            label: 'x',
            onClick: function () {
                //do something here like delete the titlepane
                //alert();
            }
        });
        deleteButton.placeAt(rulesTitlePane.focusNode);

这会产生像这样的东西

或者,您可以替换所有内容,然后在focusNode中创建您想要的内容。

wpx232ag

wpx232ag2#

我可以在添加的dijit的创建过程中使用.placeAt()方法来实现,如下所示:
在index.htm中

<div id="divMap"></div>

在回调内的main.js中

ready (function() {
    var ttpMyTitlePane = new TitlePane({
        title: 'My Title'
    });
    divMenu.appendChild(ttpMyTitlePane.domNode);

    var btnMyButton = new Button({
        label: 'ButtonText',
        onClick: function() {
            // do stuff
        } 
    }).placeAt(ttpMyTitlePane.domNode);
}

相关问题