基于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 - HTML的request类
Jan 09 Javascript
Prototype 工具函数 学习
Jul 23 Javascript
JavaScript 数组循环引起的思考
Jan 01 Javascript
javascript 事件处理、鼠标拖动效果实现方法详解
May 11 Javascript
js弹出确认是否删除对话框
Mar 27 Javascript
根据当前时间在jsp页面上显示上午或下午
Aug 18 Javascript
详解AngularJS控制器的使用
Mar 09 Javascript
javascript获取网页各种高宽及位置的方法总结
Jul 27 Javascript
Vue 组件修改根实例的数据的方法
Apr 02 Javascript
JS实现的雪花飘落特效示例
Dec 03 Javascript
vue添加锚点,实现滚动页面时锚点添加相应的class操作
Aug 10 Javascript
JavaScript执行机制详细介绍
Dec 06 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的QRcode类与大家分享
2011/11/13 PHP
javascript 鼠标滚轮事件
2009/04/09 Javascript
关于window.pageYOffset和document.documentElement.scrollTop
2011/04/05 Javascript
JS匀速运动演示示例代码
2013/11/26 Javascript
JS的参数传递示例介绍
2014/02/08 Javascript
js获取鼠标点击的位置实现思路及代码
2014/05/09 Javascript
js实现滑动触屏事件监听的方法
2015/05/05 Javascript
js 将input框中的输入自动转化成半角大写(税号输入框)
2017/02/16 Javascript
Angular实现购物车计算示例代码
2017/02/21 Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
2017/09/19 Javascript
Vue使用.sync 实现父子组件的双向绑定数据问题
2019/04/04 Javascript
在vue中获取微信支付code及code被占用问题的解决方法
2019/04/16 Javascript
javascript中contains是否包含功能实现代码(扩展字符、数组、dom)
2020/04/07 Javascript
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
2021/02/26 Vue.js
Python psutil模块简单使用实例
2015/04/28 Python
Python中支持向量机SVM的使用方法详解
2017/12/26 Python
简单实现python收发邮件功能
2018/01/05 Python
django请求返回不同的类型图片json,xml,html的实例
2018/05/22 Python
解决Shell执行python文件,传参空格引起的问题
2018/10/30 Python
python pygame实现方向键控制小球
2019/05/17 Python
在Python中使用MongoEngine操作数据库教程实例
2019/12/03 Python
python FTP批量下载/删除/上传实例
2019/12/22 Python
通过Python实现Payload分离免杀过程详解
2020/07/13 Python
Python多线程的退出控制实现
2020/08/10 Python
美国大尺码女装零售商:TORRID
2016/10/01 全球购物
波兰香水和化妆品购物网站:Notino.pl
2017/11/07 全球购物
联想澳大利亚官网:Lenovo Australia
2018/01/18 全球购物
Allsole美国/加拿大:英国一家专门出售品牌鞋子的网站
2018/10/21 全球购物
全球采购的街头服饰和帽子:Urban Excess
2020/10/28 全球购物
幼儿园中班下学期评语
2014/04/18 职场文书
诉讼授权委托书
2014/10/15 职场文书
一年级数学上册复习计划
2015/01/17 职场文书
暑期社会实践个人总结
2015/03/06 职场文书
看上去很美观后感
2015/06/10 职场文书
opencv-python图像配准(匹配和叠加)的实现
2021/06/23 Python
react 路由Link配置详解
2021/11/11 Javascript