基于Jquery的文字自动截取(提供源代码)


Posted in Javascript onAugust 09, 2011

插件需求(功能需要)
一个插件就是完成一个特定的功能,我们在动手制作一个插件时应该确定该插件开发完成后应具备哪些功能供我们使用。
在某天早上,按模式的完成开机、连接数据库、开启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 相关文章推荐
javascript获取当前ip的代码
May 10 Javascript
以JSON形式将JS中Array对象数组传至后台的方法
Jan 06 Javascript
jquery live()调用不存在的解决方法
Feb 26 Javascript
js图片自动轮播代码分享(js图片轮播)
May 06 Javascript
网页下载文件期间如何防止用户对网页进行其他操作
Jun 27 Javascript
Node.js异步I/O学习笔记
Nov 04 Javascript
Bootstrap每天必学之表单
Nov 23 Javascript
JQuery 设置checkbox值二次无效的解决方法
Jul 22 Javascript
从零开始搭建一个react项目开发
Feb 09 Javascript
解析Json字符串的三种方法日常常用
May 02 Javascript
Vue data的数据响应式到底是如何实现的
Feb 11 Javascript
创建与框架无关的JavaScript插件
Dec 01 Javascript
JQuery动态创建DOM、表单元素的实现代码
Aug 09 #Javascript
用JS判断IE版本的代码 超管用!
Aug 09 #Javascript
使用jQuery+HttpHandler+xml模拟一个三级联动的例子
Aug 09 #Javascript
js 分页全选或反选标识实现代码
Aug 09 #Javascript
js字符串的各种格式的转换 ToString,Format
Aug 08 #Javascript
Jquery ajax传递复杂参数给WebService的实现代码
Aug 08 #Javascript
jquery学习笔记 用jquery实现无刷新登录
Aug 08 #Javascript
You might like
用PHP实现Ftp用户的在线管理
2012/02/16 PHP
php颜色转换函数hex-rgb(将十六进制格式转成十进制格式)
2013/09/23 PHP
PHP实现的简单异常处理类示例
2017/05/04 PHP
php静态成员方法和静态的成员属性的使用方法
2017/10/26 PHP
phpStorm+XDebug+chrome 配置详解
2019/04/01 PHP
漂亮的仿flash菜单,来自蓝色经典
2006/06/26 Javascript
被jQuery折腾得半死,揭秘为何jQuery为何在IE/Firefox下均无法使用
2010/01/22 Javascript
JQuery live函数
2010/12/24 Javascript
Jquery实现显示和隐藏的4种简单方式
2013/08/28 Javascript
toggle()隐藏问题的解决方法
2014/02/17 Javascript
Jquery动态添加及删除页面节点元素示例代码
2014/06/16 Javascript
JavaScript中数据结构与算法(二):队列
2015/06/19 Javascript
jquery制作图片时钟特效
2020/03/30 Javascript
JS防止网页被嵌入iframe框架的方法分析
2016/09/13 Javascript
Vue.js实现无限加载与分页功能开发
2016/11/03 Javascript
详解Angular 4.x NgTemplateOutlet
2017/05/24 Javascript
Webpack优化配置缩小文件搜索范围
2017/12/25 Javascript
JS遍历DOM文档树的方法实例详解
2018/04/03 Javascript
详解nodejs http请求相关总结
2019/03/31 NodeJs
[04:04]DOTA2亚洲邀请赛比赛场馆&酒店全攻略
2017/03/23 DOTA
Python实现的检测网站挂马程序
2014/11/30 Python
Python实现Logger打印功能的方法详解
2017/09/01 Python
使用python实现对元素的长截图功能
2019/11/14 Python
TensorFlow实现保存训练模型为pd文件并恢复
2020/02/06 Python
Python通过队列来实现进程间通信的示例
2020/10/14 Python
python安装sklearn模块的方法详解
2020/11/28 Python
HTC VIVE美国官网:VR虚拟现实眼镜
2018/02/13 全球购物
美国嘻哈文化生活方式品牌:GLD
2018/04/15 全球购物
美国踏板车和轻便摩托车销售网站:Mega Motor Madness
2020/02/26 全球购物
如果有两个类A,B,怎么样才能使A在发生一个事件的时候通知B
2016/03/12 面试题
商业企业管理专业求职信
2014/07/10 职场文书
法人授权委托书范本
2014/09/17 职场文书
个人剖析材料及整改措施
2014/10/07 职场文书
幼儿园园长安全责任书
2015/05/08 职场文书
客户答谢会致辞
2015/07/30 职场文书
2016年社区植树节活动总结
2016/03/16 职场文书