jquery实现显示和隐藏多余文字

转自：http://www.3aj.cn/javascript/article/2/7410.html

如果您对使用Jquery开发插件的流程不是很连接，请查考本篇文章：开发Jquery插件（一）(包含最终效果图) 
一步一步开发Jquery插件----文字自动缩放 
首先我们应该想到为了以后扩展该插件，条件不应该写死在程序中，那么该插件应该具备这么几个参数：Length（限制长度）、Replace（被替换后的文字）、ShowMore（显示全部的按钮）、HideMore（隐藏过多的文字）； 
1、在Jquery开发插件时，它提供向插件传递参数和使用默认定义好的参数，一般写法应用如下： 

$.fn.MyFunction=function(options){//options为我们传递的参数数组； 
var defaults ={
arg1:...,
arg2:"...",
argN:"",
replace:"..."
};
var options = $.extend(defaults, options);

　　

那么针对我们今天开发的这个插件，对应的插件参数如下： 

$.fn.HideMore=function(options){
var defaults ={
length:10,
showmore:"更多",
hidemore:"隐藏",
replace:"..."
};
var options = $.extend(defaults, options);

 

2、那接下来的工作大致流程如下： 
i、获取Div中的内容长度； 
ii、与传递至插件的length的值比较； 
iii、如果长度超过length就截取并替换； 
iiii、对showmore和hidemore定义事件； 
插件源代码： 

(function($) {
    $.fn.HideMore = function(options) {
        var defaults = {
            length: 10,
            showmore: "更多",
            hidemore: "隐藏",
            replace: "..."
        };
        var options = $.extend(defaults, options);
        var objhtml = $(this).html();
        if (objhtml.length > options.length) {
            var precontent = objhtml.substring(0, options.length);
            var lastcontent = "" + objhtml.substring(options.length, objhtml.length) + "";
            var morelink = "" + options.showmore + "";
            var newcontent = precontent + lastcontent + options.replace + morelink;
            $(this).html(newcontent);
            $(".more").css("display", "none");
            $(".morelink").click(function() {
                if ($(".morelink").html() == options.showmore) {
                    $(".more").show(1000);
                    $(".morelink").html(options.hidemore);
                    returnfalse;
                } else {
                    $(".more").hide(900);
                    $(".morelink").html(options.showmore);
                    returnfalse;
                }
            });
        }
        returnfalse;
    };
})(jQuery);

 

Html测试代码： 

$("elements").HideMore(
{
length:50,
showmore"展",
hidemore"缩",
replace:"......"
});