Question

我的问题类似于How to hide/show more text within a certain length (like youtube)或Readmore，但对于JSF。这是网络上一个非常常见的比喻。

我有一个页面显示包含用户输入文本的部分，该部分可能很短，也可能很长。如果它很长，桌面高度是无法管理的，所以在这些情况下，我希望显示一部分文字，然后是＆＃34;（更多）＆＃34;链接将显示剩余的文本。扩张后，会有一个＆＃34;（更少）＆＃34;链接也是如此。（注意：我的特殊情况只包含带有换行符的文本。）

是否有任何预先存在的JSF组件可以执行此操作？我已经检查过PrimeFaces和OmniFaces以及ButterFaces，我很惊讶我没有看到任何跳出来的东西具有此功能。我确信我可以使用引用的StackOverflow问题中的一种技术制作我自己的自定义组件，但我不想重新发明轮子。

Answer 1

也许这是ButterFaces的一个很好的扩展。我会考虑一下。

但为什么需要JSF组件？只需使用Readmore.js。

Answer 2

这是一个使用readmore的快速复合组件，可以作为其他任何想要这样的东西的起点。其中有一些不相关的功能，有些被黑客攻击（硬编码style，readmore()功能的硬编码选项等），您可能希望改进和自定义。欢迎提出改进建议。

<强>参数

value （字符串，必填）：要显示的文本。预计是空行的纯文本。
cols （整数，默认= 40）：用于限制包含div的宽度的列数。如果小于或等于0，则不要限制宽度。
readmore （布尔值，默认= false）：是否使用Readmore功能。
textonly （布尔值，默认= false）：默认情况下，组件会分配一个＆＃34; readonly＆＃34;类包含div。将textonly设置为true不会分配＆＃34; readonly＆＃34;类包含div。

位置：在/ resources / {samplelibrary} /readOnlyTextArea.xhtml

下

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:composite="http://java.sun.com/jsf/composite"
>
    <composite:interface>
        <composite:attribute name="cols" default="40" type="java.lang.Integer"/>
        <composite:attribute name="value" required="true"/>
        <composite:attribute name="readmore" default="false" type="java.lang.Boolean"/>
        <composite:attribute name="textonly" default="false" type="java.lang.Boolean"/>
    </composite:interface>

    <composite:implementation>
        <h:outputScript library="samplelibrary" name="readmore.min.js" target="head"/>

        <div id="#{cc.clientId}_div" class="#{cc.attrs.textonly?'':'readonly'}"
                style="white-space: pre-wrap; #{cc.attrs.readmore ? '' : 'min-height: 1.3em;'} #{(cols gt 0) ? ('width: ' + (cc.attrs.cols / 2.09) + 'em; padding: 2px 2px 2px 2px;') : ''}">
            <h:outputText value="#{cc.attrs.value}"
        /></div>
        <ui:fragment rendered="#{cc.attrs.readmore}">
            <script type="text/javascript">
                $(window).ready(function() {
                    var comps = $(document.getElementById('#{cc.clientId}_div'));
                    comps.readmore({speed:300,collapsedHeight:54});
                });
            </script>
        </ui:fragment>

    </composite:implementation>
</html>

这里是readonly CSS类的一些CSS：

.readonly
{
    border: 1px solid #999;
    background-color: #eee;
    color: #333;
}

在JSF中总结并扩展长文本输出

2 个答案: