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


Posted in Javascript onMay 13, 2013
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>JS实现默认显示部分文字,点击按钮显示全部</title> 
</head> 
<body> 
<div id="box"> 
<h2>民间机构提前3天预报大理地震 地震局称违法</h2> 
<p>17日大理州5.0级地震发生之后,在微博上一条曾在3天前就预测大理将发生5.0级地震的微博受到了很多网友的关注。</p> 
<p>记者联系上了微博博主,该博主表示,他是通过分析云南省地震局官方网站的数据得出的预报信息。对此,省地震局回应表示,地震局欢迎民间机构与地震局进行一些学术上的探讨和交流,但民间机构对外公开发布地震预报信息是违法的。</p> 
<p><strong>民间机构预报地震受网友追捧</strong></p> 
<p>“预计72小时内黑色圈圈内的地区都将有一次较强震感,初步锁定为5级地震,浅源,发生的位置主要是云南东北昭通(余震)、大理西南部和腾冲交界区域、和缅甸交界区域一线(地壳运动所致)云南巧家县和四川宁南县交界区域。”早在4月14日凌晨时分,微博名为“预报中心”的网民就在微博上发布了云南地震预报信息。该微博被网友转发了377次。在大理5.0级地震发生后,“小丛”等知名网友都转发了该微博。“跪了。”知名网友“小丛”在微博上表示。</p> 
<p>在大理5.0级地震发生之前,“预报中心”还陆续发布了3条地震预报的微博,并附有预报将发生地震的地图,及一张昆明地震监测点的原始数据图。</p> 
<p>这一微博得到了一些网友的转发及称赞。“顶,预报高手在民间,持续关注中。”网民“orfila2011”在评论中表示;“陕西蓝天救援队”官方微博也表示,民间在地震预测工作中有价值的经验方法,有关部门应给予足够的重视。</p> 
<p><strong>预报根据省地震局数据分析得出</strong></p> 
<p>该民间地震预报微博的资料显示,所在地位于湖北。“很久以前,该微博就已经在微博上播报地震预测信息,但一直很神秘。”有网友表示。昨日,记者通过微博联系上这一神秘民间地震预报机构。</p> 
<p>该民间机构是怎样获得地震预报信息的?该微博博主向记者表示,他们是根据云南省地震局官网云南地震数据共享中心查询到了云南省内的一些地震监测数据,分析得出的预报信息。记者发现,确实可以通过该网站查到云南各地震监测点的预处理数据。</p> 
<p>>该微博博主还透露,分析这些相关数据需要很多专业知识,但并不需要仪器。对于民间机构预报地震的动力,该博主表示“物质和精神都有”。对于其他信息,该博主不愿意更多透露。</p> 
<p><strong>省地震局:民间仅限于学术交流</strong></p> 
<p>“地震预测预报必须遵守相应的法律法规。”省地震局科学技术处处长、新闻发言人张俊伟在接受记者采访时表示,根据我国法律,任何个人或民间机构对外发布地震预报信息都是违法行为。</p> 
<p>国家《地震预报管理条例》规定,省、自治区、直辖市的地震长期预报、地震中期预报、地震短期预报和临震预报,由省、自治区、直辖市人民政府发布。</p> 
<p>对于这些民间的地震预报机构,张俊伟表示,云南省地震局一直都有所关注和了解。除了本次发布预报信息的“预报中心”外,这样的民间地震预报机构及人士还有很多。对于有网友提出能否加强官与民的合作交流。张俊伟表示,目前他个人并没有与这些民间机构取得过联系,但地震局对这些民间机构一直抱着包容与开放的态度,欢迎其与地震局进行学术探讨和交流。</p> 
<p>“但另一方面,对外公开发布地震预报信息始终是违法的。我们对这些公开发布地震预报信息的民间机构也很头痛,担心给社会带来不良的影响。”张俊伟认为,市民、网友不应采信民间机构发布的地震预报消息。</p> 
</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; 
} 
});
Javascript 相关文章推荐
javascript 中对象的继承〔转贴〕
Jan 22 Javascript
javascript 面向对象编程  function是方法(函数)
Sep 17 Javascript
基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
Jun 14 Javascript
Javascript对象中关于setTimeout和setInterval的this介绍
Jul 21 Javascript
一个html5播放视频的video控件只支持android的默认格式mp4和3gp
May 08 Javascript
IE下使用jQuery重置iframe地址时内存泄露问题解决办法
Feb 05 Javascript
使用控制台破解百小度一个月只准改一次名字
Aug 13 Javascript
Node.js实用代码段之获取Buffer对象字节长度
Mar 17 Javascript
js小数计算小数点后显示多位小数的实现方法
May 30 Javascript
Javascript快速实现浏览器系统通知
Aug 26 Javascript
基于javascript实现碰撞检测
Mar 12 Javascript
JavaScript ECMA-262-3 深入解析(一):执行上下文实例分析
Apr 25 Javascript
JS 加入收藏夹的代码(主流浏览器通用)
May 13 #Javascript
jQuery实现长文字部分显示代码
May 13 #Javascript
jq选项卡鼠标延迟的插件实例
May 13 #Javascript
jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法
May 13 #Javascript
怎么清空javascript数组
May 11 #Javascript
JS子父窗口互相操作取值赋值的方法介绍
May 11 #Javascript
js运动框架_包括图片的淡入淡出效果
May 11 #Javascript
You might like
phpmyadmin安装时提示:Warning: require_once(./libraries/common.inc.php)错误解决办法
2011/08/18 PHP
PHP与MongoDB简介|安全|M+PHP应用实例详解
2013/06/17 PHP
php防止sql注入代码实例
2013/12/18 PHP
IE8下String的Trim()方法失效的解决方法
2013/11/08 Javascript
jQuery拖拽 &amp; 弹出层 介绍与示例
2013/12/27 Javascript
JS对象与json字符串格式转换实例
2014/10/28 Javascript
AngularJS入门教程之AngularJS指令
2016/04/18 Javascript
利用JQuery直接调用asp.net后台的简单方法
2016/10/27 Javascript
基于JavaScript实现屏幕滚动效果
2017/01/18 Javascript
Ionic 2 实现列表滑动删除按钮的方法
2017/01/22 Javascript
微信小程序页面传多个参数跳转页面的实现方法
2019/05/17 Javascript
jquery.pager.js分页实现详解
2019/07/29 jQuery
JS用最简单的方法实现四舍五入
2019/08/27 Javascript
IDEA安装vue插件图文详解
2019/09/26 Javascript
js刷新页面location.reload()用法详解
2019/12/09 Javascript
python使用正则表达式的search()函数实现指定位置搜索功能
2017/11/10 Python
python3爬取淘宝信息代码分析
2018/02/10 Python
python实现对指定输入的字符串逆序输出的6种方法
2018/04/26 Python
对python中的try、except、finally 执行顺序详解
2019/02/18 Python
python requests库爬取豆瓣电视剧数据并保存到本地详解
2019/08/10 Python
python实现opencv+scoket网络实时图传
2020/03/20 Python
python实现秒杀商品的微信自动提醒功能(代码详解)
2020/04/27 Python
python3实现语音转文字(语音识别)和文字转语音(语音合成)
2020/10/14 Python
python+selenium+chrome实现淘宝购物车秒杀自动结算
2021/01/07 Python
css3的transition效果和transfor效果示例介绍
2013/10/30 HTML / CSS
详解HTML5表单新增属性
2016/12/21 HTML / CSS
HTML5 source标签:媒介元素定义媒介资源
2018/01/29 HTML / CSS
董事长助理工作职责范本
2014/07/01 职场文书
推普周国旗下讲话稿
2014/09/21 职场文书
个人查摆剖析材料
2014/10/16 职场文书
健康状况证明模板
2014/10/23 职场文书
六一文艺汇演开幕词
2015/01/29 职场文书
党支部培养考察意见
2015/06/02 职场文书
Nginx访问日志及错误日志参数说明
2021/03/31 Servers
JavaScript实现简单拖拽效果
2021/09/15 Javascript
在js中修改html body的样式
2021/11/11 Javascript