相思资源网 Design By www.200059.com
插件需求(功能需要)
一个插件就是完成一个特定的功能,我们在动手制作一个插件时应该确定该插件开发完成后应具备哪些功能供我们使用。
在某天早上,按模式的完成开机、连接数据库、开启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并运行吧。您的第二个插件就诞生咯。
标签:
文字自动截取
相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com
暂无基于Jquery的文字自动截取(提供源代码)的评论...
稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!
昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?