XPages - 작업 영역 막대 단추의 배경색 변경

Question

단추를 클릭 할 때 작업 영역 막대 단추의 배경색을 변경하고 싶습니다. 어떻게해야합니까? Dojo 또는 JavaScript 사용을 고려했지만 place bar 버튼에 "id"를 얻는 방법을 모르겠습니다.

Answer 1

"Steve Zavocki와 같은 또 다른 솔루션은 녹색입니다." 이 코드는 jQuery를 사용하지 않으므로 응용 프로그램에 jQuery.js를 통합 할 필요가 없습니다. 네이티브 javascript 및 dojo를 사용하여이 작업을 수행 할 수 있으며 이미 XPage에 통합되어 있기 때문에 많은 오버 헤드가 없습니다.

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

dojo와

또는 jQuery를 함께 자신의 코드에 사용 스티브 같은 :

는 javascrip와 요소를 얻을 수있는 다른 방법이 있습니다

<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> 

Answer 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"}); 
}); 

(실제로이 테스트를하지 않은,하지만 당신이 원하는이 가까이 있어야한다)