Xpages无法获取dojo工具提示对话框弹出

时间:2014-05-16 17:28:40

标签: dojo xpages

我有一个dojoFilteringSelect字段,我想为其添加一个dojo tootltip。如果用户将鼠标悬停在该字段上(或者我可以在该字段旁边放置一个图标),我希望显示计算字段的内容。

环顾四周,看到了各种各样的例子,但我找不到的是如何将工具提示连接到悬停动作?我在Lotus客户端运行它。

我的代码如下。

                <xe:djFilteringSelect id="djFilteringSelect3"
                        rendered="true" value="#{document1.loc}" tabIndex="1">
                        <xe:this.defaultValue><![CDATA[""]]></xe:this.defaultValue>


        <xp:selectItems>
                <xp:this.value><![CDATA[#{javascript:getComponent("lookupLocs").getValue();}]]></xp:this.value>
            </xp:selectItems>

        <xp:eventHandler event="onClick" submit="false">
            <xe:this.script><![CDATA[XSP.openTooltipDialog("#{id:tooltipDialog1}", "#{id:label1}")]]></xe:this.script>
        </xp:eventHandler></xe:djFilteringSelect>
                    &#160;&#160;
                    <xe:valuePicker dialogTitle="Locs with Loc Manager"
                        for="djFilteringSelect1">

                        <xe:this.dataProvider>
                            <xe:simpleValuePicker>

                                <xe:this.valueList><![CDATA[#{javascript:getComponent("lookupLocs2").getValue();}]]></xe:this.valueList>
                            </xe:simpleValuePicker>
                        </xe:this.dataProvider>
                    </xe:valuePicker>
                    <xe:tooltipDialog id="tooltipDialog1"></xe:tooltipDialog></xp:td>

                <xp:scriptBlock id="scriptBlock1">
                    <xp:this.value><![CDATA[XSP.addOnLoad(function(){
          XSP.getElementById("#{id:djFilteringSelect1}").focus();
        });]]></xp:this.value>
                </xp:scriptBlock>


                <xp:td style="width:229.0px">
                    <xp:message id="message1" for="loc"></xp:message>
                </xp:td>
            </xp:tr>
            <xp:tr>
                <xp:td>
                    <xp:label id="label3" value="Work Category" style="font-weight:bold"></xp:label>
                </xp:td>
                <xp:td>




                    <xe:djFilteringSelect id="djFilteringSelect2"
                        rendered="true" value="#{document1.workCategory}" tabIndex="2">
                        <xe:this.defaultValue><![CDATA[""]]></xe:this.defaultValue>


                        <xp:selectItems>
                            <xp:this.value><![CDATA[#{javascript:var db = new Array(@DbName()[0], 'TSCTT.nsf'); 
    @DbColumn(db, "workCategoryView", 1)
    }]]></xp:this.value>
                        </xp:selectItems>



                    </xe:djFilteringSelect>

2 个答案:

答案 0 :(得分:2)

您非常接近您正在寻找的解决方案。

在dojoFilteringSelect字段本身上设置悬停工具提示功能并不是很有用,因为那时无法选择值。相反,就像您已经建议的那样,让工具提示在图标或字段标签上工作。

这是悬停在标签上时出现的工具提示对话框的示例:

<xp:label value="Label" id="label1">
    <xp:eventHandler event="onmouseover" submit="false">
        <xp:this.script><![CDATA[
            XSP.openTooltipDialog("#{id:tooltipDialog1}", "#{id:label1}")
        ]]></xp:this.script>
    </xp:eventHandler>
    <xp:eventHandler event="onmouseout" submit="false">
        <xp:this.script><![CDATA[
            XSP.closeTooltipDialog("#{id:tooltipDialog1}")
        ]]></xp:this.script>
    </xp:eventHandler>
</xp:label>
<xe:djFilteringSelect id="djFilteringSelect1" rendered="true" 
    value="#{document1.loc}">
    <xp:selectItems>
        <xp:this.value><![CDATA[#{javascript:
            ["abc","def","xyz"]
        }]]></xp:this.value>
    </xp:selectItems>
</xe:djFilteringSelect>
<xe:tooltipDialog id="tooltipDialog1" title="This is the dialog title">
    <xp:text escape="true" id="computedField1">
        <xp:this.value><![CDATA[#{javascript:
            "This is the computed value"
        }]]></xp:this.value>
    </xp:text>
</xe:tooltipDialog>

标签事件&#34; onmouseover&#34; (不是&#34; onMouseOver&#34;!)打开工具提示对话框。仅当您使用参数for="djFilteringSelect1"时,此活动才有效(我不知道原因)。

我添加了一个活动&#34; onmouseout&#34;当鼠标不再悬停在标签上时关闭工具提示对话框。

而不是事件&#34; onmouseout&#34;,您可以将相同的CSJS代码添加到工具提示对话框内的关闭按钮。如果您在工具提示对话框中有要点击链接或可编辑字段的内容,则此功能非常有用。

答案 1 :(得分:1)

如果你使用工具提示而不是tooltipdialog,而不仅仅使用for属性,它将自动发生,不需要代码。非常简单。

在您上面的代码中,您正在使用onclick事件,该事件无法在onMouseOver上运行(这将是您需要的事件?)

霍华德