基于Jquery的文字自动截取（提供源代码）

插件需求（功能需要）
一个插件就是完成一个特定的功能，我们在动手制作一个插件时应该确定该插件开发完成后应具备哪些功能供我们使用。
在某天早上，按模式的完成开机、连接数据库、开启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并运行吧。您的第二个插件就诞生咯。

赞 (0)

相关推荐

  • jQuery实现图片文字淡入淡出效果

    jQuery实现图片文字淡入淡出效果

    本实例主要讲解了jquery仿新浪微博图片文字列表上下淡进淡出间歇上下滚动效果,分享给大家供大家参考,具体内容如下 1.效果及功能说明 仿新浪微博图片文字列表上下淡进淡出间歇上下滚动 2.实现原理 首先要设定div内只能显示4个图片那么多出来的图片会自动隐藏然后在给图片添加一个动画的事件让他们可以滚动的播放出来上下滚动效果播放就是li标签里面的内容图片和文字把每一个li看成一个整体在滚动播放的时候进入div内的显示出来在最后离开div的时候隐藏在给整个动画效果设定一个时间就可以完整的运行. 3.

  • 多种JQuery循环滚动文字图片效果代码

    多种JQuery循环滚动文字图片效果代码

    自己模仿JQ插件的写法写了一个循环滚动列表插件,支持自定义上.下.左.右四个方向,支持平滑滚动或者间断滚动两种方式,都是通过参数设置.JQ里面有些重复的地方,暂时没想到更好的方法去精简.不过效果还是可以的,如下(效果图上传后都加速了,实际效果比这个要慢很多): html代码如下: <!doctype html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <

  • jquery实现简单文字提示效果

    本文实例讲述了jquery实现简单文字提示效果.分享给大家供大家参考,具体如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>jquery实现简单文字提示</title> &l

  • jquery实现点击查看更多内容控制段落文字展开折叠效果

    jquery实现点击查看更多内容控制段落文字展开折叠效果

    本文实例讲述了jquery实现点击查看更多内容控制段落文字展开折叠效果.分享给大家供大家参考.具体如下: 这里使用jQuery实现的文字展开折叠效果,点击文字后文字内容会完整的显示出来,控制段落来显示文字,不需要的时候,可以再次点击后将内容折叠起来,也就是隐藏了一部分内容.点击查看更多的功能,在很多大网站都有在用,像一些电影简介.产品介绍有时候为了页面的布局效果,常常默认是隐藏了一部分,用户想看的时候可以点击后展开. 运行效果如下图所示: 具体代码如下: <!DOCTYPE html> <

  • jQuery插件EnPlaceholder实现输入框提示文字

    用法: 首先在head中分别引入jQuery及本插件 <script type="text/javascript" src="jquery-1.7.2.min.js">script> <script type="text/javascript" src="jquery.enplaceholder.js">script> 然后就可以调用鸟 //通过value模拟placeholder $('i

  • 基于jquery的jqDnR拖拽溢出的修改

    复制代码 代码如下: /* * jqDnR - Minimalistic Drag'n'Resize for jQuery. * * Copyright (c) 2007 Brice Burgess <bhb@iceburg.net>, http://www.iceburg.net/ * Licensed under the MIT License: * http://www.opensource.org/licenses/mit-license.php * * $Version: 2007.

  • JS/jQuery实现默认显示部分文字点击按钮显示全部内容

    复制代码 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>JS实现默认显示部分文字,点击按钮显示全部</title> </head> <body> <div id="box"> <h2>民间机构提前3天预报大理地震 地震局称违法</h2> <p&g

  • jQuery实现控制文字内容溢出用省略号(…)表示的方法

    本文实例讲述了jQuery实现控制文字内容溢出用省略号(-)表示的方法.分享给大家供大家参考,具体如下: jQuery限制字符字数的方法 $(function(){ //限制字符个数 $(".text").each(function(){ var maxwidth=23; if($(this).text().length>maxwidth){ $(this).text($(this).text().substring(0,maxwidth)); $(this).html($(th

  • Jquery截取中文字符串的实现代码

    复制代码 代码如下: function cut_str($sourcestr,$cutlength) { $returnstr=''; $i=0; $n=0; $str_length=strlen($sourcestr);//字符串的字节数 while (($n<$cutlength) and ($i<=$str_length)) { $temp_str=substr($sourcestr,$i,1); $ascnum=Ord($temp_str);//得到字符串中第$i位字符的ascii码

  • 基于Jquery的文字自动截取（提供源代码）

    插件需求(功能需要) 一个插件就是完成一个特定的功能,我们在动手制作一个插件时应该确定该插件开发完成后应具备哪些功能供我们使用. 在某天早上,按模式的完成开机.连接数据库.开启VS开发环境.调试程序.程序跑起了,可是页面中的有段内容超过了页面所容许的范围.这还不容易哟,SubString呗, 对,这的确是个好法子,能解决这类问题,但当页面需要被处理过后的内容进行交互,这种方法难免有点不适应了,那么我们就使用Jquery开发一个满足该需求的插件吧: 开发须知 如果您对使用Jquery开发插件的流程

  • 基于jquery实现的自动补全功能

    本文实例讲述了基于jquery实现的自动补全功能的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: $(function() {     // 自动补全     var maxcount = 0;// 表示他最大的值     var thisCount =0;// 初始化他框的位置     $("body").prepend("<div style='width:120px; display:none; background:#FFFFFF; pos

  • jQuery实现文字自动横移

    jQuery实现文字自动横移

    效果图: 实现文字自动横移 <style type="text/css"> #demo {overflow:scroll;width:740px; } #indemo { float: left; width: 800%;} #demo1 { float: left; } #demo2 { float: left;margin-left:7px;} </style> <script src="bootstrap-3.3.5-dist/js/jqu

  • 基于jQuery的试卷自动排版系统实现代码

    根据提供的试卷题目(是一个干净的只有"数据"的HTML网页)生成一份多页的试卷,用户能执行翻页.具有答题时间限制,展示给用户的试卷中题目需要占用尽量少的空间(比如选择题中把两条较短的选项由两行合并到一行).同一道题目不要跨页面显示以方便答题者,管理员能够改变试卷的样式(字体.颜色.行距.页面边距,像字处理软件一样--),题目之间可以插入一些说明性的文字(比如告知答题者作答的须知等等).题目提干.选择题的选项.说明文字可以包含多媒体信息(文字.图片.列表.表格.视频等等--).选择题选项

  • 基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)

    兼容各浏览器的文本行高 复制代码 代码如下: (function($){ $.fn.extend({ RollTitle: function(opt,callback){ if(!opt) var opt={}; var _this = this; _this.timer = null; _this.lineH = _this.find("li:first").height(); _this.line=opt.line?parseInt(opt.line,15):parseInt(_t

  • 11个用于提高排版水平的基于jquery的文字效果插件

    11个用于提高排版水平的基于jquery的文字效果插件

    排版是在网页设计当中的一个重要的元素,实现一个高层次的排版风格可以让你的网页设计看起来更令人叹为观止,当你看到一些非同寻常的排版样式,你很好奇这些绚丽的色彩文字搭配效果是如何实现的,往往我们第一印象是使用CSS实现的,可是对于自己来说感到又有一定的难度,如今的瀑布流效果,大背景缩略图效果,我们其中只关注了图片绚丽的布局,其实还有一个细节就是文字色彩排版的实现,这个其实是主要的,有一些专门用于这些效果的jQuery插件,你可以实现卓越的排版设计在您的网站上.我们都知道,在传统的排版当中使用DIV+

  • 基于jquery的文字向上跑动类似跑马灯的效果

    想实现一个类似跑马灯的效果,发现跑马灯有空格.效果也不美观,于是用jquery写了个 页面代码 <div class="recordList"> <ul class="tpl-rotate-recordList" style="margin-top: 0px;"> <li class="tpl-rotate-recordList-item"> 恭喜187****5204获得1000RBM &

  • autoPlay 基于jquery的图片自动播放效果

    autoPlay 基于jquery的图片自动播放效果

    效果图:实现代码: 复制代码 代码如下: <html> <head> <title>Jquery 自动轮播效果</title> <script src="js/jquery-1.6.2.min.js" type="text/javascript"></script> <style> .spanhide{display: none;} #top a:hover{color: red;}

  • 基于jQuery实现照片墙自动播放特效

    基于jQuery实现照片墙自动播放特效

    一个动态展示图片的页面: 功能:定时从后台取数据,进行页面图片追加.对已经在页面中的图片,进行放大缩小动画展示.目前我们用于微信新关注用户头像展示. <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1

  • 基于jQuery实现搜索关键字自动匹配功能

    基于jQuery实现搜索关键字自动匹配功能

    今天我们就一起来看一个简单的基于jquery的关键字自动匹配的例子,希望文章能够对各位有帮助. 例子一 在项目中,有时候需要用户选择城市,但是城市太多,用户选择起来不太方便,所以提供了一个用户可以通过输入框输入城市的汉字或者拼音简写.结果示意图如下: 当输入拼音后结果示意图如下: 实现代码如下: <html><head><title>实时查询城市通过姓名或拼音简写</title></head><meta charset = "ut

随机推荐