OnMouseOver для отображения изображения внутри каждой строки p: dataTable

У меня есть p: dataTable, и я хочу создать и повлиять на то, что, когда я наводил указатель мыши на строку, появляется изображение delete, позволяющее мне удалить эту строку. Я использую PrimeFaces.escapeClientId для преобразования jsf Id в id что jQuery понять. Вот что я получил до сих порOnMouseOver для отображения изображения внутри каждой строки p: dataTable

<p:dataTable value=#{...} var="item"> 
    <p:column> 
     <div onmouseover="jQuery(PrimeFaces.escapeClientId('deleteButton')).fadeIn()"> 
      <!-- Content of the row --> 
      <p:commandButton id="deleteButton" image="delete" style="border: 0; display: none;" 
           actionListener="#{bean.deleteRow(item)}" /> 
     </div> 
    </p:column> 
<p:dataTable>

К сожалению, это не работает. Firebug не возвращает ошибку. пожалуйста, помогите

источник

2010-12-30 Thang Pham

Не знаю JSF или PrimeFace. И, глядя на ваш код, он останется таким. Я могу быть невежественным прямо сейчас. Но что же на самом деле произвел этот код ??? : P (Извините, что это очень не полезно :): – PeeHaa

Непосредственная проблема заключается в том, что вы не ставили кавычки вокруг «deleteButton» - поэтому javascript думал, что это имя переменной, а не строковый литерал.

Вы можете легко пропустить весь ИНО и просто показать, например, «все дивы внутри текущего элемента», пропусканием это в JQuery контексте:

<p:column> 
<div onmouseover="jQuery('div', this).fadeIn()"> 
    to jest div 
    <div style="color: wheat; background-color: green; display: none"> 
     <p:commandButton id="deleteButton" image="delete" style="border: 0" actionListener="#{bean.deleteRow(item)}" /> 
    </div> 
</div> 
</p:column>

OnMouseOver должен также работа над p: column.

источник

2010-12-30 21:08:24 fdreger

Спасибо. У меня первоначально была цитата вокруг 'deleteButton'. Когда я набираю их, это просто не учитывается. С одинарной кавычкой или без нее она все еще не работает. Но ваш идентификатор вывода бизнес-идеи звучит как хорошая идея. Я попробую –

Если я добавлю 'onmouseout = 'jQuery (' div ', this) .fadeOut();" 'в самый большой' div', когда я наводил, изображение включается и выключается (2 раза). Любая идея почему? Еще один вопрос: внутренний-div, я хочу, чтобы его 'style' был' display: inline', поэтому он не создавал разрыв строки, но у меня уже есть 'display: none', они, похоже, не похожи друг на друга, это есть способ сделать стиль отображения для обоих: 'inline' и' none' –

Исходный код не будет работать даже с кавычками, потому что идентификаторы клиентов кнопки не являются «deleteButton», но что-то вроде «idofform: idoftable: deletebutton: rowintable "(a: b: deletebutton: 45). Вы можете обойти это, используя «компонентную» неявную переменную, но это, как правило, беспорядочно. – fdreger

Использование onmouseenter и onmouseleave вместо onmouseover и onmouseout, чтобы избежать мигать, что вызвано событие барботирования

например

<div onmouseenter="jQuery('span', this).fadeIn()" 
    onmouseleave="jQuery('span', this).fadeOut()"> 
    ... 
</div>

источник

2016-02-25 05:29:37

OnMouseOver для отображения изображения внутри каждой строки p: dataTable

ответ

Смежные вопросы