自定义全文显示插件

今天给大家带来的是一个自定义的全文显示插件，具体来说呢，就是当文章过长时，我们只希望特定地显示几行字符，然后点击"显示全文"的时候可以加载全文，那么这个怎么做呢？我想了想提供一种思路，就是根据获取当前的文本，截取出特定个数的字符，就可以精确的控制初始化时显示的文本了。就是下面截图的样子:

当点击"显示全部"的时候，就可以显示全文了，同时提供了"收起文章"的选项，点击可以收起文章。

废话不多说了，直接贴代码咯。

css样式(这个就不多说了,只是在谷歌上测试了)：

* {
    margin: 0;
    padding: 0;
}
body {
    font-family: "微软雅黑";
    font-size: 12px;
    color: #222;
}
.article {
    margin: 20px auto;
    width: 512px;
    border-radius: 5px;
    padding: 10px;
    box-shadow: 0 0 1em rgb(0,0,0);
}
.article p {
    font-size: 14px;
    text-indent: 28px;
    text-align: justify;
}
.article p a {
    text-decoration: none;
    margin-left: 5px;
    display: none;
}

插件js代码：

(function($) {
  $.fn.articleShow = function(option) {
    // 默认样式
    var defaultOpt = {
        'width' : '512',// 显示的宽度
        'showNum' : 112// 显示的字数
    }
    var opts = $.extend(true, defaultOpt, option);
    var $this = $(this);
    var show_num = opts.showNum;
    var showTexts = [];
    $.each(opts.article, function(index, val) {    
        var show_text = val.substring(0, show_num);
        showTexts.push(show_text);
        if(val.length > show_num) {
            // 添加dom节点
            var $append_dom = $("<div class='article'><p data-index='"+ index +"'><span>"+ show_text +"</span>" + 
            "<a class='show_all' href='javascript:void(0);' title='显示全部'>显示全部>></a>" +
            "<a class='hide_all' href='javascript:void(0);' title='收起全文'><<收起全文</a>" +
            "</p></div>");
            $this.prepend($append_dom);
            $('.show_all').show();
        }
    });
    
    (function() {
        // 初始化宽度
        $('.article').width(opts.width);
     })();
 
     $('.show_all').on('click', function(event) {
        var index = parseInt($(this).parent('p').data('index'));
        $(this).prev('span').text(opts.article[index]);
        $(this).hide();
        $(this).next('a.hide_all').show();
    });
    
    $('.hide_all').on('click', function(event) {
            var index = parseInt($(this).parent('p').data('index'));
            $(this).siblings('span').text(showTexts[index]);
            $(this).prev('a.show_all').show();
            $(this).hide();
        });
    }
})(jQuery);

调用代码：

只需要在html文件中加入jquery的库文件即可.

