Question

我想在点击按钮时更改地方栏按钮的背景颜色。我怎样才能做到这一点？我考虑过使用Dojo或JavaScript，但我不知道如何获得地方栏按钮的“id”。

Answer 1

托尼，

您可以编写简单的jQuery来更改颜色。而不是使用id，添加一个类并让jQuery操纵它。 Marky Roden最近写了一篇很棒的文章。

http://xomino.com/2013/08/26/decoupling-your-css-from-your-javascript-a-well-no-duh-moment/

要向按钮添加类，请转到“所有属性”下，然后找到“attrs”，按下加号，它将创建一个属性。给它一个“类”的名称，以及你想要它的任何值。类不是唯一的，因此您可以使用相同的类使所有按钮具有相同的行为。

如果你给它一个“js-foo”类，那么你的代码看起来像是：

    $(".js-foo").click(function() {
  $( this ).css( {"background-color" : "red"});
});

（我实际上没有测试过这个，但这应该接近你想要的）

Answer 2

“Steve Zavocki的另一个解决方案是绿色。” 此代码不使用jQuery，因此您不必在应用程序中集成jQuery.js，您可以使用本机javascript和dojo，它已经集成在XPage中，因此您没有太多开销。

还有其他方法可以使用javascrip获取元素：

document.getElementById
dcoument.getElementsBy ClassName, Name, TagName, TagNameNs

使用dojo或者像Steve在他的代码中使用jQuery：

<xp:button value="ChangeColor" id="button1">
        <xp:eventHandler event="onclick" submit="false">
            <xp:this.script><![CDATA[var placebar = document.getElementsByClassName("lotusPlaceBar")[0]; //place bar should be unique
placebar.style.backgroundColor = "green";
placebar.style.backgroundImage = "none";
//.. more styling;]]></xp:this.script>
        </xp:eventHandler>
</xp:button>

XPages - 更改地方栏按钮的背景颜色

2 个答案: