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

【问题标题】：XPages - change background color of place bar buttonXPages - 更改位置栏按钮的背景颜色
【发布时间】：2013-09-04 15:09:05
【问题描述】：

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

【问题讨论】：

我认为这更像是一个 OneUI 问题。添加了 oneui 标签。

标签： javascript dojo xpages lotus-notes

【解决方案1】：

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

还有其他方法可以使用 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>

【讨论】：

谢谢，我真正需要的是行 var placebar = document.getElementsByClassName("lotusPlaceBar")[0]。一旦我掌握了位置栏按钮的句柄，我就使用 dojo.addClass 添加了一个我自己创建的新样式类。

【解决方案2】：

托尼，

您可以编写简单的 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"});
});

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

【讨论】：

谢谢，我更喜欢使用 Dojo，因为它已经内置在 XPages 中