Question

我有一个包含Navigator控件的XPage。导航器有3个导航项，每个导航项都是一个基本节点。基本节点的onClick事件执行一些客户端javascript。我想在单击时更改导航项的背景颜色。我试过用javascript和dojo做这个，但是无法获得导航项基本节点的句柄。我可以使用什么代码来获取导航项基本节点，以便我可以使用CSS来改变它的外观？有了Dojo，我试过了

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

感谢Michael Saiz，我现在有了一个解决方案。我想要做的是在使用客户端JavaScript（并从其他项中删除此类）时将“lotusSelected”类添加到Navigator项。我的导航器只有三个项目，所以这里是我现在用来实现这个工作的代码：

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

您想要查找.lotusTitleBar ul.lotusTabs div a（在R9 / OneUIv3中看起来像.lotusTitleBar2 .lotusNavTabs div a，然后使用dojo.connect将事件附加到它们.Dojo connect将触发它所在的元素连接到。所以你不需要查看索引。

让我们知道它是怎么回事

Answer 2

我在导航器中使用onClick事件时发现了一个很好的技巧。您可以使用此方法获取Item本身的句柄。然后设置一个id或对该项进行一些直接修改，而不查询整个页面或css Classes：

  <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，您可以使用hover：css来更改项目的颜色，例如：我在我的视图中使用它来获取MouseOver efekt：

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

对于导航项目，我认为您需要menuitem:hover {}或类似lotusMenuHeader > li {}

的内容

XPages - 用于导航项的onClick和onMouseOver

2 个答案: