如何调整 primefaces 中的按钮？

Question

在 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 "Size"

它可以工作，但在按钮调整为 300px 后，它会恢复到原始大小。我想将它的大小调整为 300px 并在这个大小上停止。有可能的？怎么样？

希望你明白我想做什么。谢谢。

Answer 1

如果您不想让按钮重置为 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>

如果您想利用 "transition effect"，请将 $(this).css('width', '300px'); 替换为：

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

其中 1000 是转换的持续时间（以毫秒为单位）。

如何调整 primefaces 中的按钮？

How to resize button in primefaces?

xhtml

primefaces