Build an Advanced jQuery Plugin

Premium Tutorial – Build an Advanced “Poll” jQuery Plugin, and a GIVEAWAY!

on Feb 18th 2009 with 90 comments

I’m proud to launch our first ever Premium tutorial, exclusive to members. For this flagship tut, veteran developer/writer Dan Wellman – author of the recently released jQuery UI 1.6, from Packt publishing – will teach you how to build an advanced “poll” jQuery plugin. Not only will you have a lengthy tutorial to study, but we’ll also provide a companion video tutorial to assist.

To celebrate our first Premium tutorial, I also have some free books to give away, courtesy of Packt!.

A Wonderful, and In Depth Tutorial That Will Take You From A-Z

In this tutorial we’re going to be creating a jQuery plugin from start to finish; this plugin will allow us (or other developers) to easily add a simple poll widget to a web page or blog. By poll widget, I mean an area in which a question is posed which visitors are encouraged to answer. Once they have answered the question the results of the poll will then be displayed.

screencast
jQuery Plugin

Sign up for a PLUS membership now!

Free Books!

To help celebrate the launch of our new plus program, I have some books, courtesy of the folks over at Packt publishing, that we’ll be giving away!!


Packt Logo

Whatcha Got?

I have a few copies of Dan’s new “jQuery UI 1.6″ book, as well as “The Jquery Reference Guide”. All you have to do is leave a comment with a quick jQuery tip. We’ll then randomly choose several winners! I’ll go first.

If, within a function, you find yourself repeatedly calling “$(this)”, consider caching it.

$(this).click(dosomething);
.....
$(this).somethingElse();
......
$(this).evenMoreSomething();

can become…

var $this = $(this);
$this.click();
.....
$this.somethingElse();
.....
$this.evenMoreSomething();

jQuery UI

Join Tuts Premium

For those unfamiliar, the family of TUTS sites runs a premium membership service called “Premium”. For $19 per month, you gain access to exclusive premium tutorials, screencasts, and freebies at NETTUTS, PSDTUTS, and VECTORTUTS! For the price of a pizza, you’ll learn from some of the best minds in the business. Join today!

  • Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.


 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

