Question

显示长文本内容时，显示带有继续阅读按钮的子字符串以显示完整文本。

Answer 1

这里是插件：

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>com.mytest.mobile</groupId>
    <artifactId>mytest-jax-ws</artifactId>
    <version>20190707-1950</version>
    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.cxf</groupId>
                <artifactId>cxf-codegen-plugin</artifactId>
                <version>3.1.17</version>
                <executions>
                    <execution>
                        <id>generate-sources</id>
                        <phase>generate-sources</phase>
                        <configuration>
                            <wsdlRoot>src/main/resources/wsdl</wsdlRoot>
                            <includes>
                                <include>*.wsdl</include>
                            </includes>
                        </configuration>
                        <goals>
                            <goal>wsdl2java</goal>
                        </goals>
                    </execution>
                </executions>
            </plugin>
            <plugin>
                <artifactId>maven-clean-plugin</artifactId>
                <version>2.4.1</version>
                <executions>
                    <execution>
                        <id>auto-clean</id>
                        <phase>initialize</phase>
                        <goals>
                            <goal>clean</goal>
                        </goals>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>
    <dependencies>
        <dependency>
            <groupId>org.apache.cxf</groupId>
            <artifactId>cxf-codegen-plugin</artifactId>
            <version>3.2.7</version>
        </dependency>
    </dependencies>
    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <maven.compiler.source>1.7</maven.compiler.source>
        <maven.compiler.target>1.7</maven.compiler.target>
    </properties>
</project>

};

以下是应用插件的元素：

$.fn.continueReadingText = function(options) { 
var settings = $.extend({
    // These are the defaults.
    charsNum: 100,
    toggleText: "Continue Reading",
}, options );

$(document).on("click",".continue-reading",function(){
    $(this).hide();
    $(this).next('span').show();
});

return $(this).each(function(k,elm){            
    var _str = $(elm).html();
    var _l = $(elm).html().length;
    if(_l > settings.charsNum){
        var last_cut_word = _str.substring(0,settings.charsNum).split(" ").pop();
        if(last_cut_word.length == settings.charsNum){
            lengthBeforeLastWord = settings.charsNum;
            continue_from = settings.charsNum;
        }else{                
            lengthBeforeLastWord = settings.charsNum-last_cut_word.length;
            continue_from = settings.charsNum-last_cut_word.length;
        }


        var short_txt  =_str.substring(0,lengthBeforeLastWord);
        var _toggle = '<a class="continue-reading" href="javascript:;">...'+settings.toggleText+'</a>';
        var _continue_txt = _str.substring(continue_from,_l);
        var _formated = short_txt+_toggle+'<span style="display:none">'+_continue_txt+'</span>';                
        $(elm).html(_formated);
    } 
});

调用插件：

<span class="txt">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</span>

javascript-如何使用jQuery显示更多带有长文本的选项？

1 个答案: