基于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实现弹窗插件功能实例代码分享
Dec 12 Javascript
详解JavaScript基于面向对象之继承
Dec 13 Javascript
浅析JS原型继承与类的继承
Apr 07 Javascript
JavaScript解析JSON格式数据的方法示例
Jan 24 Javascript
JavaScript对象_动力节点Java学院整理
Jun 23 Javascript
基于JS实现仿京东搜索栏随滑动透明度渐变效果
Jul 10 Javascript
详解VueJs中的V-bind指令
May 03 Javascript
vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解
May 28 Javascript
vue filter 完美时间日期格式的代码
Aug 14 Javascript
vue elementUI 表单校验的实现代码(多层嵌套)
Nov 06 Javascript
vue中echarts图表大小适应窗口大小且不需要刷新案例
Jul 19 Javascript
详解Vue数据驱动原理
Nov 17 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
Mac OS下配置PHP+MySql环境
2015/02/25 PHP
PHP自毁程序(慎用)
2015/07/09 PHP
Nginx服务器上安装并配置PHPMyAdmin的教程
2015/08/18 PHP
PHP模拟http请求的方法详解
2016/11/09 PHP
使一个函数作为另外一个函数的参数来运行的javascript代码
2007/08/13 Javascript
js中判断文本框是否为空的两种方法
2011/07/31 Javascript
浅谈Javascript面向对象编程
2011/11/15 Javascript
JavaScript前端图片加载管理器imagepool使用详解
2014/12/29 Javascript
jQuery实现渐变弹出层和弹出菜单的方法
2015/02/20 Javascript
jQuery实现简单的列表式导航菜单效果代码
2015/08/31 Javascript
Bootstrap编写导航栏和登陆框
2016/05/30 Javascript
jQuery+ajax实现实用的点赞插件代码
2016/07/06 Javascript
详谈JS中数组的迭代方法和归并方法
2017/08/11 Javascript
JavaScript函数中的this四种绑定形式
2017/08/15 Javascript
快速理解 JavaScript 中的 LHS 和 RHS 查询的用法
2017/08/24 Javascript
基于VUE移动音乐WEBAPP跨域请求失败的解决方法
2018/01/16 Javascript
Laravel整合Bootstrap 4的完整方案(推荐)
2018/01/25 Javascript
JavaScript如何对图片进行黑白化
2018/04/10 Javascript
React如何避免重渲染
2018/04/10 Javascript
[01:05:56]2018DOTA2亚洲邀请赛3月29日 小组赛A组 Newbee VS VG
2018/03/30 DOTA
[00:15]TI9地铁玩家打卡
2019/08/11 DOTA
python使用Flask框架获取用户IP地址的方法
2015/03/21 Python
10种检测Python程序运行时间、CPU和内存占用的方法
2015/04/01 Python
详尽讲述用Python的Django框架测试驱动开发的教程
2015/04/22 Python
Python编写登陆接口的方法
2017/07/10 Python
深入浅析python with语句简介
2018/04/11 Python
python 删除字符串中连续多个空格并保留一个的方法
2018/12/22 Python
Python3安装Pillow与PIL的方法
2019/04/03 Python
Python静态类型检查新工具之pyright 使用指南
2019/04/26 Python
Python中一个for循环循环多个变量的示例
2019/07/16 Python
AmazeUI 加载进度条的实现示例
2020/08/20 HTML / CSS
法国高保真音响和家庭影院商店:Son Video
2019/04/26 全球购物
2014年旅游局法制宣传日活动总结
2014/11/01 职场文书
礼仪培训心得体会
2016/01/22 职场文书
心理学培训心得体会
2016/01/22 职场文书
Oracle创建只读账号的详细步骤
2021/06/07 Oracle