$('body').articleShow({
    'width' : '500',
    'showNum' : 150,
    'article' : [
        '全球票房超20亿美元最新科幻动作大片《阿凡达》。卡梅隆这部历时十余年打造的史诗巨作呈现了独一无二的宏伟场面，壮观的视野，激动人心的叙事以及回归自然的主题。自1997年《泰坦尼克号》在全球大热之后，导演詹姆斯·卡梅隆的下一部电影令影迷等得几乎望眼欲穿。对此，詹姆斯·卡梅隆表示:《阿凡达》能够最终拍出来，是一次奇迹。这是一部科幻电影，是我喜欢的东西，科幻电影要表现的是我们现在无法接触到的事物，这是一种预言，它会让你反思我们现在在做的一切，将来会发生什么样的后果？这就是我拍《阿凡达》的初衷之一，我对现在人类对大自然所做的一切感到深深的忧虑，我想将来也许会受到大自然的报复。故事开始于地球，杰克·萨利（Jake Sully，萨姆·沃辛顿　饰）是一个双腿瘫痪的老兵，他觉得没有任何东西值得他去战斗，因此当被要求去潘多拉星球到那里的采矿公司工作时欣然接受。潘多拉星球上有一种别的地方都没有的矿物元素"unobtanium\"，它将彻底改变人类的能源产业，正是受此吸引人类才不远万里来到这里拓荒。不过资源丰富的潘多拉星球完全不适合人类生活，这里的空气对人类有毒，本土的动植物是凶猛的掠食者，非常危险。这里的环境也造就了与人类不同的一群生物：10英尺高的蓝色类人生物\"Navi族"。Navi族对于人类拓荒者的到来非常不满，他们也不喜欢人类的机器在这个星球的土地上到处挖矿、留下斑斑伤痕。由于潘多拉星球环境严酷，人类传统的宇航服、机甲都不足以保护矿工，于是科学家们转向了克隆技术：他们将人类DNA和Navi人的DNA结合在一起，制造了一个克隆Navi人，这个克隆Navi人可以让人类的意识进驻其中，成为人类在这个星球上自由活动的"化身\"。然而并不是任何人都可以操纵这个克隆Navi人，只有DNA与他身上人类DNA配型相符的人才有这样的能力。杰克·萨利的哥哥是这个克隆Navi的人类DNA捐献者，他就可以操纵这个克隆Navi人，然而他被杀死了，采矿的公司为了不让砸下去的钱白砸（克隆Navi人价格不菲），必须找到一个可以代替他操纵克隆Navi的人，这个人的DNA还必须和其配型相符，于是他们自然就找到了杰克·萨利，杰克·萨利对此很高兴，应为那意味着他又能走路了。几年后，杰克·萨利到了潘多拉星球，他发现这里的美景简直无法用语言来形容，高达900英尺的参天巨树、星罗棋布飘浮在空中的群山、色彩斑斓充满奇特植物的茂密雨林、晚上各种动植物还会发出光……就如同梦中的奇幻花园。不过很快他就体验到了这里的危险，一头毒狼（潘多拉星球一种本土生物）与他狭路相逢，眼看就要被吃掉，一支箭射死了毒狼，杰克得救了。救他的是Navi族的一个女孩（佐伊·萨尔达娜　饰），杰克从她口中了解到了更多潘多拉星球的知识。懒人图库Navi族人一直以来都与潘多拉星球的其他物种和谐相处，过着一种简朴天然的生活，杰克在和这个Navi女孩的相处过程中逐渐转变了对人类来这里采矿的看法，他意识到他已经找到值得为之战斗的东西了。不过杰克·萨利如果要加入Navi族人对抗人类入侵者的战争，要付出很大的代价：他并不能永远呆在\"化身\"中，当"化身\"--克隆Navi人睡觉时，他就会回到自己半身不遂的人类身体中，只有通过专门的连接设备才能重新回到"化身\"中。一旦与自己的同胞为敌，他就失去了与\"化身\"结合的可能，只能困在残疾的身体里，并失去那个他越来越喜欢的Navi女孩……', 
        '然所做的一切感到深深的忧虑，我想将来也许会受到大自然的报复。故事开始于地球，杰克·萨利（Jake Sully，萨姆·沃辛顿　饰）是一个双腿瘫痪的老兵，他觉得没有任何东西值得他去战斗，因此当被要求去潘多拉星球到那里的采矿公司工作时欣然接受。潘多拉星球上有一种别的地方都没有的矿物元素"unobtanium\"，它将彻底改变人类的能源产业，正是受此吸引人类才不远万里来到这里拓荒。不过资源丰富的潘多拉星球完全不适合人类生活，这里的空气对人类有毒，本土的动植物是凶猛的掠食者，非常危险。这里的环境也造就了与人类不同的一群生物：10英尺高的蓝色类人生物\"Navi族"。Navi族对于人类拓荒者的到来非常不满，他们也不喜欢人类的机器在这个星球的土地上到处挖矿、留下斑斑伤痕。由于潘多拉星球环境严酷，人类传统的宇航服、机甲都不足以保护矿工，于是科学家们转向了克隆技术：他们将人类DNA和Navi人的DNA结合在一起，制造了一个克隆Navi人，这个克隆Navi人可以让人类的意识进驻其中，成为人类在这个星球上自由活动的"化身\"。然而并不是任何人都可以操纵这个克隆Navi人，只有DNA与他身上人类DNA配型相符的人才有这样的能力。杰克·萨利的哥哥是这个克隆Navi的人类DNA捐献者，他就可以操纵这个克隆Navi人，然而他被杀死了，采矿的公司为了不让砸下去的钱白砸（克隆Navi人价格不菲），必须找到一个可以代替他操纵克隆Navi的人，这个人的DNA还必须和其配型相符，于是他们自然就找到了杰克·萨利，杰克·萨利对此很高兴，应为那意味着他又能走路了。几年后，杰克·萨利到了潘多拉星球，他发现这里的美景简直无法用语言来形容，高达900英尺的参天巨树、星罗棋布飘浮在空中的群山、色'
    ]
});