Как изменить размер кнопки в сетках?

В Primefaces ShowCase показан пример использования эффектов. Один из них я использовал для кнопки - изменение размера.Как изменить размер кнопки в сетках?

<p:commandButton type="button" value="Show" style="width:200px" icon="ui-icon-image"> 
     <p:effect type="size" event="mouseover"> 
      <f:param name="to" value="{width:300}" /> 
     </p:effect> 
    </p:commandButton>

Подобный пример на this page «Размер»

Он работает, но после того, как кнопка изменения размера на 300px он пришел Бака к исходному размеру. И я хочу изменить его размер до 300 пикселей и остановить его на этот размер. Возможно? Как?

Надеюсь, вы понимаете, что я пытаюсь сделать. Спасибо.

источник

2015-05-26 1001001

похоже на тот же вопрос обсуждался здесь http://stackoverflow.com/questions/20905179/how-can-we-adjust-pcommandbutton-size-or-width – bmscomp

Это не то же самое. Мне нужно сделать эффект, чтобы изменить ширину кнопки и остаться на этой ширине. На этой странице [ссылка] (http://stackoverflow.com/questions/20905179/how-can-we-adjust-pcommandbutton-size-or-width) не используется эффект – 1001001

@bmscomp: нет, это не так. Ссылка, на которую вы ссылаетесь, не содержит никакого отношения к эффектам – Kukeltje

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

Вот рабочий пример:

<p:commandButton styleClass="expandableBtn" type="button" value="Show" style="width: 200px" icon="ui-icon-image" /> 

<script type="text/javascript"> 
//<![CDATA[ 
jQuery(function() { 
    $('.expandableBtn').on('mouseover', function() { 
      $(this).css('width', '300px'); 
    }); 
}); 
// ]]> 
</script>

Если вы хотите воспользоваться «эффект перехода», а затем заменить $(this).css('width', '300px'); с:

$(this).animate({ 
    width: '300px' 
}, 1000, function() { 
    // Transition complete 
});

Где 1000 является длительность (в мс) перехода.

источник

2015-05-26 12:59:14

Как изменить размер кнопки в сетках?

ответ

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