javascript - XPages - 更改位置栏按钮的背景颜色

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 已经集成在 XPages 中，因此您没有太多开销。

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

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

使用dojo或史蒂夫在他的 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>