Select the following Topics you are interested
As being asked by Rob Potschka from an Email for the way of extending Table addrow plugin to support Brian Reindel's Truncate plugin. I have reviewed Brian's code to see if there is any quick way for such a fix. It seemed to me that it involves a large amount of code to be change in order to make possible adaptation. So I start from scratch to write a new plugin that similar to what Brian's done that have the functionality of keeping the HTML during truncation and keep all the essential parameters when it is cloned to another table row.
Truncate text to at least 40 characters, keeping all the essential HTML tag, using (expanding) as expanding text, no text label for contracting text
oo. Etiam varius. Furlse id nulla vitae lasew imperdiet a quam.asdf asdf fdsaf fdasf dsa f dsa fds
<span class="truncate1">oo. <span style="background:#0F0">Etiam</span> varius. Furlse
<span style="background:#FF0">id</span> nulla vitae
<span style="color:#F00">lasew imperdiet</span> a quam.asdf asdf
fdsaf fdasf dsa f dsa fds
</span>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery.truncator.js"></script>
<script type="text/javascript">
(function($){
$(document).ready(function(){
$(".truncate1").trunc(40,"([[expand...]])");
});
})(jQuery);
</script>
Truncate text to at least 20 characters, keeping all the essential HTML tag, using (more) as expanding text, and (less) as contracting text
ff. Etiam varius. Furlse id nulla vitae lasew imperdiet a quam.asdf asdf fdsaf fdasf dsa f dsa fds
<span class="truncate2">ff. <span style="background:#0F0">Etiam</span> varius. Furlse
<span style="background:#FF0">id</span> nulla vitae
<span style="color:#F00">lasew imperdiet</span> a quam.asdf asdf
fdsaf fdasf dsa f dsa fds
</span>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery.truncator.js"></script>
<script type="text/javascript">
(function($){
$(document).ready(function(){
$(".truncate2").trunc(20,"([[more]])","([[less]])");
});
})(jQuery);
</script>
>> Play with the code in a new window <<
Truncate text to at least 30 characters, using default trailing code keeping all the essential HTML tag and allowing clone to next row.
| Enter Your Information | |||
fdsa Etiam varius. Furlse id nulla vitae lasew imperdiet a quam.
Donec tincidunt erat ac enim. Vivamus vulputate sapien ut nibh. Phasellus nonummy lasew vitae lacus. iiwere mauris. Praesent vitae purus. | |||
<table border="1">
<tr><td colspan="4">Enter Your Information</td></tr>
<tr><td><div class="truncate3">
fdsa Etiam varius. Furlse id nulla vitae <a href="#">lasew imperdiet</a> a quam.
<ol>
<li>Furlse faucibus lobortis velit.</li>
<li>In lacus sem, elementum <u>nec</u>, tempus id, tempor in, risus.</li>
</ol>
Morbi rutrum lorem id mauris. Nunc et ipsum.<br />
Donec tincidunt erat ac enim. Vivamus vulputate sapien ut nibh.
Phasellus nonummy lasew vitae lacus. iiwere mauris. Praesent vitae purus.
</div>
</td><td><input type="button" class="addRow" value="Add Row"/></td>
<td><input type="button" class="delRow" value="Delete Row"/></td></tr>
</table>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery.table.addrow.js"></script>
<script type="text/javascript" src="/js/jquery.truncator.js"></script>
<script type="text/javascript">
(function($){
$(document).ready(function(){
$(".addRow").btnAddRow();
$(".delRow").btnDelRow();
$(".truncate3").trunc(30);
});
})(jQuery);
</script>
The following is the source code of the jQuery Plugin.
<script type="text/javascript">
(function($){
var className="Truncator",
re1=/(<(?:[^>"']|'[^']*'|"[^"]*")+>)|([\s\r\n]+)|(\S)/g,
re2=/<\s*([^\s>]*)\s*>([\s\S](?!<\/\1>))*[\s\S]<\/\1>|<hr\s*\/?>|<br\s*\/?>|<li\s*\/?>/ig,
re3=/\[\[/g,
re4=/\]\]/g;
function truncate(obj,t,c){
var truncText=[],
remain=[],
count=0,
noMoreText=false;
$(t).html().replace(
re1
,function(s,s1,s2,s3){
if(typeof s3==="string" && s3!="") {
if(!noMoreText){
truncText.push(s3);
count++
}
}else if(typeof s2==="string" && s2!=""){
if(count>=c)
noMoreText=true;
if(!noMoreText){
truncText.push(" ");
count++
}
}else if(typeof s1==="string" && s1!=""){
if(count>=c)
noMoreText=true;
if(count<c)
truncText.push(s1);
else
remain.push(s1);
}
});
re=remain.join("").replace(
re2
,"");
if(re=="") this.disabled=true;
return truncText.join("")+re
}
function Truncator(
target,n,trail_more,trail_less,originalText,seed
){
var n=n||60,
trail_more=trail_more||"[[...]]",
trail_less=trail_less||"",
originalText=originalText||"",
seed=seed||null;
if(target) {
this.init(target,n,trail_more,trail_less,originalText);
if(
!$(target).data("init") ||
typeof $(target).data("init").length=="undefined"
)
$(target).data("init",[]);
if(originalText=="")
originalText=this.originalText;
if(!seed)
seed=this.seed;
$(target)
.data("init")
.push(function(e){
new Truncator(e,n,trail_more,trail_less,originalText,seed)
.live()
});
}
}
Truncator.prototype.init=function(
target,n,trail_more,trail_less,originalText,seed
){
this.className=className;
this.seed=seed|Math.round(Math.random()*10000);
this.disabled=false;
this.target=$(target)
.data(className,this)
.addClass(className+this.seed);
this.showClass=className+"show"+this.seed;
this.hideClass=className+"hide"+this.seed;
if(originalText && originalText!="")
this.originalText=originalText;
else this.originalText=this.target.html();
this.truncText=truncate(this,target,n);
this.trail_more=trail_more.replace(
re3,
'<a href="javascript:void(0)" class="'+this.showClass+'">'
).replace(
re4,
'</a>'
);
this.trail_less=trail_less.replace(
re3,
'<a href="javascript:void(0)" class="'+this.hideClass+'">'
).replace(
re4,
'</a>'
);
if(this.disabled) this.show();
else this.hide()
};
Truncator.prototype.show=function(){
var r=this.originalText;
if(!this.disabled)
r+=this.trail_less;
this
.target
.html(r);
return this
};
Truncator.prototype.html=function(t){
if(t){
this
.target
.html(t);
return this
} else
return this
.target
.html()
}
Truncator.prototype.hide=function(){
if(this.truncText.length==this.originalText.length)
this.target.html(this.truncText);
else
this.target.html(this.truncText+this.trail_more);
return this
};
Truncator.prototype.live=function(){
var t=this;
if (!this.goLive){
$("."+this.showClass)
.live("click",function(){
t.show();
});
$("."+this.hideClass)
.live("click",function(){
t.hide();
});
this.goLive=true;
}
return this
};
$.fn.trunc=function(
n,trail_more,trail_less
){
this.each(function(){
new Truncator(this,n,trail_more,trail_less)
.live()
});
return this
};
})(jQuery);
</script>
You can download the plugin from the latest versions in the following links:
All the plugin source codes and the examples are copyright of C. F., Wong
Please feel free to use any code listed in this page, they are licensed under the MIT License:
http://www.opensource.org/licenses/mit-license.php