基于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对JSON进行模式匹配(Part 1-设计)
Jul 17 Javascript
node.js中的fs.readlinkSync方法使用说明
Dec 17 Javascript
jQuery使用hide方法隐藏指定元素class样式用法实例
Mar 30 Javascript
JavaScript 数组中最大最小值
Jun 05 Javascript
js的各种排序算法实现(总结)
Jul 23 Javascript
axios基本入门用法教程
Mar 25 Javascript
vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
Sep 14 Javascript
Vue中的methods、watch、computed的区别
Nov 26 Javascript
jquery的$().each和$.each的区别
Jan 18 jQuery
在微信小程序中保存网络图片
Feb 12 Javascript
Vue+Element实现网页版个人简历系统(推荐)
Dec 31 Javascript
js获取图片的base64编码并压缩
Dec 05 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获取当前文件所在目录 getcwd()函数
2009/05/13 PHP
解析php中heredoc的使用方法
2013/06/17 PHP
PHP文件读写操作相关函数总结
2014/11/18 PHP
Js 订制自己的AlertBox(信息提示框)
2009/01/09 Javascript
Jquery在IE7下无法使用 $.ajax解决方法
2009/11/11 Javascript
取得窗口大小 兼容所有浏览器的js代码
2011/08/09 Javascript
js动态改变select选择变更option的index值示例
2014/07/10 Javascript
推荐 21 款优秀的高性能 Node.js 开发框架
2014/08/18 Javascript
在JavaScript中模拟类(class)及类的继承关系
2016/05/20 Javascript
jQuery层次选择器用法示例
2016/09/09 Javascript
js实现登录验证码
2016/12/22 Javascript
Vue.js组件tab实现选项卡切换
2020/03/23 Javascript
JavaScript实现弹窗效果代码分析
2017/03/09 Javascript
Vue中建立全局引用或者全局命令的方法
2017/08/21 Javascript
Three.js中网格对象MESH的属性与方法详解
2017/09/27 Javascript
vue项目使用微信公众号支付总结及遇到的坑
2018/10/23 Javascript
vue实现自定义日期组件功能的实例代码
2018/11/06 Javascript
layui之table checkbox初始化时选中对应选项的方法
2019/09/02 Javascript
微信小程序登陆注册功能的实现代码
2019/12/10 Javascript
python轻松查到删除自己的微信好友
2016/01/10 Python
Python 读取指定文件夹下的所有图像方法
2018/04/27 Python
python爬虫URL重试机制的实现方法(python2.7以及python3.5)
2018/12/18 Python
Python如何爬取实时变化的WebSocket数据的方法
2019/03/09 Python
Python3实现建造者模式的示例代码
2020/06/28 Python
python 第三方库paramiko的常用方式
2021/02/20 Python
CSS3感应鼠标的背景闪烁和图片缩放动画效果
2014/05/14 HTML / CSS
Conforama西班牙:您的家具、装饰和电器商店
2020/02/21 全球购物
opencv实现图像平移效果
2021/03/24 Python
大学活动邀请函
2014/01/28 职场文书
乡镇挂职心得体会
2014/09/04 职场文书
教师作风整改措施思想汇报
2014/10/12 职场文书
2015年生产车间工作总结
2015/04/22 职场文书
励志语录:只有自己足够强大,才能不被别人践踏
2020/01/09 职场文书
灵能百分百第三季什么时候来?
2022/03/15 日漫
Win11如何设置右键单击显示所有选项?Win11右键单击显示所有选项设置教程
2022/04/08 数码科技
MySQL 逻辑备份 into outfile
2022/05/15 MySQL