基于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 相关文章推荐
js添加table的行和列 具体实现方法
Jul 22 Javascript
node.js中的console.error方法使用说明
Dec 10 Javascript
jQuery中:submit选择器用法实例
Jan 03 Javascript
jQuery实现的背景动态变化导航菜单效果
Aug 24 Javascript
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
Apr 29 Javascript
Angularjs过滤器使用详解
May 25 Javascript
javascript 判断页面访问方式电脑或者移动端
Sep 19 Javascript
Bootstrap 3 进度条的实现
Feb 22 Javascript
div中文字内容溢出常见的解决方法
Mar 16 Javascript
JavaScript实现图片切换效果
Aug 12 Javascript
JS数组的常用10种方法详解
May 08 Javascript
jQuery冲突问题解决方法
Jan 19 jQuery
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 八种基本的数据类型小结
2011/06/01 PHP
PHP CURL模拟登录新浪微博抓取页面内容 基于EaglePHP框架开发
2012/01/16 PHP
php获得文件大小和文件创建时间的方法
2015/03/13 PHP
PHP带节点操作的无限分类实现方法详解
2016/11/09 PHP
PHP实现UTF8二进制及明文字符串的转化功能示例
2017/11/20 PHP
javascript中的107个基础知识收集整理 推荐
2010/03/29 Javascript
jquery实现可拖动DIV自定义保存到数据的实例
2013/11/20 Javascript
JavaScript 学习笔记之变量及其作用域
2015/01/14 Javascript
jquery实现拖拽调整Div大小
2015/01/30 Javascript
JavaScript实现基于Cookie的存储类实例
2015/04/10 Javascript
关于JS中的apply,call,bind的深入解析
2016/04/05 Javascript
JS实现刷新父页面不弹出提示框的方法
2016/06/22 Javascript
AngulaJS路由 ui-router 传参实例
2017/04/28 Javascript
JavaScript之浏览器对象_动力节点Java学院整理
2017/07/03 Javascript
微信小程序之电影影评小程序制作代码
2017/08/03 Javascript
cdn模式下vue的基本用法详解
2018/10/07 Javascript
[01:00:14]DOTA2官方TI8总决赛纪录片 真视界True Sight
2019/01/16 DOTA
ssh批量登录并执行命令的python实现代码
2012/05/25 Python
更改Python命令行交互提示符的方法
2015/01/14 Python
Python中使用装饰器和元编程实现结构体类实例
2015/01/28 Python
python根据出生日期获得年龄的方法
2015/03/31 Python
pycharm远程调试openstack代码
2017/11/21 Python
python 协程中的迭代器,生成器原理及应用实例详解
2019/10/28 Python
Python列表list操作相关知识小结
2020/01/29 Python
numpy的Fancy Indexing和array比较详解
2020/06/11 Python
django form和field具体方法和属性说明
2020/07/09 Python
一款纯css3实现的响应式导航
2014/10/31 HTML / CSS
用HTML5制作视频拼图的教程
2015/05/13 HTML / CSS
LG西班牙网上商店:Tienda LG Online Es
2019/07/30 全球购物
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的
2015/07/24 面试题
建筑工地质量标语
2014/06/12 职场文书
卫校毕业生自我鉴定
2014/09/28 职场文书
2015年防汛工作总结
2015/05/15 职场文书
刑事起诉书范文
2015/05/19 职场文书
客户答谢会致辞
2015/07/30 职场文书
MySql中的json_extract函数处理json字段详情
2022/06/05 MySQL