Mam powtarzaną kontrolę, która zawiera proste pole wyboru i pole obliczone (tak naprawdę nie ma znaczenia), tak jak:
[ ] text1
[x] text2
[ ] text3
[x] text4
[x] text5
Chcę pokazać dodatkową klikalną ikonę obok bieżącego elementu / wiersza po najechaniu wskaźnika myszy nad nim
[ ] text1
(*) [x] text2
[ ] text3
[x] text4
[x] text5
Czy to jest możliwe? Dzięki
Str.s. Muszę pokazać tę ikonę, niezależnie od tego, gdzie kursor myszy (pole wyboru lub pole tekstowe). Chcę to pokazać na bieżący wiersz (gdy kursor myszy gdzieś w obecnym rzędzie)
2 odpowiedzi
Jest to możliwe dzięki łatwej sztuczce CSS. Jako przykład, wykonaj następującą kontrolę powtarzania:
<xp:table>
<xp:tr>
<xp:td></xp:td>
<xp:td>
<xp:label
value="Some Header"
id="label1">
</xp:label>
</xp:td>
</xp:tr>
<xp:repeat
id="repeat1"
rows="30"
var="textValue"
indexVar="index">
<xp:this.value><![CDATA[#{javascript:["text1", "text2", "text3", "text4", "text5"] }]]></xp:this.value>
<xp:tr
styleClass="magicRow">
<xp:td>
<xp:button
value="x"
id="button1"
styleClass="magicButton">
</xp:button>
</xp:td>
<xp:td>
<xp:checkBox
text=""
id="checkBox1">
</xp:checkBox>
<xp:text
escape="true"
id="computedField1"
value="#{textValue}">
</xp:text>
</xp:td>
</xp:tr>
</xp:repeat>
</xp:table>
Użyliśmy regulacji powtarzania w tabeli, więc powtarza elementy wiersza 5 razy. Teraz użyjemy następujących CSS, aby ukryć przycisk Magic i pokazać tylko wtedy, gdy wskaźnik myszy jest nad rzędem:
tr.magicRow .magicButton { visibility:hidden; }
tr.magicRow:hover .magicButton { visibility:visible; }
:hover jest przydatnym CSS Wybór.
Jestem pewien, że jest to możliwe. Nie mam przykładu kodu Handy, ponieważ nie jestem świetny z JavaScript Klienta JavaScript, ale muszę myśleć, że możesz, z Dojo lub JQuery, dołączyć zdarzenie na Hover, a może nawet "OnMouseout" i w tym wydarzeniu Możesz użyć Dojo / jQuery, aby dodać / usunąć CSS do przycisku.