基于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 相关文章推荐
指定js可访问其它域名的cookie的方法
Sep 18 Javascript
javascript真的不难-回顾一下基础知识
Jan 15 Javascript
根据经纬度计算地球上两点之间的距离js实现代码
Mar 05 Javascript
JavaScript使用replace函数替换字符串的方法
Apr 06 Javascript
浅谈利用JavaScript进行的DDoS攻击原理与防御
Jun 04 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
Sep 17 Javascript
学习JavaScript设计模式之模板方法模式
Jan 20 Javascript
网页中JS函数自动执行常用三种方法
Mar 30 Javascript
使用JS读取XML文件的方法
Nov 25 Javascript
JavaScript中为事件指定处理程序的五种方式分析
Jul 27 Javascript
Selenium执行Javascript脚本参数及返回值过程详解
Apr 01 Javascript
WebStorm无法正确识别Vue3组合式API的解决方案
Feb 18 Vue.js
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
DOTA2 6.87版本后新眼位详解攻略
2020/04/20 DOTA
用php获取本周,上周,本月,上月,本季度日期的代码
2009/08/05 PHP
php用header函数实现301跳转代码实例
2013/11/25 PHP
php禁止某ip或ip地址段访问的方法
2015/02/25 PHP
thinkPHP批量删除的实现方法分析
2016/11/09 PHP
PHP如何实现订单的延时处理详解
2017/12/30 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
插件:检测javascript的内存泄漏
2007/03/04 Javascript
JS模拟面向对象全解(一、类型及传递)
2011/07/13 Javascript
Javascript浅谈之引用类型
2013/12/18 Javascript
页面实时更新时间的JS实例代码
2013/12/18 Javascript
jquery创建表格(自动增加表格)代码分享
2013/12/25 Javascript
nw.js实现类似微信的聊天软件
2015/03/16 Javascript
轻量级javascript 框架Backbone使用指南
2015/07/24 Javascript
js使用cookie记录用户名的方法
2015/11/26 Javascript
关于动态执行代码(js的Eval)实例详解
2016/08/15 Javascript
基于jQuery实现Accordion手风琴自定义插件
2020/10/13 Javascript
Node.js数据库操作之查询MySQL数据库(二)
2017/03/04 Javascript
jQuery日程管理控件glDatePicker用法详解
2017/03/29 jQuery
react-router JS 控制路由跳转实例
2017/06/15 Javascript
vue component组件使用方法详解
2017/07/14 Javascript
js中apply与call简单用法详解
2017/11/06 Javascript
手动用webpack搭建第一个ReactApp的示例
2018/04/11 Javascript
JS简单判断是否在微信浏览器打开的方法示例
2019/01/08 Javascript
python图片验证码生成代码
2016/07/02 Python
Linux 下 Python 实现按任意键退出的实现方法
2016/09/25 Python
windows环境下tensorflow安装过程详解
2018/03/30 Python
python打包压缩、读取指定目录下的指定类型文件
2018/04/12 Python
python3 实现的对象与json相互转换操作示例
2019/08/17 Python
Python的in,is和id函数代码实例
2020/04/18 Python
HTML5之SVG 2D入门1—SVG(可缩放矢量图形)概述
2013/01/30 HTML / CSS
运动会广播稿200字
2014/01/15 职场文书
2014年清明节网上祭英烈寄语
2014/04/09 职场文书
电影复兴之路观后感
2015/06/02 职场文书
react中的DOM操作实现
2021/06/30 Javascript
详解jQuery的核心函数和事件处理
2022/02/18 jQuery