如何调整primefaces中的按钮大小？答案

【问题标题】：How to resize button in primefaces?如何调整primefaces中的按钮大小？
【发布时间】：2015-05-26 12:25:52
【问题描述】：

在 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”

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

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

【问题讨论】：

似乎在这里讨论了同样的问题stackoverflow.com/questions/20905179/…
不一样。我需要做一个效果来调整按钮宽度并保持在这个宽度上。本页link未使用效果
@bmscomp：不，不是。您引用的链接不包含与效果的任何关系
尝试使用鼠标移出时触发的效果...甚至可能是 <p:effect type="size" event="mouseout"> <f:param name="to" value="{width:300}" /> </p:effect> 正常工作
我知道您需要一个运行一次的影响吗？

标签： primefaces xhtml

【解决方案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>

如果您想利用“过渡效果”，请将$(this).css('width', '300px'); 替换为：

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

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

【讨论】：