基于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实现无刷新更新数据的详细步骤 asp
Dec 26 Javascript
多个表单中如何获得这个文件上传的网址实现js代码
Mar 25 Javascript
jquery ajaxSubmit 异步提交的简单实现
Feb 28 Javascript
JS实现的新浪微博大厅文字内容滚动效果代码
Nov 05 Javascript
微信小程序 获取当前地理位置和经纬度实例代码
Dec 05 Javascript
详解angular中如何监控dom渲染完毕
Jan 03 Javascript
详解使用nvm管理多版本node的方法
Aug 30 Javascript
angularJS1 url中携带参数的获取方法
Oct 09 Javascript
详解一个基于react+webpack的多页面应用配置
Jan 21 Javascript
如何为你的JavaScript代码日志着色详解
Apr 08 Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 jQuery
微信小程序获取当前时间及星期几的实例代码
Sep 20 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-cli简介(不会Shell语言一样用Shell)
2013/06/03 PHP
php使用ereg验证文件上传的方法
2014/12/16 PHP
PHP实现判断数组是一维、二维或几维的方法
2017/02/06 PHP
Yii框架通过请求组件处理get,post请求的方法分析
2019/09/03 PHP
JavaScript执行效率与性能提升方案
2012/12/21 Javascript
jQuery性能优化28条建议你值得借鉴
2013/02/16 Javascript
返回上一页并自动刷新的JavaScript代码
2014/02/19 Javascript
JavaScript验证图片类型(扩展名)的函数分享
2014/05/05 Javascript
javascript关于继承的用法汇总
2014/12/20 Javascript
javascript实现数组中的内容随机输出
2015/08/11 Javascript
js实现具有高亮显示效果的多级菜单代码
2015/09/01 Javascript
jQuery实现div随意拖动的实例代码(通用代码)
2016/01/28 Javascript
Angular中的$watch方法详解
2017/09/18 Javascript
jQuery实现遍历XML节点和属性的方法示例
2018/04/29 jQuery
详解vue-cli中模拟数据的两种方法
2018/07/03 Javascript
Vue axios设置访问基础路径方法
2018/09/19 Javascript
vue中的适配px2rem示例代码
2018/11/19 Javascript
vue-cli 3 全局过滤器的实例代码详解
2019/06/03 Javascript
vuex管理状态 刷新页面保持不被清空的解决方案
2019/11/11 Javascript
python3.3实现乘法表示例
2014/02/07 Python
python基础教程之对象和类的实际运用
2014/08/29 Python
跟老齐学Python之有点简约的元组
2014/09/24 Python
python模块之sys模块和序列化模块(实例讲解)
2017/09/13 Python
Python利用sqlacodegen自动生成ORM实体类示例
2019/06/04 Python
关于 Python opencv 使用中的 ValueError: too many values to unpack
2019/06/28 Python
PyQT5 实现快捷键复制表格数据的方法示例
2020/06/19 Python
Django:使用filter的pk进行多值查询操作
2020/07/15 Python
Web页面中八种创建多列等高(等高列布局)的实现技术
2012/12/24 HTML / CSS
宝拉珍选美国官网:Paula’s Choice美国
2018/01/07 全球购物
The North Face北面德国官网:美国著名户外品牌
2018/12/12 全球购物
泰国排名第一的家居用品中心:HomePro
2020/11/18 全球购物
ktv好的活动方案
2014/08/15 职场文书
八一建军节慰问信
2015/02/14 职场文书
车间统计员岗位职责
2015/04/14 职场文书
幼儿园小班教师随笔
2015/08/14 职场文书
【海涛教你打DOTA】死灵飞龙第一视角解说
2022/04/01 DOTA