I was really pleased to discover that it didn't have to be this way and jQuery had created a really easy to use plug-in architecture. As you'll see from this quick guide it's very easy to create a neat and elegant JavaScript solution using a jQuery plug-in. What I really like about the jQuery plug-in solution is that it makes it easy to provide "Progressive Enhancement" to your site. So that if JavaScript has been disabled, the mark-up will remain unchanged. It' like you are rewarding people with JavaScript and providing a richer browsing experience.
The following example is similar to a real world example I was recently asked to create. The client wanted an un-ordered list to only show the first 5 elements and then provide the user with a link to see the other element. They also wanted the list to be sorted. For this I decided to break the problem down into it's 2 parts.
Part 1 would be to create a "listsort" plug-in, Part 2 would be the "hideextra" plug-in to
show/hide the extra elements.
Here's what the final List ended up looking like:
...and these are the steps to create the above:
Part 1 - Creating the listsort Plug-in
- First up we'll need an unordered list on a page to work with, for this example I've chosen fruit:
- First up you need to create a new JavaScript file, it should be named as follows:
- Name your file jquery.[insert name of plug-in].js, e.g.. jquery.listsort.js
- The basis for all jquery plug-ins is the same you loop around the jQuery object using jQuery.each and when your finished you should return the jQuery object, so the next plug-in can work with the object. What this amounts to is the following
(function ($) { $.fn.sortlist = function (options) { return this.each(function () { // Guts goes here }); }; })(jQuery);
- Now we have the basics, we can build on this to create our plug-in. We'll loop around the current unordered list element and sort by the elements text().
(function ($) { $.fn.sortlist = function (options) { return this.each(function (listIndex, listInstance) { var listItems = $(listInstance).children('li'); listItems.sort(function (a, b) { var compA = $(a).text(); var compB = $(b).text(); return (compA < compB) ? -1 : (compA > compB) ? 1 : 0; }); $.each(listItems, function (listItemIndex, listItemInstance) { $(listInstance).append(listItemInstance); }); }); }; })(jQuery);
- While the above will work, we can make use of jQuery's plug-in architecture by using the options parameters. This way if a user wants to change our sort function to say sort on the class name of the list item element they can do this by overriding.
(function ($) { $.fn.sortlist = function (options) { var defaults = { sortElement: 'li', sortFunction: function (a, b) { var compA = $(a).text(); var compB = $(b).text(); return (compA < compB) ? -1 : (compA > compB) ? 1 : 0; } }; var options = $.extend(defaults, options); return this.each(function (listIndex, listInstance) { var listItems = $(listInstance).children(options.sortElement); listItems.sort(options.sortFunction); $.each(listItems, function (listItemIndex, listItemInstance) { $(listInstance).append(listItemInstance); }); }); }; })(jQuery);
- To call this from another script would be very easy, all you'd have to do is:
$(document).ready(function () { $("ul").sortlist(); });
- As i mentioned before, if the user doesn't have JavaScript enabled, nothing will change and the unordered list will remain unsorted. However if they have it installed the list will go from this:
- To this
- Now if you want to change the order, you can override the sort function by using jquery options parameters and extend function:
$(document).ready(function () { $("ul").sortlist( { sortFunction: function (a, b) { var compA = $(a).text(); var compB = $(b).text(); return (compA > compB) ? -1 : (compA < compB) ? 1 : 0; } }); });
- Pretty cool huh?
Part 2 - Creating the hideextra Plug-in
- You already know the basics for creating a jquery plug-in, so let's get on with the code for the hideextra plug-in.
(function ($) { $.fn.hideextra = function (options) { var defaults = { extraElement: 'li', extraClass: 'extra', buttonClass: 'showMore', maxItems: 4, moreText: "more...", lessText: "less..." }; var options = $.extend(defaults, options); return this.each(function (listIndex, listInstance) { var listItems = $(listInstance).children(options.extraElement); for (i = 0; i < listItems.length; i++) { if (i > (options.maxItems - 1)) { $(listItems[i]).hide(); $(listItems[i]).addClass(options.extraClass); } } var hiddenLis = $(options.extraElement + '.' + options.extraClass, $(listInstance)); // Add More/Less Link if (listItems.length > options.maxItems) { $(listInstance).append('<li><a href="#_" class="' + options.buttonClass + '">' + hiddenLis.length + ' ' + options.moreText + '</a></li>'); } // Add the click events var moreLink = $('.' + options.buttonClass, $(listInstance)); moreLink.click(function () { if (moreLink.text().indexOf(options.moreText) > 0) { hiddenLis.show(); moreLink.text(options.lessText); } else { hiddenLis.hide(); moreLink.text(hiddenLis.length + ' ' + options.moreText); } }); }); }; })(jQuery);This will create a list like the following:
Putting it all together
Now I've got 2 plug-ins created I can chain them together to get a list that is sorted and hide's extra elements just like this:Chaining jquery plug-ins together
$(document).ready(function () { $("ul").sortlist().hideextra(); });
Working Example
Conclusion
I've created an ASP.NET MVC 2 version of this code, which can be found on my sky drive here. Or if you just want the jquery plug-ins they can be found here: jquery.hideextra.js jquery.sortlist.jsPlease feel free to down load the example or Js files and check it out.
Thanks for explaining it so well.
ReplyDeleteabinitio training in chennai
I read your blog it's really good, thanks for sharing valuable information with us.
ReplyDeleteExcellent Article, Nice to read your article, very informative.
Excellent article Top AC mechanics Professional Camera sellers ChennaiCatering Service in ChennaiTop Educational Institute Chennai
Excellent Article
swimmingpool contractor chennai
swimmingpool equipment dealer chennai
swimmingpool consultant chennai
I strongly believe that there will be great opportunities for those who looked into this area, thanks much for creating and posting in here...
ReplyDeleteBest Online Software Training Institute | Python Online Training
This was an nice and amazing and the given contents were very useful and the precision has given here is good.
ReplyDeleteData Science Training in Chennai
Thank you so much as you have been willing to sharing your information with us. And not only that we will spend a lot of time other blog but your blog is so informative and compare to that your blog is unique.see more: Python Online Training
ReplyDeleteThe Post is a Wonderful Opportunity for Beginners of Java Course. Keep regular Updates of Blogging.
ReplyDeletepython training in hyderabad
I like your blog, I read this blog please update more content on python, further check it once at python online training
ReplyDeleteAwesome post.
ReplyDeletebeautiful information.
keep sharing the posts.
check out :http://tinyurl.com/y42jshqh
It has been simply incredibly generous with you to provide openly what exactly many individuals would’ve marketed for an eBook to end up making some cash for their end, primarily given that you could have tried it in the event you wanted.
ReplyDeletelinux Training in Chennai | NO.1 linux Training in Chennai
Unix Training in Chennai | NO.1 Unix Training in Chennai
Sql Training in Chennai | NO.1 Sql Training in Chennai
Oracle Training in Chennai | NO.1 Oracle Training in Chennai
Digital Marketing Training in Chennai | NO.1 Digital Marketing Training in Chennai
Nice! I like to share it with all my friends and hope they will also like this information.
ReplyDeletePower Bi Training In Hyderabad
Power Bi Online Training
Power Bi Training
Great blog !It is best institute.Top Training institute In chennai
ReplyDeletehttp://chennaitraining.in/openspan-training-in-chennai/
http://chennaitraining.in/uipath-training-in-chennai/
http://chennaitraining.in/automation-anywhere-training-in-chennai/
http://chennaitraining.in/microsoft-azure-training-in-chennai/
http://chennaitraining.in/workday-training-in-chennai/
http://chennaitraining.in/vmware-training-in-chennai/
Thanks for sharing nice information....
ReplyDeletePython Training in Hyderabad
I feel really happy to have seen your web page and look forward to so many more entertaining times reading here. Thanks once more for all the details.
ReplyDeleteData Science Training in Hyderabad | Data Science Course in Hyderabad
You are in point of fact a just right webmaster. The website loading speed is amazing. It kind of feels that you're doing any distinctive trick. Moreover, The contents are masterpiece. you have done a fantastic activity on this subject!
ReplyDeleteBusiness Analytics Training in Hyderabad
Business Analytics Course in Hyderabad
Really nice and interesting post. I was looking for this kind of information and enjoyed reading this one. Keep posting. Thanks for sharing.
ReplyDeletedata science training in guduvanchery
it’s really nice and meanful. it’s really cool blog. Linking is very useful thing.you have really helped lots of people who visit blog and provide them usefull information.
ReplyDeleteData Science Training in Hyderabad
I am really happy to say it’s an interesting post to read . I learn new information from your article , you are doing a great job . Keep it up
Devops Training in USA
Hadoop Training in Hyderabad
Python Training in Hyderabad
Big data has made quite an impact on the world and data science has recently risen to be one of the hottest topics. Now how are these two related? data science course syllabus
ReplyDeleteNice post.
ReplyDeletebest home cyber security device
Hi,
ReplyDeleteThank for sharing such a nice post on your blog keep it up and share more.
Free Crack Software Download
ReplyDeleteit’s really nice and meanful. it’s really cool blog. Linking is very useful thing.you have really helped lots of people who visit blog and provide them usefull information.
Data Science Training in Hyderabad
I am really happy to say it’s an interesting post to read . I learn new information from your article , you are doing a great job . Keep it up
Devops Training in USA
Hadoop Training in Hyderabad
Python Training in Hyderabad
Wow what a Great Information about World Day its exceptionally pleasant educational post. a debt of gratitude is in order for the post.
ReplyDeletedata science course in India
I have bookmarked your site since this site contains significant data in it. You rock for keeping incredible stuff. I am a lot of appreciative of this site.
ReplyDeletedata science courses in noida
Thank you for sharing the post. promo codes
ReplyDeleteI am really happy to say it’s an interesting post to read . I learn new information from your article , you are doing a great job . Keep it up
ReplyDeleteDevops Training in Hyderabad
Hadoop Training in Hyderabad
Python Training in Hyderabad
Tableau Training in Hyderabad
Selenium Training in Hyderabad
Cool stuff you have and you keep overhaul every one of us
ReplyDeletedata scientist course delhi
Thanks for sharing such a nice post.
ReplyDeleteRick Anderson
I got to know very amazing and useful information from this blog. Thanks for posting this blog
ReplyDeleteELLA JAMES
This comment has been removed by the author.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteNice and very informative blog, glad to learn something through you.
ReplyDeletedata analytics course delhi
Good information you shared. keep posting.
ReplyDeleteBest data science course with placements
it’s really nice and meanful. it’s really cool blog. Linking is very useful thing.you have really helped lots of people who visit blog and provide them usefull information.
ReplyDeleteData Science Training in Hyderabad
I am really happy to say it’s an interesting post to read . I learn new information from your article , you are doing a great job . Keep it up
Devops Training in Hyderabad
Hadoop Training in Hyderabad
Python Training in Hyderabad
Tableau Training in Hyderabad
Selenium Training in Hyderabad
best 12 inch subwoofer under 200$
ReplyDeletethanks for share
ReplyDeletedata science course in pune
This concept is a good way to enhance knowledge. thanks for sharing..
ReplyDeleteRPA Training in Pune
Best RPA Training in Pune
I really appreciate this great post that you have provided us. I guarantee this will benefit most people and myself. thank you very much!
ReplyDeletehancom office editor
time4learning
how to take a screenshot on samsung tablet
gogoanime app
how many cm in a meter
Smartjailmail
mymedicalme
roblox error code 524
So happy to find good place to many here in nice post, the writing is just great, thanks for the post.
ReplyDeleteThis is my first time visit here. From the tons of comments on your articles.I guess I am not only one having all the enjoyment right here!
ReplyDeleteAWS Training in Hyderabad
Really Nice Information It's Very Helpful All courses Checkout Here.
ReplyDeletedata scientist courses aurangabad
Good information you shared. keep posting.
ReplyDeleteartificial intelligence courses in chennai
Nice article with valuable information. Thanks for sharing.
ReplyDeletePython Online Training
Artificial Intelligence Online Training
Data Science Online Training
Machine Learning Online Training
AWS Online Training
UiPath Online Training
I am really happy to say it’s an interesting post to read . I learn new information from your article , you are doing a great job . Keep it up
ReplyDeleteDevops Training in Hyderabad
Hadoop Training in Hyderabad
Python Training in Hyderabad
Tableau Training in Hyderabad
Selenium Training in Hyderabad
Informatica Training in Hyderabad