基于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身份证验证超强脚本
Oct 26 Javascript
判断脚本加载是否完成的方法
May 26 Javascript
js动态添加删除,后台取数据(示例代码)
Nov 25 Javascript
JS 使用for循环遍历子节点查找元素
Sep 06 Javascript
基于js对象,操作属性、方法详解
Aug 11 Javascript
js 自带的sort() 方法全面了解
Aug 16 Javascript
js面向对象实现canvas制作彩虹球喷枪效果
Sep 24 Javascript
AngualrJs清除定时器遇到的坑
Oct 13 Javascript
vue项目创建并引入饿了么elementUI组件的步骤
Apr 11 Javascript
javascript中正则表达式语法详解
Aug 07 Javascript
vue实现移动端返回顶部
Oct 12 Javascript
vue 组件基础知识总结
Jan 26 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
php字符串截取问题
2006/11/28 PHP
探讨如何使用SimpleXML函数来加载和解析XML文档
2013/06/07 PHP
php自定义函数截取汉字长度
2014/05/15 PHP
PHP实现批量检测网站是否能够正常打开的方法
2016/08/23 PHP
PHP5.6新增加的可变函数参数用法分析
2017/08/25 PHP
JavaScript语句可以不以;结尾的烦恼
2007/03/08 Javascript
字符串的replace方法应用浅析
2011/12/06 Javascript
PHP+jQuery+Ajax实现多图片上传效果
2015/03/14 Javascript
javascript中数组方法汇总
2015/07/07 Javascript
javascript html5实现表单验证
2016/03/01 Javascript
JavaScript手机振动API
2016/06/11 Javascript
很棒的js选项卡切换效果
2016/07/15 Javascript
vue.js绑定class和style样式(6)
2016/12/09 Javascript
JavaScript 事件对内存和性能的影响
2017/01/22 Javascript
最常见和最有用的字符串相关的方法详解
2017/02/06 Javascript
Angular动态添加、删除输入框并计算值实例代码
2017/03/29 Javascript
深入理解ES6之数据解构的用法
2018/01/13 Javascript
快速解决vue-cli不能初始化webpack模板的问题
2018/03/20 Javascript
vue路由拦截及页面跳转的设置方法
2018/05/24 Javascript
vue项目动态设置页面title及是否缓存页面的问题
2018/11/08 Javascript
vue element动态渲染、移除表单并添加验证的实现
2019/01/16 Javascript
浅谈layui里的上传控件问题
2019/09/26 Javascript
JS手写一个自定义Promise操作示例
2020/03/16 Javascript
从表单校验看JavaScript策略模式的使用详解
2020/10/17 Javascript
Python画图高斯分布的示例
2019/07/10 Python
Pycharm中安装wordcloud等库失败问题及终端通过pip安装的Python库如何添加到Pycharm解释器中(推荐)
2020/05/10 Python
利用python控制Autocad:pyautocad方式
2020/06/01 Python
利用css3径向渐变做一张优惠券的示例
2018/03/22 HTML / CSS
泰国王权免税店官方网站:KingPower
2019/03/11 全球购物
庆元旦活动总结
2014/07/09 职场文书
婚宴邀请函
2015/01/30 职场文书
小学母亲节活动总结
2015/02/10 职场文书
2015年大学生实习评语
2015/03/25 职场文书
单位收入证明范本
2015/06/18 职场文书
初一年级组工作总结
2015/08/12 职场文书
Java 实战项目之家居购物商城系统详解流程
2021/11/11 Java/Android