基于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 相关文章推荐
Prototype源码浅析 String部分(二)
Jan 16 Javascript
node.js中的fs.linkSync方法使用说明
Dec 15 Javascript
JS组件Bootstrap导航条使用方法详解
Apr 29 Javascript
浅析JavaScript 箭头函数 generator Date JSON
May 23 Javascript
jQuery获取剪贴板内容的方法
Jun 16 Javascript
js智能获取浏览器版本UA信息的方法
Aug 08 Javascript
vuejs在解析时出现闪烁的原因及防止闪烁的方法
Sep 19 Javascript
JavaScript实现创建自定义对象的常用方式总结
Jul 09 Javascript
浅谈ElementUI中switch回调函数change的参数问题
Aug 24 Javascript
JS实现动态无缝轮播
Jan 11 Javascript
JS实现悬浮球只在一侧滑动并且是横屏状态下
Aug 19 Javascript
JavaScript实现缓动动画
Nov 25 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
判断、添加和删除WordPress置顶文章的相关PHP函数小结
2015/12/10 PHP
Yii实现Command任务处理的方法详解
2016/07/14 PHP
JavaScript QueryString解析类代码
2010/01/17 Javascript
JavaScript 原型学习总结
2010/10/29 Javascript
jquery中动态效果小结
2010/12/16 Javascript
javascript ie6兼容position:fixed实现思路
2013/04/01 Javascript
js展开闭合效果演示代码
2013/07/24 Javascript
JavaScript显示当前文档最后修改日期的方法
2015/03/19 Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
2015/12/04 Javascript
认识Knockout及如何使用Knockout绑定上下文
2015/12/25 Javascript
JavaScript正则表达式小结(test|match|search|replace|split|exec)
2016/12/08 Javascript
js实现弹窗暗层效果
2017/01/16 Javascript
js实现登录框鼠标拖拽效果
2017/03/09 Javascript
ES6新特性七:数组的扩充详解
2017/04/21 Javascript
浅谈angularjs中响应回车事件
2017/04/24 Javascript
js如何获取网页所有图片
2017/05/12 Javascript
详解webpack进阶之插件篇
2017/07/06 Javascript
Javascript(es2016) import和require用法和区别详解
2017/08/11 Javascript
JavaScript登录验证基础教程
2017/11/01 Javascript
Vue 实现复制功能,不需要任何结构内容直接复制方式
2019/11/09 Javascript
vue3.0 项目搭建和使用流程
2021/03/04 Vue.js
Python中MYSQLdb出现乱码的解决方法
2014/10/11 Python
详解Python发送邮件实例
2016/01/10 Python
python 实现分页显示从es中获取的数据方法
2018/12/26 Python
tensorboard 可以显示graph,却不能显示scalar的解决方式
2020/02/15 Python
python软件都是免费的吗
2020/06/18 Python
Python容器类型公共方法总结
2020/08/19 Python
东南亚排名第一的服务市场:kaodim
2019/03/28 全球购物
和解协议书
2014/04/16 职场文书
基层党支部公开承诺书
2014/05/29 职场文书
小学教师师德师风演讲稿
2014/08/22 职场文书
中学生关于梦想的演讲稿
2014/08/22 职场文书
投标邀请书范本
2015/02/02 职场文书
女性健康知识讲座通知
2015/04/23 职场文书
2016秋季校长开学典礼致辞
2015/11/26 职场文书
Vue实现跑马灯样式文字横向滚动
2021/11/23 Vue.js