快捷導(dǎo)航

JS/jQuery實現(xiàn)默認(rèn)顯示部分文字點擊按鈕顯示全部內(nèi)容

更新時間：2013年05月13日 15:26:57 投稿：whsnow

默認(rèn)顯示部分文字，點擊按鈕顯示全部，類似這樣的功能在一些特殊的地方會見到吧，下面與大家分享下JS、jQuery如何實現(xiàn)，感興趣的朋友可以參考下哈，希望對你有所幫助

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JS實現(xiàn)默認(rèn)顯示部分文字，點擊按鈕顯示全部</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

復(fù)制代碼代碼如下:

/**
* 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,//顯示文字個數(shù)
* fill:'...'//隱藏時候填充的文字
* morefn:{
* status:false,//是否啟用更多
* moretext: "(more)",//隱藏部分文字時候顯示的文字
* lesstext:"(less)",//全部文字時候顯示的文字
* cssclass:"limittextclass",//啟用更多的A標(biāo)簽的CSS類名
* lessfn:function(){},//當(dāng)文字為更少顯示時候回調(diào)函數(shù)
* fullfn:function(){}//當(dāng)文字為更多時候回調(diào)函數(shù)
* }
* @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;
}
});

相關(guān)文章

js中this的指向問題歸納總結(jié)
最近發(fā)現(xiàn)在對JS的學(xué)習(xí)中有很多朋友對this的指向問題還是有很大的誤區(qū)或者說只是大致了解,但是一旦遇到復(fù)雜的情況就會因為this指向問題而引發(fā)各種bug。所以這篇文章主要給大家介紹了關(guān)于js中this的指向問題的相關(guān)資料，需要的朋友可以參考下
2018-11-11
SyntaxHighlighter代碼加色使用方法
原名：SyntaxHighlighter，是一款用于web頁面的代碼著色工具，可以用來著色多種語言，可以是HTML,CSS,Javascript,還可以是C,JAVA等編程語言。最早見于Yahoo的YUI，當(dāng)時還屬于自由軟件，最近打開官方網(wǎng)站發(fā)現(xiàn)已被goolge收編。
2008-09-09
微信小程序?qū)崿F(xiàn)云開發(fā)上傳文件、圖片功能
在使用小程序的過程中,在編輯個人資料時,通常會面臨上傳頭像、上傳背景圖片的情況,而這個開發(fā)過程需要怎樣實現(xiàn)呢?這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)云開發(fā)上傳文件、圖片功能的相關(guān)資料,需要的朋友可以參考下
2022-12-12
這篇文章主要介紹了微信小程序如何利用getCurrentPages進(jìn)行頁面?zhèn)髦?文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2019-07-07