基于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 相关文章推荐
bcastr2.0 通用的图片浏览器
Nov 22 Javascript
eval的两组性能测试数据
Aug 17 Javascript
JavaScript中判断页面关闭、页面刷新的实现代码
Aug 27 Javascript
JS中完美兼容各大浏览器的scrolltop方法
Apr 17 Javascript
js日期范围初始化得到前一个月日期的方法
May 05 Javascript
5个最顶级jQuery图表类库插件【jquery插件库】
May 05 Javascript
JavaScript ES6中CLASS的使用详解
Nov 22 Javascript
javascript 删除数组元素和清空数组的简单方法
Feb 24 Javascript
Vue点击切换颜色的方法
Sep 13 Javascript
vscode 配置vue+vetur+eslint+prettier自动格式化功能
Mar 23 Javascript
详解为什么Vue中的v-if和v-for不建议一起用
Jan 13 Vue.js
vue如何使用rem适配
Feb 06 Vue.js
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
DC动漫人物排行
2020/03/03 欧美动漫
建立动态的WML站点(一)
2006/10/09 PHP
PHP 得到根目录的 __FILE__ 常量
2008/07/23 PHP
对于PHP 5.4 你必须要知道的
2013/08/07 PHP
PHP把JPEG图片转换成Progressive JPEG的方法
2014/06/30 PHP
PHP实现一维数组转二维数组的方法
2015/02/25 PHP
Yii框架弹出框功能示例
2017/01/07 PHP
php使用curl下载指定大小的文件实例代码
2017/09/30 PHP
JavaScript 特殊字符
2007/04/05 Javascript
Javascript日期对象的dateAdd与dateDiff方法
2008/11/18 Javascript
JavaScript 学习笔记(十四) 正则表达式
2010/01/22 Javascript
Jquery CheckBox全选方法代码附js checkbox全选反选代码
2010/06/09 Javascript
SWFObject 2.1以上版本语法介绍
2010/07/10 Javascript
js有关元素内容操作小结
2011/12/20 Javascript
jQuery中slideUp()方法用法分析
2014/12/24 Javascript
jQuery设置和移除文本框默认值的方法
2015/03/09 Javascript
jQuery动态背景图片效果实现方法
2015/07/03 Javascript
javascript实现选中复选框后相关输入框变灰不可用的方法
2015/08/11 Javascript
QQ登录背景闪动效果附效果演示源码下载
2015/09/22 Javascript
微信小程序 地图(map)实例详解
2016/11/16 Javascript
TableSort.js表格排序插件使用方法详解
2017/02/10 Javascript
浅谈Vue.js
2017/03/02 Javascript
Vue键盘事件用法总结
2017/04/18 Javascript
js中offset,client , scroll 三大元素知识点总结
2019/09/11 Javascript
Python 分享10个PyCharm技巧
2019/07/13 Python
python 批量添加的button 使用同一点击事件的方法
2019/07/17 Python
OpenCV利用python来实现图像的直方图均衡化
2020/10/21 Python
如何通过Python实现RabbitMQ延迟队列
2020/11/28 Python
微软英国官方网站:Microsoft英国
2016/10/15 全球购物
潘多拉珠宝俄罗斯官方网上商店:PANDORA俄罗斯
2020/09/22 全球购物
工程管理专业个人求职信范文
2013/12/07 职场文书
求职信名称怎么写
2014/05/26 职场文书
出生医学证明书
2014/09/15 职场文书
党员个人查摆剖析材料
2014/10/16 职场文书
看上去很美观后感
2015/06/10 职场文书
JavaScript中关于预编译、作用域链和闭包的理解
2021/03/31 Javascript