基于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判断窗口是否最小化的代码(跨浏览器)
Aug 01 Javascript
javascript 实现键盘上下左右功能的小例子
Sep 15 Javascript
使用jQuery和PHP实现类似360功能开关效果
Feb 12 Javascript
angularjs表格分页功能详解
Jan 21 Javascript
动态加载js文件简单示例
Apr 21 Javascript
bootstrap多种样式进度条展示
Dec 20 Javascript
浅谈javascript中的事件冒泡和事件捕获
Dec 28 Javascript
JS路由跳转的简单实现代码
Sep 21 Javascript
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
Nov 28 Javascript
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
Oct 29 Javascript
Vue 实现前进刷新后退不刷新的效果
Jun 14 Javascript
TypeScript之调用栈的实现
Dec 31 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
通过JavaScript或PHP检测Android设备的代码
2011/03/09 PHP
Zend Framework教程之模型Model用法简单实例
2016/03/04 PHP
jQuery入门知识简介
2010/03/04 Javascript
基于JQuery的列表拖动排序实现代码
2013/10/01 Javascript
关于页面嵌入swf覆盖div层的问题的解决方法
2014/02/11 Javascript
JavaScript实现Java中StringBuffer的方法
2015/02/09 Javascript
浅谈jQuery.easyui的datebox格式化时间
2015/06/25 Javascript
JavaScript统计字符串中每个字符出现次数完整实例
2016/01/28 Javascript
Javascript中call,apply,bind方法的详解与总结
2016/12/12 Javascript
node.js实现复制文本到剪切板的功能
2017/01/23 Javascript
详解利用jsx写vue组件的方法示例
2017/07/17 Javascript
Form表单上传文件(type="file")的使用
2017/08/03 Javascript
JS实现十字坐标跟随鼠标效果
2017/12/25 Javascript
JS高级技巧(简洁版)
2018/07/29 Javascript
浅谈JS中this在各个场景下的指向
2019/08/14 Javascript
微信小程序官方动态自定义底部tabBar的例子
2019/09/04 Javascript
js实现三角形粒子运动
2020/09/22 Javascript
python将html转成PDF的实现代码(包含中文)
2013/03/04 Python
通过5个知识点轻松搞定Python的作用域
2016/09/09 Python
Python集中化管理平台Ansible介绍与YAML简介
2019/06/12 Python
python3.6 如何将list存入txt后再读出list的方法
2019/07/02 Python
python  ceiling divide 除法向上取整(或小数向上取整)的实例
2019/12/27 Python
HTML5拖放功能_动力节点Java学院整理
2017/07/13 HTML / CSS
Melissa鞋马来西亚官方网站:MDreams马来西亚
2018/04/05 全球购物
泰国健康和美容服务预订网站:GoWabi
2019/06/03 全球购物
学习委员自我鉴定
2014/01/13 职场文书
自行车租赁公司创业计划书
2014/01/28 职场文书
数学检讨书1000字
2014/02/24 职场文书
班主任新年寄语
2014/04/04 职场文书
初中生操行评语大全
2014/04/24 职场文书
查摆问题自查报告范文
2014/10/13 职场文书
党员评议表自我评价范文
2014/10/20 职场文书
交通肇事罪辩护词
2015/05/21 职场文书
导游词之云南-元阳梯田
2019/10/08 职场文书
Python加密技术之RSA加密解密的实现
2022/04/08 Python
使用CSS实现按钮边缘跑马灯动画
2023/05/07 HTML / CSS