基于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 相关文章推荐
基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍
May 07 Javascript
基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)
Nov 24 Javascript
微信小程序 教程之小程序配置
Oct 17 Javascript
JS中位置与大小的获取方法
Nov 22 Javascript
jQuery弹出层插件popShow用法示例
Jan 23 Javascript
javascript 中Cookie读、写与删除操作
Mar 29 Javascript
修改vue+webpack run build的路径方法
Sep 01 Javascript
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
Oct 26 Javascript
layui添加动态菜单与选项卡 AJAX请求的例子
Sep 25 Javascript
vue 实现LED数字时钟效果(开箱即用)
Dec 08 Javascript
Vue 解决路由过渡动画抖动问题(实例详解)
Jan 05 Javascript
node使用async_hooks模块进行请求追踪
Jan 28 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
【动漫杂谈】关于《请在T台上微笑》
2020/03/03 日漫
php中一个完整表单处理实现代码
2011/11/10 PHP
PHP+Mysql+jQuery实现发布微博程序 php篇
2015/10/15 PHP
Laravel程序架构设计思路之使用动作类
2018/06/07 PHP
新老版本juqery获取radio对象的方法
2010/03/01 Javascript
Javascript图像处理思路及实现代码
2012/12/25 Javascript
avascript中的自执行匿名函数应用示例
2014/09/15 Javascript
JavaScript操作DOM元素的childNodes和children区别
2015/04/01 Javascript
javascript实现英文首字母大写
2015/04/23 Javascript
jQuery on()绑定动态元素出现的问题小结
2016/02/19 Javascript
JS从数组中随机取出几个数组元素的方法
2016/08/02 Javascript
Vuex之理解Getters的用法实例
2017/04/19 Javascript
jQuery ajax调用webservice注意事项
2017/10/08 jQuery
javaScript字符串工具类StringUtils详解
2017/12/08 Javascript
详解@angular/cli 改变默认启动端口两种方式
2018/11/29 Javascript
webpack file-loader和url-loader的区别
2019/01/15 Javascript
Vue源码探究之虚拟节点的实现
2019/04/17 Javascript
使用RxJS更优雅地进行定时请求详析
2019/06/02 Javascript
JS实现点击掉落特效
2021/01/29 Javascript
50行代码实现贪吃蛇(具体思路及代码)
2013/04/27 Python
Python中shutil模块的常用文件操作函数用法示例
2016/07/05 Python
Python3调用微信企业号API发送文本消息代码示例
2017/11/10 Python
python3.7将代码打包成exe程序并添加图标的方法
2019/10/11 Python
Python坐标轴操作及设置代码实例
2020/06/04 Python
Python3利用scapy局域网实现自动多线程arp扫描功能
2021/01/21 Python
如何用python爬取微博热搜数据并保存
2021/02/20 Python
ECCO爱步官方旗舰店:丹麦鞋履品牌
2018/01/02 全球购物
竞聘医务工作人员的自我评价分享
2013/11/04 职场文书
美德好少年事迹材料
2014/01/19 职场文书
《童年》教学反思
2014/02/18 职场文书
企业办公室主任岗位职责
2014/02/19 职场文书
酒店爱岗敬业演讲稿
2014/09/02 职场文书
天坛导游词
2015/02/02 职场文书
西柏坡导游词
2015/02/05 职场文书
少先队工作总结2015
2015/05/13 职场文书
以下牛机,你有几个
2022/04/05 无线电