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 相关文章推荐
jQuery实现的导航条切换可显示隐藏
Oct 22 Javascript
jQuery实现移动端滑块拖动选择数字效果
Dec 24 Javascript
js导出excel文件的简洁方法(推荐)
Nov 02 Javascript
jQuery实现两个select控件的互移操作
Dec 22 Javascript
JQuery中Ajax的操作完整例子
Mar 07 Javascript
jquery实现tab键进行选择后enter键触发click行为
Mar 29 jQuery
vue父组件通过props如何向子组件传递方法详解
Aug 16 Javascript
JavaScript中EventLoop介绍
Jan 22 Javascript
浅谈在vue中使用mint-ui swipe遇到的问题
Sep 27 Javascript
vue组件内部引入外部js文件的方法
Jan 18 Javascript
使用node-media-server搭建一个简易的流媒体服务器
Jan 20 Javascript
动态实现element ui的el-table某列数据不同样式的示例
Jan 22 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
php preg_filter执行一个正则表达式搜索和替换
2012/02/27 PHP
php session_start()出错原因分析及解决方法
2013/10/28 PHP
PHP改进计算字符串相似度的函数similar_text()、levenshtein()
2014/10/27 PHP
PHP生成条形图的方法
2014/12/10 PHP
eclipse php wamp配置教程
2016/06/30 PHP
PHP基本语法实例总结
2016/09/09 PHP
在 Laravel 项目中使用 webpack-encore的方法
2019/07/21 PHP
Javascript实现DIV滚动自动滚动到底部的代码
2012/03/01 Javascript
深入document.write()与HTML4.01的非成对标签的详解
2013/05/08 Javascript
js遍历、动态的添加数据的小例子
2013/06/22 Javascript
javascript分页代码实例分享(js分页)
2013/12/13 Javascript
JavaScript函数的4种调用方法详解
2014/04/22 Javascript
基于js与flash实现的网站flv视频播放插件代码
2014/10/14 Javascript
JavaScript使用ActiveXObject访问Access和SQL Server数据库
2015/04/02 Javascript
探析浏览器执行JavaScript脚本加载与代码执行顺序
2016/01/12 Javascript
全面解析JavaScript里的循环方法之forEach,for-in,for-of
2020/04/20 Javascript
Google 地图获取API Key详细教程
2016/08/06 Javascript
前端js实现文件的断点续传 后端PHP文件接收
2016/10/14 Javascript
详谈jQuery.load()和Jsp的include的区别
2017/04/12 jQuery
详解微信小程序中组件通讯
2018/10/30 Javascript
jquery实现有过渡效果的tab切换
2020/07/17 jQuery
python中使用urllib2获取http请求状态码的代码例子
2014/07/07 Python
使用Python实现简单的服务器功能
2017/08/25 Python
Python系统监控模块psutil功能与经典用法分析
2018/05/24 Python
Python简单实现网页内容抓取功能示例
2018/06/07 Python
PyTorch基本数据类型(一)
2019/05/22 Python
Pandas库之DataFrame使用的学习笔记
2019/06/21 Python
将自己的数据集制作成TFRecord格式教程
2020/02/17 Python
python编程进阶之类和对象用法实例分析
2020/02/21 Python
Python 跨.py文件调用自定义函数说明
2020/06/01 Python
python3中数组逆序输出方法
2020/12/01 Python
澳大利亚票务和娱乐市场领导者:Ticketmaster
2017/03/03 全球购物
中西医结合临床医学专业大学生自荐信
2013/09/28 职场文书
竞选班长自荐书范文
2014/03/09 职场文书
雷锋精神演讲稿
2014/05/13 职场文书
MySQL 条件查询的常用操作
2022/04/28 MySQL