Question

（使用dojo 1.10.1）

我正在使用dojo的dijit/layout/StackContainer and dijit/layout/StackController工作正常，这里是simplified example。我的问题是，我无法找到一种“干净”的方法来将鼠标悬停标题添加到StackController创建的每个控制器按钮？

HTML

<div>
        <div data-dojo-type="dijit/layout/StackContainer"
             data-dojo-props="id: 'contentStack'">
            <div data-dojo-type="dijit/layout/ContentPane" title="one">
                <h4>Group 1 Content</h4>
            </div>
            <div data-dojo-type="dijit/layout/ContentPane" title="two">
                <h4>Group 2 Content</h4>
            </div>
            <div data-dojo-type="dijit/layout/ContentPane" title="three">
                <h4>Group 3 Content</h4>
            </div>
        </div>
        <div data-dojo-type="dijit/layout/StackController" data-dojo-props="containerId:'contentStack'"></div>
    </div>

因此，对于StackContainer中包含的每个子节点中的每个标题，StackController都会使用相同的标签来调整按钮，但该按钮没有鼠标悬停文本，我也需要添加它。

我对任何涉及我循环遍历节点并找到每个按钮的解决方案不感兴趣，它只是不好看。

Answer 1

最好的解决方案之一是通过相应的ContentPanes发送按钮的属性，方法和事件。例如：

<div data-dojo-type="dijit/layout/ContentPane" title="one" data-dojo-props=
"controllerProps: {onMouseOver: function(){"doSomething"}}">
    <h4>Group 1 Content</h4>
</div>

但据我所知，这是不可能的，因为StackController传递给它的按钮＆＃34; title＆＃34;以及ContentPane的一些其他不重要的属性。因此，如果您真的对上述解决方案感兴趣，则必须覆盖StackController的默认行为。哪种可能，但需要更多时间！：）

所以我建议你使用其他有效且速度更快的解决方案。你给StackController-div一个id：

<div id="myController" data-dojo-type="dijit/layout/StackController" data-dojo-
props="containerId:'contentStack'"></div>

你使用＆＃34; dijit / registry＆＃34;称之为id：

var controllerWidget = registry.byId("myController");

你现在有了StackController小部件。调用它的 getChildren（）方法，你就有了一个Button小部件数组。其余的我觉得很直白。

这是JSFiddle example。

干杯！

<强>更新

嘿，我找到了另一种满足您要求的解决方案：＆＃34;没有按钮搜索＆＃34;

这些是StackController传递给buttonWidget的属性：

var Cls = lang.isString(this.buttonWidget) ? lang.getObject(this.buttonWidget) : this.buttonWidget;
var button = new Cls({
    id: this.id + "_" + page.id,
    name: this.id + "_" + page.id, // note: must match id used in pane2button()
    label: page.title,
    disabled: page.disabled,
    ownerDocument: this.ownerDocument,
    dir: page.dir,
    lang: page.lang,
    textDir: page.textDir || this.textDir,
    showLabel: page.showTitle,
    iconClass: page.iconClass,
    closeButton: page.closable,
    title: page.tooltip,
    page: page
});

因此，如果您提供标签＆＃34;工具提示＆＃34;对于您的ContentPane，它将在buttonWidget中显示为＆＃34; title＆＃34;。

<div data-dojo-type="dijit/layout/ContentPane" title="one" tooltip="First Page">

这是另一个JSFiddle example。

Dojo StackController：如何为每个按钮设置标题？

1 个答案: