dojo - 如何将按钮添加到 dojo titlepane

Question

有什么方法可以将按钮 添加到TitlePane 标题(标题栏右侧)，以便我可以执行一些操作(下载、删除...)

提前致谢。

Answer 1

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 中创建您想要的任何内容。