基于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 相关文章推荐
jQuery事件绑定.on()简要概述及应用
Feb 07 Javascript
JS实现QQ图片一闪一闪的效果小例子
Jul 31 Javascript
异步动态加载JS并运行(示例代码)
Dec 13 Javascript
javascript实现浏览器窗口传递参数的方法
Sep 03 Javascript
JS点击链接后慢慢展开隐藏着图片的方法
Feb 17 Javascript
js实现仿Windows风格选项卡和按钮效果实例
May 13 Javascript
js实现正则匹配中文标点符号的方法
Dec 23 Javascript
JavaScript中通过提示框跳转页面的方法
Feb 14 Javascript
Uploadify上传文件方法
Mar 16 Javascript
vue.js实现简单轮播图效果
Oct 10 Javascript
基于layui轮播图满屏是高度自适应的解决方法
Sep 16 Javascript
使用react+redux实现计数器功能及遇到问题
Jun 02 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
笑谈配置,使用Smarty技术
2007/01/04 PHP
基于PHP中的常用函数回顾
2013/07/11 PHP
php显示时间常用方法小结
2015/06/05 PHP
thinkPHP批量删除的实现方法分析
2016/11/09 PHP
PhpStorm 如何优雅的调试Hyperf的方法步骤
2019/11/24 PHP
Javascript select控件操作大全(新增、修改、删除、选中、清空、判断存在等)
2008/12/19 Javascript
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例
2015/03/04 Javascript
js中字符串编码函数escape()、encodeURI()、encodeURIComponent()区别详解
2016/04/01 Javascript
如何在Angular.JS中接收并下载PDF
2016/11/26 Javascript
JavaScript实现隐藏省略文字效果的方法
2017/04/27 Javascript
Node.js中使用mongoose操作mongodb数据库的方法
2017/09/12 Javascript
vue强制刷新组件的方法示例
2019/02/28 Javascript
微信小程序云开发之使用云函数
2019/05/17 Javascript
layui 实现加载动画以及非真实加载进度的方法
2019/09/23 Javascript
如何基于JS截获动态代码
2019/12/25 Javascript
为react组件库添加typescript类型提示的方法
2020/06/15 Javascript
[06:06]2018DOTA2亚洲邀请赛主赛事第四日战况回顾 全明星赛欢乐上演
2018/04/07 DOTA
php使用递归与迭代实现快速排序示例
2014/01/23 Python
Python中的引用和拷贝浅析
2014/11/22 Python
python文件操作相关知识点总结整理
2016/02/22 Python
使用Python搭建虚拟环境的配置方法
2018/02/28 Python
Python Numpy:找到list中的np.nan值方法
2018/10/30 Python
对python调用RPC接口的实例详解
2019/01/03 Python
在自动化中用python实现键盘操作的方法详解
2019/07/19 Python
python 实现dict转json并保存文件
2019/12/05 Python
使用CSS3的appearance属性改变元素的外观的方法
2015/12/12 HTML / CSS
超级英雄、电影和电视、乐队和音乐T恤:Loud Clothing
2019/09/01 全球购物
如何获得EntityManager
2014/02/09 面试题
介绍一下XMLHttpRequest对象
2012/02/12 面试题
2014年感恩节活动策划方案
2014/10/06 职场文书
退学证明范本3篇
2014/10/29 职场文书
副总经理岗位职责范本
2015/04/08 职场文书
酒店客房服务员岗位职责
2015/04/09 职场文书
建筑工程材料员岗位职责
2015/04/11 职场文书
Android自定义scrollview实现回弹效果
2022/04/01 Java/Android
Python开发简易五子棋小游戏
2022/05/02 Python