基于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 相关文章推荐
prototype与jquery下Ajax实现的差别
Sep 13 Javascript
javascript针对DOM的应用分析(二)
Apr 15 Javascript
Javascript 颜色渐变效果的实现代码
Oct 01 Javascript
使用js写的一个简易的投票
Nov 27 Javascript
jQuery 1.9使用$.support替代$.browser的使用方法
May 27 Javascript
JavaScript包装对象使用详解
Jul 09 Javascript
深入探秘jquery瀑布流的实现
Jan 30 Javascript
Node.js的Express框架使用上手指南
Mar 12 Javascript
解决bootstrap下拉菜单点击立即隐藏bug的方法
Jun 13 Javascript
浅谈Angular4实现热加载开发旅程
Sep 08 Javascript
vue2.0 根据状态值进行样式的改变展示方法
Mar 13 Javascript
vue axios post发送复杂对象问题
Jun 04 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
8个必备的PHP功能实例代码
2013/10/27 PHP
PHP实现简单搜歌的方法
2015/07/28 PHP
学习php设计模式 php实现装饰器模式(decorator)
2015/12/07 PHP
一段实现页面上的图片延时加载的js代码
2010/02/11 Javascript
IE6,IE7,IE8下使用Javascript记录光标选中范围(已补全)
2011/08/28 Javascript
网页源代码保护(禁止右键、复制、另存为、查看源文件)
2012/05/23 Javascript
JS 实现Json查询的方法实例
2013/04/12 Javascript
Jquery多选下拉列表插件jquery multiselect功能介绍及使用
2013/05/24 Javascript
javascript中的事件代理初探
2014/03/08 Javascript
js动态控制table的tr、td增加及删除的具体实现
2014/04/30 Javascript
七个很有意思的PHP函数
2014/05/12 Javascript
ie8模式下click无反应点击option无反应的解决方法
2014/10/11 Javascript
禁止按回车键提交表单的方法
2015/06/11 Javascript
JavaScript遍历Json串浏览器输出的结果不统一问题
2016/11/03 Javascript
使用smartupload组件实现jsp+jdbc上传下载文件实例解析
2017/01/05 Javascript
详解angularjs的数组传参方式的简单实现
2017/07/28 Javascript
Bootstrap Table 搜索框和查询功能
2017/11/30 Javascript
JavaScript模块详解
2017/12/18 Javascript
JavaScript判断变量名是否存在数组中的实例
2017/12/28 Javascript
webpack+react+antd脚手架优化的方法
2018/04/02 Javascript
如何理解Vue的v-model指令的使用方法
2018/07/19 Javascript
typescript nodejs 依赖注入实现方法代码详解
2019/07/21 NodeJs
Python的垃圾回收机制深入分析
2014/07/16 Python
Python使用urllib2模块抓取HTML页面资源的实例分享
2016/05/03 Python
selenium+python自动化测试之环境搭建
2019/01/23 Python
Pytorch加载部分预训练模型的参数实例
2019/08/18 Python
python GUI库图形界面开发之PyQt5表单布局控件QFormLayout详细使用方法与实例
2020/03/06 Python
Python xlrd excel文件操作代码实例
2020/03/10 Python
常见的软件开发流程有哪些
2015/11/14 面试题
施工材料员岗位职责
2014/02/12 职场文书
演讲稿格式范文
2014/05/19 职场文书
2014年底个人工作总结
2015/03/10 职场文书
社区安置帮教工作总结2015
2015/05/20 职场文书
制定企业培训计划的五大要点!
2019/07/10 职场文书
Mysql Online DDL的使用详解
2021/05/20 MySQL
python+pyhyper实现识别图片中的车牌号思路详解
2022/12/24 Python