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“尺寸”

它可以工作，但是在按钮调整到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>

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

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

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

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

1 个答案: