作业帮 > Javascript > 教育资讯

JavaScript教程：基于Jquery的文字截取

来源：学生作业帮助网 编辑：作业帮 时间：2024/05/10 05:23:56 Javascript
JavaScript教程：基于Jquery的文字截取
JavaScript教程：基于Jquery的文字截取Javascript
【51Test.NET-JavaScript教程：基于Jquery的文字截取】：
计划总是赶不上变化，这篇插件开发的文章本应在上周完成，由于手头的项目实在紧张，只好让路吧，嘿嘿。今天将跟大家一起完成这个插件的开发流程。
插件需求（功能需要） 
一个插件就是完成一个特定的功能，我们在动手制作一个插件时应该确定该插件开发完成后应具备哪些功能供我们使用。 
在某天早上，按模式的完成开机、连接数据库、开启VS开发环境、调试程序。程序跑起了，可是页面中的有段内容超过了页面所容许的范围。这还不容易哟，SubString呗， 
对，这的确是个好法子，能解决这类问题，但当页面需要被处理过后的内容进行交互，这种方法难免有点不适应了，那么我们就使用Jquery开发一个满足该需求的插件吧； 
开发须知 
如果您对使用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); 
return false; 
} 
else { 
$(".more").hide(900); 
$(".morelink").html(options.showmore); 
return false; 
} 
}); 
} 
return false; 
}; 
})(jQuery); 

Html测试代码： 

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

好了，读者看到这里不妨把代码COPY并运行吧。您的第二个插件就诞生咯。
Javascript