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

Question

I would like to change the background color of a place bar button when the button is clicked. How can I do this? I have considered using Dojo or JavaScript but I don't see how I can get an "id" for the place bar button.

Answer 1

Tony,

You can write simple jQuery to change the color. Instead of using the id, add a class and have jQuery manipulate that. Marky Roden recently wrote a great article about this.

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

To add a class to a button, go under All Properties, then find attrs, push the plus and it will create an attribute. Give it a name of "class", and a value of whatever you want to call it. Classes are not unique, so you can have all your buttons have the same behavior by using the same class.

If you gave it a class of "js-foo", then your code would look like:

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

(I haven't actually tested this, but this should be close to what you want)

Answer 2

"Another solution like Steve Zavocki in green." This Code is not Using jQuery so you dont have to integrate jQuery.js in your application you can do this using native javascript and dojo wich is already integrated in XPages so you dont have much overhead.

There are other ways to get an element with javascrip:

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

with dojo or like Steve used in his code with 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>