Js/jquery implementation of the default display part of the text Click button to display all content _javascript tips

Source: Internet
Author: User
Copy Code code as follows:

<!doctype html>
<meta charset= "Utf-8" >
&LT;TITLE&GT;JS implementation of the default display part of the text, click the button to show all </title>
<body>
<div id= "box" >
After the 5-magnitude earthquake in <p>17, a microblog on Weibo, which predicted a 5-magnitude quake in Dali 3 days ago, has received a lot of attention from netizens. </p>
<p> Reporter contacted the micro-bobo, the blogger said, he is through the analysis of the Yunnan Provincial Seismological Bureau of the official website data from the forecast information. In response, the provincial Seismological Bureau responded that the seismological Bureau welcomed the non-governmental organizations and Seismological Bureau to carry out some academic discussions and exchanges, but it is illegal for non-governmental organizations to publish the earthquake prediction information publicly. </p>
<p><strong> civil institutions to predict earthquake by netizens sought </strong></p>
<p> "Within 72 hours of the black circle within the region will have a strong tremor, initially locked into a 5-magnitude earthquake, shallow source, the location is mainly in the northeast of Yunnan (Aftershock), Dali and Tengchong border areas, The border area between Yunnan Qiaojia County and Sichuan Ningnan County is the first line of the border region of Burma (caused by crustal movement). "Early in the early hours of April 14, micro-blog called the" Prediction Center, "the Netizen published in the micro-blog information on earthquake prediction in Yunnan. The microblog was forwarded 377 times by netizens. In the Dali 5 earthquake occurred, "small cluster" and other well-known netizens have forwarded the microblog. "Kneel down." "The well-known Netizen" small bundle "on the micro-blog said. </p>
<p> before the 5-magnitude earthquake, the "forecast Center" also released 3 micro-blogs of earthquake prediction, along with a map to predict earthquakes and an original data map of the Kunming seismic monitoring point. </p>
<p> this micro-win some netizens to the forwarding and praise. "Top, the prediction master in the civil, sustained attention." "orfila2011," the Netizen said in the commentary, "The Shaanxi Blue Sky Rescue Team" official micro-blog also said that the folk in the earthquake prediction work valuable experience methods, the relevant departments should give enough attention. </p>
<p><strong> forecast according to provincial Seismological Bureau data analysis to obtain </strong></p>
<p> The folk earthquake Prediction Micro-blog data show that the location is located in Hubei. "A long time ago, the microblog had been broadcasting earthquake prediction information on Weibo, but it has been a mystery," he said. "A netizen said. Yesterday, the reporter through the micro-blog contact This mysterious folk earthquake prediction agencies. </p>
<p> how did the nongovernmental institution get the earthquake prediction information? The micro-bobo to reporters that they are based on the Yunnan Seismological Bureau's official website of Yunnan seismic Data Sharing Center to query the Yunnan Province of some seismic monitoring data, analysis of the forecast information. Reporter found that the site can indeed be traced to the Yunnan seismic monitoring points of the pretreatment data. </p>
<p>> the micro-bobo also revealed that the analysis of these data requires a lot of expertise, but does not require instrumentation. For the civil agency to predict the power of earthquakes, the blogger said, "both material and spiritual." For other information, the blogger is unwilling to disclose more. </p>
<p><strong> Seismological Bureau: Folk limited to academic exchange </strong></p>
<p> "Earthquake prediction and forecast must comply with the corresponding laws and regulations." "Provincial Seismological bureau Director of Science and Technology, spokesman Zhang Junwei in an interview, said that according to our laws, any individual or non-governmental organizations to publish earthquake prediction information is illegal." </p>
<p> State "Regulations on earthquake prediction Management", the provinces, autonomous regions and municipalities directly under the long-term earthquake forecast, the earthquake medium-term forecast, short-term earthquake prediction and imminent prediction, by the provincial, autonomous region, the Municipal people's government issued. </p>
<p> for these folk earthquake prediction agencies, Zhang Junwei said, Yunnan Province Seismological Bureau has been concerned about and understanding. In addition to the release of the forecast information of the "forecast center", such a civil earthquake prediction agencies and people there are many. For a netizen to raise the government and people's cooperation and exchanges. Zhang Junwei said that at present he has not personally and these civil institutions have been contacted, but the seismological Bureau of these civil institutions have been inclusive and open attitude, welcomed its and seismological Bureau for academic discussion and exchange. </p>
<p> "But on the other hand, it is always illegal to publish information about earthquake prediction publicly. We also have a headache for the public organizations that publish information on earthquake prediction, fearing a negative impact on society. "Zhang Junwei that the public, netizens should not be taken to believe that non-governmental organizations issued earthquake prediction message." </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? "... Show all ":";
Btn.href = "###";
Btn.onclick = function () {
if (btn.innerhtml = = "...) Show All ") {
btn.innerhtml = "Close Up";
newbox.innerhtml = text;
}else{
btn.innerhtml = "... Show All ";
newbox.innerhtml = text.substring (0,200);
}
}
box.innerhtml = "";
Box.appendchild (Newbox);
Box.appendchild (BTN);
}
Show ();
</script>
</body>

jquery Plugin: jquery.limittext.js
Copy Code code as follows:

/**
* 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": "More", "Lesstext": " Hidden Parts ", FULLFN: function () {alert (" more ")}," LESSFN ": function () {alert (" Less ")}})
* 5.$ ("#limittext"). Limittext ({"Limit": 1, "Fill": "...", "Morefn": {"status": True}}). Limit ("all");
* @param {Object} opt
* {
* limit:30,//display text number
* Fill: ' ... '//Hide time Fill text
* morefn:{
* status:false,//whether to enable more
* MoreText: "(more)",//hidden parts of text when the text displayed
* Lesstext: "(Less)",//All text when the text displayed
* CssClass: "Limittextclass",//Enable more CSS class name for a label
* Lessfn:function () {},//callback function when text is less visible
* Fullfn:function () {}//callback function when text is more
* }
* @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;
}
});

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.