總結和擴大長文本輸出在JSF

我的問題是類似How to hide/show more text within a certain length (like youtube)或Readmore但JSF。這是網絡上非常常見的隱喻。總結和擴大長文本輸出在JSF

我有一個顯示與用戶輸入的文本部分，這可能是短期或也可能是很長的頁面。如果時間長了，桌子高度是無法控制的，所以在這些情況下，我想顯示一段文字，然後顯示一個「（更多）」鏈接，以顯示剩餘的文字。擴展之後，還會有一個「（少）」鏈接。（注意：我的具體情況只是帶有換行符的文本。）

是否有任何預先存在的JSF組件可以執行此操作？我檢查過PrimeFaces和OmniFaces和ButterFaces，很驚訝我沒有看到任何跳出我的功能。我確信我可以使用引用的StackOverflow問題中的技術之一製作自己的自定義組件，但我寧願不重新發明輪子。

來源

2017-03-15 Pixelstix

下面是一個使用readmore可以作爲一個起點，任何人都希望像這樣迅速的複合成分。這裏有一些與您無關的特性，可能需要改進和自定義（硬編碼style，硬編碼選項到readmore()函數等）。歡迎提出改進建議。

參數

值（字符串，必需）：中顯示的文本。預計是空行的純文本。
cols（integer，default = 40）：將包含div的寬度限制爲的列數。如果小於或等於0，則不要限制寬度。
readmore（布爾值，默認=假）：是否使用Readmore功能。
textonly（boolean，default = false）：默認情況下，組件爲包含div的分配一個「只讀」類。將textonly設置爲true不會將「只讀」類分配給包含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; 
}

來源

2017-03-17 15:30:02 Pixelstix

也許這是一個很好的擴展ButterFaces。我會考慮的。

但是，爲什麼你需要一個JSF組件？只需使用Readmore.js。

來源

2017-03-17 09:54:42

「但是，爲什麼你需要一個JSF組件？「（笑話）因爲：LAZY！（/笑話）確實，Readmore.js可能是一個很好的解決方法。如果我創建自己的組件，我總是可以輕鬆地更改實現。我繼續前進，在複合組件中使用Readmore.js - 請參閱其他答案。 – Pixelstix

總結和擴大長文本輸出在JSF

回答

相關問題