Dan Wellman has been writing web-design and scripting tutorials for approximately 8 years. His new book, jQuery UI 1.8: The User Interface library for jQuery, was released in August 2011.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
← Older Comments
  • http://shinokada.blogspot.com/ shin

    I wish I had a plus account. Why don’t you have a give-away “Plus account” promotion?
    Tip:
    Use .stop() when you use .animate()

    I have a jQuery Reference Guide, so I want a jQuery UI 1.6 if I win this.
    Thanks.

  • Jaysen

    Guyz the video is too big! It doesnt fit my browser at 1280 by 760 px. Please fix it!

  • http://www.dvq.co.nz/blog DVQ

    If we want this book, doesn’t that imply we don’t know a lot about jQuery, therefore we wouldn’t have any tips to share?

    The only tip I can offer is practice, experiment and try things out, eventually you will know a lot about jQuery. :)

  • Leventhan

    Binding events to dynamically created elements made easy by the live query plugin! http://plugins.jquery.com/project/livequery

  • Pala

    Create your own functions to extend jQuery.

    $.fn.myNewFunction = function() {
    return $(this).addClass(‘works’);
    }

    Use it like this:

    $(‘#div’).myNewFunction();

  • http://dev-tips.com Drew Douglass

    Need to queue your css effect until after the animation has finished?


    $(function(){
    $('#box').click(function(){
    $(this).animate({left:300}, 700, function(){
    $(this).css('backgroundColor', '#333');
    });
    });
    });

    And that’s my little tip :)

  • http://james.padolsey.com James

    jQuery allows you to create custom filter selectors. This can be incredibly useful if you ever need to re-use certain filters. For example:

    $.expr[':'].external = function(elem,index,match) {
    var url = elem.href || elem.src,
    loc = window.location;
    return !!url.match(new RegExp(‘^’ + loc.protocol + ‘//’ + ‘(?!’ + loc.hostname + ‘)’ ));
    };

    // You can now use it within your selectors:

    // Find all external anchors:
    $(‘a:external’);

    // Find all external script elements:
    $(‘script:external’);

    // Determine if link is external:
    $(‘a#mylink’).is(‘:external’); // true/false

  • Rocky

    need jquery to serialize form checkbox which are checked…very simple :)

    $(“input [@type='checkbox'][@checked]“).serialize();

  • http://www.basilisktech.com Hamza

    My jQuery tip is make sure you have jQuery

  • Ibrahim

    Very important aspects in jQuery plugins authoring is the closure for protecting your variables
    and “return this.each();” for Chaining capability
    (function($) {
    $.fn.pluginName = function() {
    return this.each(function(){
    // Your code goes here

    });
    };
    })(jQuery);

  • Ibrahim

    I hope i can get jQuery UI book

  • http://www.jackfranklin.co.uk Jack Franklin

    I’ve already got the UI book but would love the other one :D

    My tip is that remember in jQuery 1.2.6 it was impossible to interact with elements jQuery created for you?

    The old way:
    $(“p”).click(function(){
    $(this).after(“Another paragraph!”);
    });

    If you clicked on the new paragraph, it would not create a new paragraph. Nothing would happen.

    Using jQuery’s new live event (V 1.3 up) we can do this:
    $(“p”).live(“click”, function(){
    $(this).after(“Another paragraph!”);
    });

    And now if you run that, click on the paragraph, then click on a newly created paragraph, and it will create yet another paragraph! Voila!

    ANd I’ll be subscribing to tuts+ this evening :D Can I pay via paypal?

  • Jônatan Fróes

    I’ll dive into net+
    .
    .
    tip: Open external links in a new window:
    $(‘a[rel=external]‘).click(function(){ $(this).attr(’target’, ‘_blank’) })

  • Daniel Pape

    I signed up for a + account this morning. Great Tut. I dont have a jQuery tip, but I really want to learn it. One of those books would be awesome to have. I dont know which would be better for me since I know next to nothing about jQuery, so either would be good to have along with the net.tutplus jQuery tutorials.

  • http://www.dev.my dev.my

    i dont has any tip but i want the book.

  • http://www.organikdesigns.com Mike Schneider

    If you need to add a lot of attributes to something like an anchor tag, the example below will save a lot of time:

    $(‘a’).attr({
    href: ‘link/to/blog’,
    id: ‘link’,
    class: ‘highlight’

    });

  • http://www.davidrojas.net David Rojas

    JQuery tip:
    You can load both jquery and jquery UI in your pages using google ajax libraries, with google.load() method or direct linking:
    http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js
    and
    http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js
    It decreases load from your server by downloading the libraries from google.

  • http://www.sethcardoza.com Seth

    jQuery Tip:

    Add a class to all external links to have them open in a new window.

    $(‘a.external’).click(function(){
    window.open(this.href);
    return false;
    });

  • Gavin

    From the looks of things, the best tip for us newbies might be to get a Plus account and get stuck into the tutorials. Practice makes perfect and all that. :)

  • http://www.lespolypodes.com gaetan ark

    I want to change the text of an element contained in a iframe :

    I got this code :
    …
    …
    …

    And this loaded in the iframe :
    …
    Hi !
    …

    To change the text of the h1, I do this :
    $(‘#myIframe’).contents().find(‘h1′).text(“Hello iframe !”);

    Et voilà.

  • http://www.lespolypodes.com gaetan ark

    The comments are broken… I can’t insert some HTML code…

    I want to change the text of an element contained in a iframe :

    I got this code :
    …
    <iframe id=”myIframe”>…</ iframe>
    …

    And this loaded in the iframe :
    …
    <h1>Hi !</h1>
    …

    To change the text of the h1, I do this :
    $(‘#myIframe’).contents().find(‘h1′).text(“Hello iframe !”);

    Et voilà.

  • Meshach

    To bad I don’t have a plus account… :( :( :(

  • http://www.robati.com Derek

    This is great. Thanks.

  • Ryan

    Sorry, new to jquery, so I don’t have a good tip to share :( I would love the UI 1.6 book though! And I am a Tuts Plus sub :)

  • Neil

    What a crock – build a blog with a big user base, then start publishing posts for a premium service. Why post +TUTS on this blog?

    Build a large user base to ATTEMPT to extract $9 / month while generating nearly $10,000 per month in revenue.

    Should this post be in NetTuts? Net Tuts is Ad supported!

  • Meshach

    @Neil, totally agree. Sorry to be a complainer but I wish there was no such thing as plus!

  • http://themeforest.net/user/JeffreyWay Jeffrey Way

    @Neil, @Meshach – If you don’t want to sign up for our Plus service, you don’t have to. Absolutely nothing will change with this regular site. I’m not sure how there can be anything negative with such a system.

    @Neil – Do you have any idea how much money we spend on this site every day? We put a HUGE amount of effort into making this such a high quality site. …and where did you get the $10k figure from?

  • Tom

    i dont really have jQuery tips to offer. My skill is very basic like to add class remove class.. etc.. etc.. but i need the book… :)

  • Neil

    @Jeffrey, $10K – I’m close right, its probably more like $7k but still, Net Tuts is ad supported so it should not be redirected to a premium blog, pluttuts should be a totally separate entity promoted MAYBE once a month in a brief +TUTS roundup post . And yes, I understand that you have staff and guest writers to pay but my opinion is not going to change.

  • http://themeforest.net/user/JeffreyWay Jeffrey Way

    Thanks everyone for the jQuery tips. We’ll be choosing some of you at random on Monday morning!

  • http://linkae.com/dmoena dmoena

    My tip: the “show” funtion with a parameter will apply a nice transition, but may also give you an incorrect positioning. use “show” with no parameters or use absolute positioning to avoid this.

  • http://apertaholic.com aperta

    jQuery = Cool !

  • http://www.imblog.info Muhammad Adnan

    ah , i m newbie and need the book !

    Its great site really to learn the web development tutorials.

  • ronio

    I’m a beginner in jquery ui, don’t have any tip, but I want to read the ui book. :)

  • Sid

    Howz this for a tip?

    Show only the first 10 comments and add a link underneath to expand the rest of comments. This will allow users to add their own comments without having to scroll all the way down.

  • Sid

    And oh, just to make my tip relevant – use jQuery to expand the rest of the comments :)

  • Rocky

    who’s are selected for the free jquery books.

  • Pingback: 25 Powerful and Useful jQuery Tutorials for Developers and Designers : Speckyboy Design Magazine

  • Pingback: 25 Powerful and Useful jQuery Tutorials for Developers and Designers | guidesigner.com

  • Pingback: 25 Powerful and Useful jQuery Tutorials for Developers and Designers | designersmantra.com

  • James

    My poll will not submit the answer to mysql database ?!!!!:@:@

    http://www.fifa-tricks.co.uk/poll/pollTest.html

  • James

    I got it to submit to my database but when i press submit the page does not refresh, allthought it is added to the database ,,, Can someone please help me and tell me what could be the problem!?

  • Pingback: 25 Awesome jQuery Tutorials | Search-End

  • http://www.professdiamond.com/ เพชรร่วง

    i wish i had a plus account.

← Older Comments