Tips and Tricks – Building a jQuery Plugin (Part 2)

jQuery plugins don't have to be complicated to create. If you've stumbled upon this blog in pursuit of a guide to show you how to make a jQuery plugin, you might not believe me ... It seems like there's a chasm between the "haves" of jQuery plugin developers and the "have nots" of future jQuery developers, and there aren't very many bridges to get from one side to the other. In Part 1 of our "Building a jQuery Plugin" series, we broke down how to build the basic structure of a plugin, and in this installment, we'll be adding some usable functionality to our plugin.

We want our plugin to do a little more than return, "This is our awesome plugin!" so let's come up with some functionality to build. For this exercise, let's create a simple plugin that allows truncates a blob of text to a specified length while providing the user an option show/hide the rest of the text. Since the most common character length limitation on the Internet these days is Twitter's 140 characters, we'll use that mark in our example.

Taking what we know about the basic jQuery plugin structure, let's create the foundation for our new plugin — slPlugin2:

length: The length of the paragraph we want before we truncate the rest.

moreLength: What we append to the paragraph when it is truncated. This will be the link the user clicks to expand the rest of the text.

lessLink: What we append to the paragraph when it is expanded. This will be the link the user clicks to collapse the rest of the text.

trailingText: The typical ellipses to append to the truncation.

In our jQuery plugin example from Part 1, we started our function with this.each(function() {, and for this example, we're going to add a return for this to maintain chainability. By doing so, we're able to manipulate the segment with methods. For example, if we started our function with this.each(function() {, we'd call it with this line:

$('#ourParagraph').slPlugin2();

If we start the function with return this.each(function() {, we have the freedom to add further manipulation:

$('#ourParagraph').slPlugin2().bind();

With such a simple change, we're able to add method calls to make one massive dynamic function.

Let's flesh out the actual function a little more. We'll add a substantial bit of code in this step, but you should be able to follow along with the changes via the comments:

(function($){
$.fn.slPlugin2=function(options){var defaults ={
length:140,
moreLink:"read more",
lessLink:"collapse",
trailingText:"..."};var options = $.extend(defaults, options);// return this keyword for chainabilityreturnthis.each(function(){var ourText = $(this);// the element we want to manipulatevar ourHtml = ourText.html();//get the contents of ourText!// let's check if the contents are longer than we wantif(ourHtml.length> options.length){var truncSpot = ourHtml.indexOf(' ', options.length);// the location of the first space (so we don't truncate mid-word) where we will end our truncation.// make sure to ignore the first space IF the text starts with a spaceif(truncSpot !=-1){// the part of the text that will not be truncated, starting from the beginningvar firstText = ourHtml.substring(0, truncSpot);// the part of the text that will be truncated, minus the trailing spacevar secondText = ourHtml.substring(truncSpot, ourHtml.legnth-1);}}})};})(jQuery);

Are you still with us? I know it seems like a lot to take in, but each piece is very straightforward. The firstText is the chunk of text that will be shown: The first 140 characters (or whatever length you define). The secondText is what will be truncated. We have two blobs of text, and now we need to make them work together:

(function($){
$.fn.slPlugin2=function(options){var defaults ={
length:140,
moreLink:"read more",
lessLink:"read less",
trailingText:"..."};var options = $.extend(defaults, options);// return this keyword for chainabilityreturnthis.each(function(){var ourText = $(this);// the element we want to manipulatevar ourHtml = ourText.html();//get the contents of ourText!// let's check if the contents are longer than we wantif(ourHtml.length> options.length){var truncSpot = ourHtml.indexOf(' ', options.length);// the location of the first space (so we don't truncate mid-word) where we will end our truncation.// make sure to ignore the first space IF the text starts with a spaceif(truncSpot !=-1){// the part of the text that will not be truncated, starting from the beginningvar firstText = ourHtml.substring(0, truncSpot);// the part of the text that will be truncated, minus the trailing spacevar secondText = ourHtml.substring(truncSpot, ourHtml.legnth-1);// perform our truncation on our container ourText, which is technically more of a "rewrite" of our paragraph, to our liking so we can modify how we please. It's basically saying: display the first blob then add our trailing text, then add our truncated part wrapped in span tags (to further modify)
ourText.html(firstText + options.trailingText+'<span class="slPlugin2">'+ secondText +'</span>');// but wait! The secondText isn't supposed to show until the user clicks "read more", right? Right! Hide it using the span tags we wrapped it in above.
ourText.find('.slPlugin2').css("display","none");}}})};})(jQuery);

Our function now truncates text to the specified length, and we can call it from our page simply:

Out of all the ways to truncate text via jQuery, this has to be my favorite. It's feature-rich while still being fairly easy to understand. As you might have noticed, we haven't touched on the "read more" and "read less" links or the expanding/collapsing animations yet, but we'll be covering those in Part 3 of this series. Between now and when Part 3 is published, I challenge you to think up how you'd add those features to this plugin as homework.

Hi all! I'm glad my blogs were able to help! I don't currently have any blogs on PHP, however that doesn't mean that I can't start writing some! As far as the additional training material on jQuery, if you haven't already, you can check out the first part in this series: http://blog.softlayer.com/2012/tips-and-tricks-building-a-jquery-plugin-part-1 , Part 3 will be coming out soon and hopefully we can keep the series going! For external resources, I always recommend the jQuery learning center: http://learn.jquery.com/

Hi Raj! I am versed in HTML/CSS/PHP/MySQL/Javascript (jQuery/AJAX) with familiarities in several other languages. If you've read all the snippets I've submitted, might I suggest the blogs written on our SLDN?

Hi all! I'm glad my blogs were able to help! I don't currently have any blogs on PHP, however that doesn't mean that I can't start writing some! As far as the additional training material on jQuery, if you haven't already, you can check out the first part in this series: http://blog.softlayer.com/2012/tips-and-tricks-building-a-jquery-plugin-part-1 , Part 3 will be coming out soon and hopefully we can keep the series going! For external resources, I always recommend the jQuery learning center: http://learn.jquery.com/

Hi Raj! I am versed in HTML/CSS/PHP/MySQL/Javascript (jQuery/AJAX) with familiarities in several other languages. If you've read all the snippets I've submitted, might I suggest the blogs written on our SLDN?