将 SSJS 操作添加到 bootstrap 药丸

Question

我添加了一个简单的药丸列表作为导航器：

<div class="container-fluid">
        <ul class="nav nav-pills">
            <li role="presentation" class="active">
                <a href="#">Profiles</a>
            </li>
            <li role="presentation">
                <a href="#">Applications</a>
            </li>
            <li role="presentation">
                <a href="#">Automation</a>
            </li>
        </ul>
    </div><!-- COntainer -->

如果我只想添加一个 href link，它工作正常，但我需要运行在单击药丸时添加一些 SSJS。刚刚开始 BootStrap 山，所以这可能是不可行的。我已经搜索过但无法找到如何做到这一点。任何帮助表示赞赏。

谢谢

Answer 1

使用 <xp:link> 代替 HTML <a>。它允许您使用 SSJS 代码添加点击事件：

<div class="container-fluid">
    <ul class="nav nav-pills">
        <li role="presentation" class="active">
            <xp:link
                escape="true"
                text="Profiles"
                id="link1">
                <xp:eventHandler
                    event="onclick"
                    submit="true"
                    refreshMode="complete">
                    <xp:this.action><![CDATA[#{javascript:print("your SSJS code")}]]></xp:this.action>
                </xp:eventHandler>
            </xp:link>
        </li>
        <li role="presentation">
            <xp:link
            ...

<xp:link> 最终呈现为 <a> 标签，就像

<a id="view:_id1:link1" href="#" class="xspLink">Profiles</a>

您在评论中询问了如何将 data-toggle="tab" 添加到呈现的 <a ...>。您可以在 <xp:link>:

中使用 <xp:this.attrs> 来完成此操作

        ...
            <xp:link
                escape="true"
                text="Profiles"
                id="link1">
                <xp:this.attrs>
                    <xp:attr
                        name="data-toggle"
                        value="tab">
                    </xp:attr>
                </xp:this.attrs>
                <xp:eventHandler
                    event="onclick"
        ...

渲染后的 link 看起来像这样

<a id="view:_id1:link1" href="#" class="xspLink" data-toggle="tab">Profiles</a>

将 SSJS 操作添加到 bootstrap 药丸

add SSJS action to a bootstrap pill

xpages

xpages-ssjs

twitter-bootstrap-3