JSF 2.0 Javascript и таблица CSS - PullRequest
Новая
       3

JSF 2.0 Javascript и таблица CSS

1 голос
/ 20 февраля 2011

Я новичок в JSF 2.0 и у меня проблемы с событиями js / css.В основном у меня есть этот HTML-код: 

<!-- CSS goes in the document HEAD or added to your external stylesheet -->
<style type="text/css">
table.hovertable {
    font-family: verdana,arial,sans-serif;
    font-size:11px;
    color:#333333;
    border-width: 1px;
    border-color: #999999;
border-collapse: collapse;
}
table.hovertable th {
    background-color:#c3dde0;
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #a9c6c9;
}
table.hovertable tr {
    background-color:#d4e3e5;
}
table.hovertable td {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #a9c6c9;
}
</style>

<!-- Table goes in the document BODY -->

<table class="hovertable">
<tr>
    <th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
    <td id="here">Item 1A</td><td>Item 1B</td><td>Item 1C</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
    <td>Item 2A</td><td>Item 2B</td><td>Item 2C</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
    <td>Item 3A</td><td>Item 3B</td><td>Item 3C</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
    <td>Item 4A</td><td>Item 4B</td><td>Item 4C</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
    <td>Item 5A</td><td>Item 5B</td><td>Item 5C</td>
</tr>
</table>

Он представляет простую таблицу, которая меняет свой цвет при наведении мыши.Я хочу "преобразовать" его в код JSF 2.0 следующим образом: 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"   
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:head>
        <h:outputStylesheet library="css" name="table-style.css"  />

    </h:head>

    <h:body>

        <h1>JSF 2.0 + Spring + Hibernate :)</h1>

        <h:dataTable value="#{cBean.getcBeanList()}" var="c"
                 styleClass="hovertable"
                 >
            <h:column>
                <f:facet name="header" id="h1">Info Header 1</f:facet>#{c.cBeanId}
            </h:column>

            <h:column>
                <f:facet name="header">Info Header 2</f:facet>#{c.name}
            </h:column>

            <h:column>
                <f:facet name="header">Info Header 3</f:facet>#{c.address}
            </h:column>

        </h:dataTable>

    </h:body>
</html>

, но включая событие onmouseover.

Кроме того, cBean.getcBeanList() возвращает List<Object>

Ну, я думаю, это все, я надеюсь, что вы можете мне помочь.
Заранее спасибо.

Ответы [ 2 ]

3 голосов
/ 21 февраля 2011

Если вам не интересно о пользователях IE6, просто используйте :hover псевдоселектор.Добавьте следующее в свой CSS. 

table.hovertable tbody tr:hover {
    background: #ffff66;
}

Если вы заботитесь о них по каким-то неочевидным причинам, используйте JavaScript. 

var trs = document.getElementById('dataTable').getElementsByTagName('tbody')[0].getElementsByTagName('tr');
for (var i = 0; i < trs.length; i++) {
    trs[i].onmouseover = new Function("this.bgColor = '#ffff66'");
    trs[i].onmouseout = new Function("this.bgColor = '#d4e3e5'");
}

Вызывайте его во время загрузки окна или в концетело.Обратите внимание, что идентификатор элемента dataTable в Javascript должен быть точно таким же, как и сгенерированный HTML <table> идентификатор <h:dataTable>. 

<h:dataTable id="dataTable">

Это более возможно с jQuery.hover()* Функция 1018 *, для случая, когда вы используете jQuery. 

$('.hovertable tbody tr').hover(
    function() { this.bgColor = '#ffff66'; },
    function() { this.bgColor = '#d4e3e5'; }
);
0 голосов
/ 20 февраля 2011

Самый простой способ получить функциональность - это использовать RichFaces. Таблица данных в RichFaces предоставляет вам onRowMouseOver и другие параметры. Вы можете использовать его как: 

<rich:dataTable onRowMouseOver="this.style.backgroundColor='#F1F1F1'" onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'">

В противном случае вам придется приготовить немного JavaScript. Загляните в эту ветку форума: http://www.coderanch.com/t/212203/JSF/java/highlight-row-datatable-when-mouse (см. Ответ Munish K Singh - 4-й ответ)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...