JS/jQuery实现默认显示部分文字点击按钮显示全部内容
更新时间：2013年05月13日 15:26:57 投稿：whsnow
默认显示部分文字，点击按钮显示全部，类似这样的功能在一些特殊的地方会见到吧，下面与大家分享下JS、jQuery如何实现，感兴趣的朋友可以参考下哈，希望对你有所帮助
复制代码 代码如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JS实现默认显示部分文字，点击按钮显示全部</title>
</head>
<body>
<div id="box">
</div>
<script>
function show(){
var box = document.getElementById("box");
var text = box.innerHTML;
var newBox = document.createElement("div");
var btn = document.createElement("a");
newBox.innerHTML = text.substring(0,200);
btn.innerHTML = text.length > 200 ? "...显示全部" : "";
btn.href = "###";
btn.onclick = function(){
if (btn.innerHTML == "...显示全部"){
btn.innerHTML = "收起";
newBox.innerHTML = text;
}else{
btn.innerHTML = "...显示全部";
newBox.innerHTML = text.substring(0,200);
}
}
box.innerHTML = "";
box.appendChild(newBox);
box.appendChild(btn);
}
show();
</script>
</body>
</html>
jQuery插件：jquery.limittext.js
复制代码 代码如下:
/**
* demo:
* 1.$("#limittext").limittext();
* 2.$("#limittext").limittext({"limit":1});
* 3.$("#limittext").limittext({"limit":1,"fill":"......","morefn":{"status":true}});
* 4.$("#limittext").limittext({"limit":1,"fill":"......","morefn":{"status":true,"moretext":"更多","lesstext":"隐藏部分","fullfn":function(){alert("more")},"lessfn":function(){alert("less")}}})
* 5.$("#limittext").limittext({"limit":1,"fill":"......","morefn":{"status":true}}).limit("all");
* @param {Object} opt
* {
* limit:30,//显示文字个数
* fill:'...'//隐藏时候填充的文字
* morefn:{
* status:false,//是否启用更多
* moretext: "(more)",//隐藏部分文字时候显示的文字
* lesstext:"(less)",//全部文字时候显示的文字
* cssclass:"limittextclass",//启用更多的A标签的CSS类名
* lessfn:function(){},//当文字为更少显示时候回调函数
* fullfn:function(){}//当文字为更多时候回调函数
* }
* @author Lonely
* @link http://www.liushan.net
* @Download:http://down.liehuo.net
* @version 0.2
*/
jQuery.fn.extend({
limittext:function(opt){
opt=$.extend({
"limit":30,
"fill":"..."
},opt);
opt.morefn=$.extend({
"status": false,
"moretext": "(more)",
"lesstext":"(less)",
"cssclass": "limittextclass",
"lessfn": function(){
},
"fullfn": function(){
}
},opt.morefn);
var othis=this;
var $this=$(othis);
var body=$this.data('body');
if(body==null){
body=$this.html();
$this.data('body',body);
}
var getbuttom=function(showtext){
return "<a href='javascript:;' class='"
+opt.morefn.cssclass+"'>"
+showtext
+"<a>";
}
this.limit=function(limit){
if(body.length<=limit||limit=='all'){
var showbody=body+(opt.morefn.status?getbuttom(opt.morefn.lesstext):"");
}else{
if(!opt.morefn.status){
var showbody=body.substring(0,limit)
+opt.fill;
}else{
var showbody=body.substring(0,limit)
+opt.fill
+getbuttom(opt.morefn.moretext);
}
}
$this.html(showbody);
}
this.limit(opt.limit);
$("."+opt.morefn.cssclass).live("click",function(){
if($(this).html()==opt.morefn.moretext){
showbody=body
+getbuttom(opt.morefn.lesstext);
$this.html(showbody);
opt.morefn.fullfn();
}else{
othis.limit(opt.limit);
opt.morefn.lessfn();
}
});
return this;
}
});
相关文章
这篇文章主要介绍了第二篇Bootstrap起步的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-06-06
这篇文章主要介绍了JS中常用的正则表达式，都是我日常收集整理的，包括电话验证，数字验证，车牌号码验证，身份证号验证包括15位18位身份证验证，非常不错，具有参考借鉴价值，感兴趣的朋友一起看看吧2016-09-09
按照插入的图片的尺寸来判断图片是横图还是竖图。然后判断过后给予不同的展示方式，下面为大家介绍下js和jquery如何获取图片真实的宽度和高度2014-09-09
网上抓的一个特效...2007-05-05
通过mouseover，mouseout来触发事件，才判断鼠标是否在该区域。 但是这种方法的局限性就是，必须要触发mouseover，或mouseout，mouseleave事件才能知道2013-11-11
CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
最近用CodeMirror2作后台的模板编辑器，在IE9、Firefox下面没有问题。到了IE7、IE8下面，textarea里面的代码就显示不出来了。搜索了好多，终于找到原因2012-03-03
本文将使用React+Three.js技术栈，制作一个专属的3D奖牌页面，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起动手试一试2022-01-01
下面小编就为大家带来一篇js中获取键盘事件的简单实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
本文介绍了如何快速定位SQL性能问题的方法,包括找出执行时间最长的SQL、同类型并发SQL、阻塞和被阻塞SQL、锁等待和死锁,以及慢日志分析,需要的的朋友一起看看吧2017-04-04
今天在浏览网页时无意中发现了这段JS劫持搜索引擎代码。劫持搜索引擎正常搜索过来的流量，这是黑帽seo常用的劫持方法。特意解密出来供大家了解其劫持原理。感兴趣的朋友一起学习学习吧2015-09-09
最新评论