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 相关文章推荐
extjs 学习笔记(一) 一些基础知识
Oct 13 Javascript
Domino中运用jQuery读取视图内容的方法
Oct 21 Javascript
理运用命名空间让js不产生冲突避免全局变量的泛滥
Jun 15 Javascript
JS继承用法实例分析
Feb 05 Javascript
jQuery实现带延迟的二级tab切换下拉列表效果
Sep 01 Javascript
javascript正则表达式总结
Feb 29 Javascript
浅谈js中的三种继承方式及其优缺点
Aug 10 Javascript
基于JS实现9种不同的面包屑和分布式多步骤导航效果
Feb 21 Javascript
vue结合Echarts实现点击高亮效果的示例
Mar 17 Javascript
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
Apr 12 Javascript
Vue.Draggable拖拽功能的配置使用方法
Jul 29 Javascript
Element Notification通知的实现示例
Jul 27 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来写记数器(详细介绍)
2006/10/09 PHP
百度站点地图(百度sitemap)生成方法分享
2014/01/09 PHP
Laravel模板引擎Blade中section的一些标签的区别介绍
2015/02/10 PHP
PHP模拟asp.net的StringBuilder类实现方法
2015/08/08 PHP
必须收藏的23个php实用代码片段
2016/02/02 PHP
php解决和避免form表单重复提交的几种方法
2016/08/31 PHP
PHP用FTP类上传文件视频等的简单实现方法
2016/09/23 PHP
thinkPHP自定义类实现方法详解
2016/11/30 PHP
JavaScript DOM学习第四章 getElementByTagNames
2010/02/19 Javascript
JS生成随机字符串的多种方法
2014/06/10 Javascript
js调试系列 断点与动态调试[基础篇]
2014/06/18 Javascript
使用focus方法让光标默认停留在INPUT框
2014/07/29 Javascript
nodejs教程之入门
2014/11/21 NodeJs
使用JavaScript 编写简单计算器
2014/11/24 Javascript
js实现跨域访问的三种方法
2015/12/09 Javascript
Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
2016/02/02 Javascript
javascript DIV实现跟随鼠标移动
2020/03/19 Javascript
js实现获取两个日期之间所有日期的方法
2016/06/17 Javascript
使用JS代码实现点击按钮下载文件
2016/11/12 Javascript
layui中table表头样式修改方法
2018/08/15 Javascript
基于Node的Axure文件在线预览的实现代码
2019/08/28 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
2019/10/14 Javascript
Vue2.0 ES6语法降级ES5的操作
2020/10/30 Javascript
Python如何使用OS模块调用cmd
2020/02/27 Python
纯CSS3实现自定义Tooltip边框涂鸦风格的教程
2014/11/05 HTML / CSS
html2canvas生成清晰的图片实现打印的示例代码
2019/09/30 HTML / CSS
创造美妙香氛体验:Aera扩散器和香水
2018/11/25 全球购物
Happy Plugs官网:瑞典无线耳机品牌
2020/07/16 全球购物
递归计算如下递归函数的值(斐波拉契)
2012/02/04 面试题
公司出纳岗位职责
2013/12/07 职场文书
银行员工职业规划范文
2014/01/21 职场文书
工作违纪检讨书
2014/02/17 职场文书
公司踏青活动方案
2014/08/16 职场文书
党的群众路线教育实践活动心得体会(教师)
2014/10/31 职场文书
如何把新闻人物写得立体、鲜活?
2019/08/14 职场文书
Redis基本数据类型List常用操作命令
2022/06/01 Redis