基于Jquery的文字自动截取（提供源代码）
更新时间：2011年08月09日 19:17:12 作者：
计划总是赶不上变化，这篇插件开发的文章本应在上周完成，由于手头的项目实在紧张，只好让路吧，嘿嘿。今天将跟大家一起完成这个插件的开发流程。
插件需求（功能需要）
一个插件就是完成一个特定的功能，我们在动手制作一个插件时应该确定该插件开发完成后应具备哪些功能供我们使用。
在某天早上，按模式的完成开机、连接数据库、开启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并运行吧。您的第二个插件就诞生咯。
一个插件就是完成一个特定的功能，我们在动手制作一个插件时应该确定该插件开发完成后应具备哪些功能供我们使用。
在某天早上，按模式的完成开机、连接数据库、开启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并运行吧。您的第二个插件就诞生咯。
相关文章
卷帘效果在生活中应用比较广泛，因为它的视觉效果比较不错，本文用代码实现一个，感兴趣的朋友不妨了解一下，或许对你学习jquery有所帮助,好了话不多说切入正题2013-02-02
这篇文章主要介绍了jQuery仿写百度百科的目录树医保词条样式，点击右侧的目录树，左侧跳转到指定的锚点位置，滚动鼠标，游标跟随一起滚动至响应链接位置，具体实现思路大家参考下本文2017-01-01
下面小编就为大家带来一篇jq源码解析之绑在$,jQuery上面的方法(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
利用jQuery弹出select选择的值,当单击按钮的时候就会执行的一个方法，它的作用就是alert select值2013-04-04
这里给大家展示了一例使用jQuery实现下拉菜单效果，代码非常简洁，推荐给小伙伴们2015-01-01
jquery获取table指定行和列的数据方法(当前选中行、列)
下面小编就为大家带来一篇jquery获取table指定行和列的数据方法(当前选中行、列)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-11-11
本文给大家介绍的是使用jQuery实现仿路边灯箱广告图片轮播切换特效，效果非常棒，有需要的小伙伴可以参考下。2015-04-04
一般元素下的多个指定子元素显示隐藏效果,使用css中的选择器:nth-child()、:nth-of-type(),但如果想使用JavaScript动态控制,就需要用到jquery的filter()方法2023-08-08
这篇文章主要介绍了jquery实现简单Tab切换菜单效果的相关资料,需要的朋友可以参考下2016-06-06
这篇文章主要介绍了jQuery中next()方法用法,实例分析了next()方法的功能、定义及获得匹配元素集合中每个元素紧邻的同辈元素使用技巧,需要的朋友可以参考下2015-01-01
最新评论