XPages - onClick и onMouseOver для навигационных элементов

Question

У меня есть XPage, который содержит элемент управления Navigator. Навигатор имеет 3 элемента навигации, каждый из которых является базовым узлом. Событие onClick основного узла выполняет некоторый javascript на стороне клиента. Я бы хотел изменить цвет фона элемента навигации при его нажатии. Я попытался сделать это с помощью javascript и dojo, но просто не могу получить дескриптор базового узла элемента навигации. Какой код я могу использовать, чтобы получить базовый узел элемента навигации, чтобы затем использовать CSS для изменения его внешнего вида? С Dojo я пробовал

dojo.query(".lotusMenuHeader ul :nth-child(1)") 

У меня теперь есть одобрение Майкла Сайза. Что я хотел сделать, так это добавить класс «lotusSelected» в элемент «Навигатор», когда он щелкнул, используя JavaScript на стороне клиента (и удалите этот класс из других элементов). Мой навигатор имеет только три элемента, так вот код, я в настоящее время использую, чтобы получить эту работу:

var comp = this; 
var par = comp.parentNode; // li tag 
par.id = "parID"; 
var par2 = par.parentNode; // ul tag 
par2.id = "ul_node;" 
var eigene = par2.childNodes[1]; 
eigene.id = "eigene"; 
var alle = par2.childNodes[3]; 
alle.id = "alle"; 
var abgeschlossen = par2.childNodes[5]; 
abgeschlossen.id = "abgeschlossen"; 

dojo.removeClass("alle","lotusSelected"); 
dojo.removeClass("abgeschlossen","lotusSelected"); 
dojo.addClass("eigene","lotusSelected")  

Answer 1

Существует хороший трюк я нашел в то время как работа с событием onClick в Навигаторе. Вы можете получить ручку на Item it самостоятельно используя это. а затем установить идентификатор или сделать какую-то прямую модификацию с элементом без запрашивать целые страницы или CSS Классы:

<xe:basicLeafNode label="Link 1"> 
     <xe:this.onClick><![CDATA[var comp = this; 
    this.id = "item1"; // example 
    window.alert(this.id); 
    //call a function form a script lib. like changeColor(this,color); 
    this.style.backgroundColor = "blue";]]></xe:this.onClick> 
    </xe:basicLeafNode> 

Для MouseOver Efect можно использовать парение: CSS, чтобы изменить цвет элемента, например: Я использую это, чтобы получить MouseOver эфект на мой взгляд:

.xspHtmlProdView:hover{background-color:#ffffc8;} 

для элементов навигации я думаю, вы будете нуждаться в menuitem:hover {} или что-то вроде lotusMenuHeader > li {}

Answer 2

Вы хотите искать .lotusTitleBar ul.lotusTabs div a (в R9/OneUIv3 это выглядит как .lotusTitleBar2 .lotusNavTabs div a, а затем использовать dojo.connect для Закрепления событие для них. Dojo подключения будет срабатывать с элементом был подключен. Так что вам не нужно искать через индекс.

Дайте нам знать, как она идет