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

February 14, 2013

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.

Let's start with the jQuery code block we created in Part 1:

(function($) {
    $.fn.slPlugin = function(options) {
            var defaults = {
                myVar: "This is", // this will be the default value of this var
                anotherVar: "our awesome",
                coolVar: "plugin!",
            };
            var options = $.extend(defaults, options);
            this.each(function() {
                ourString = myVar + " " + anotherVar + " " + coolVar;
            });
            return ourString;
    };
}) (jQuery);

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:

(function($) {
    $.fn.slPlugin2 = function(options) {
 
        var defaults = {
            length: 140,
            moreLink: "read more",
            lessLink: "collapse",
            trailingText: "..."
        };
 
        var options = $.extend(defaults, options);
    };
})(jQuery);

As you can see, we've established four default variables:

  • 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 chainability
        return this.each(function() {
            var ourText = $(this);  // the element we want to manipulate
            var ourHtml = ourText.html(); //get the contents of ourText!
            // let's check if the contents are longer than we want
            if (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 space
   if (truncSpot != -1){
       // the part of the text that will not be truncated, starting from the beginning
       var firstText = ourHtml.substring(0, truncSpot);
 
       // the part of the text that will be truncated, minus the trailing space
       var 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 chainability
        return this.each(function() {
            var ourText = $(this);  // the element we want to manipulate
            var ourHtml = ourText.html(); //get the contents of ourText!
            // let's check if the contents are longer than we want
            if (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 space
   if (truncSpot != -1){
       // the part of the text that will not be truncated, starting from the beginning
       var firstText = ourHtml.substring(0, truncSpot);
 
       // the part of the text that will be truncated, minus the trailing space
       var 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:

<script src="jquery.min.js"></script>
<script src="jquery.slPlugin2.js"></script>
<script type="text/javascript">
$(document).ready(function() {  
    $('#slText').slPlugin2();  
});
</script>

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.

-Cassandra

Comments

February 18th, 2013 at 1:35pm

Thanks a lot Cassandra, this and the rest of your tutorials have been a lot of help; do you have any more (maybe PHP)?

February 27th, 2013 at 6:38pm

This is very excellent knowlegde for any developer. May you recommend to me more training material for me to learn?

March 1st, 2013 at 10:00am

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/

March 4th, 2013 at 12:21pm

Yes. Yes. I have read all your entries and found all very helpful to me. Do you have more? What other languages may you help in? I enjoy all of your help.

March 6th, 2013 at 9:32am

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?

https://sldn.softlayer.com/blog/cwolff/HTML5-and-jQuery-Sortable
https://sldn.softlayer.com/blog/cwolff/Pure-CSS-Modal-Overlays
https://sldn.softlayer.com/blog/cwolff/jQuery-and-CSS-What-time-it-you

Plus dozens more from our other talented staff!

April 4th, 2013 at 12:28am

Awesome ! Awesome ! This is one of best blog i have seen on jquery and first on creating own plugin. The way you explain the things are simply great. Easy to understand and learn...

July 29th, 2013 at 10:28am

Is Cassandra still posting most helpful blogs? I have been looking out for them and have found them most helpful to me. Please post more, yes!

Leave a Reply

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • You can enable syntax highlighting of source code with the following tags: <pre>, <blockcode>, <bash>, <c>, <cpp>, <drupal5>, <drupal6>, <java>, <javascript>, <php>, <python>, <ruby>. The supported tag styles are: <foo>, [foo].
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.

Comments

February 18th, 2013 at 1:35pm

Thanks a lot Cassandra, this and the rest of your tutorials have been a lot of help; do you have any more (maybe PHP)?

February 27th, 2013 at 6:38pm

This is very excellent knowlegde for any developer. May you recommend to me more training material for me to learn?

March 1st, 2013 at 10:00am

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/

March 4th, 2013 at 12:21pm

Yes. Yes. I have read all your entries and found all very helpful to me. Do you have more? What other languages may you help in? I enjoy all of your help.

March 6th, 2013 at 9:32am

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?

https://sldn.softlayer.com/blog/cwolff/HTML5-and-jQuery-Sortable
https://sldn.softlayer.com/blog/cwolff/Pure-CSS-Modal-Overlays
https://sldn.softlayer.com/blog/cwolff/jQuery-and-CSS-What-time-it-you

Plus dozens more from our other talented staff!

April 4th, 2013 at 12:28am

Awesome ! Awesome ! This is one of best blog i have seen on jquery and first on creating own plugin. The way you explain the things are simply great. Easy to understand and learn...

July 29th, 2013 at 10:28am

Is Cassandra still posting most helpful blogs? I have been looking out for them and have found them most helpful to me. Please post more, yes!

Leave a Reply

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • You can enable syntax highlighting of source code with the following tags: <pre>, <blockcode>, <bash>, <c>, <cpp>, <drupal5>, <drupal6>, <java>, <javascript>, <php>, <python>, <ruby>. The supported tag styles are: <foo>, [foo].
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.