1. Click on: I made a jQuery plugin!

    Last night, I contributed a new plugin to the jQuery project.  For my non-hacker readers, jQuery is a very popular javascript library that takes a lot of the suck out of javascript programming.  Plugins are little pieces of code that add functionality to jQuery.

    My plugin creates a fancy interface for adding and removing tags.  It was inspired in great part by the interface in Tumblr’s dashboard, as well as some of Facebook’s widgets.  The goal was to create an interface where a user could enter tags, and as each tag is entered, it appears as a colorful balloon.  I wanted this to happen automatically - to the programmer, I wanted it to appear as a normal input with data in a straightforward and easy to process format.

    It took me a while to figure out how to make this happen, and I think the solution is an interesting one, so I thought I would explain what is going on behind the scenes.  I will try to be as non-technical as possible!

    1. The designer or developer puts a normal input field in their form with a list of existing tags.  It might be something like “foo,bar,baz” - a simple list of tags separated by commas.
    2. When the plugin kicks off, the first thing it does is hide the normal input field.   It is ugly and bad and should not be seen by anyone.
    3. The plugin then creates a big white box that LOOKS like an input, but is actually just a big white box.
    4. Then, the plugin takes that list of tags separated by commas and… separates them.
    5. Each tag is turned into a <span> tag of its own, and inserted into the big white box. This creates the bubble like appearance of each tag.
    6. After all the tags have been inserted, a real input is inserted at the end of the list.  It lines up just to the right of the last tag.  This input has invisible borders, so it blends into the background of the big white box.  It is essentially invisible - except that you can type in it!  This creates the illusion that you are typing into a larger input.
    7. The plugin then tells jQuery that whenever a user hits the ENTER button, or types a comma, a new tag is ready to be added to the list.  The tag gets wrapped in a <span> and inserted right before the invisible input.  The input is then cleared of its value, and is ready for the user to type another tag.
    8. In the meantime, the plugin collects all the tags that have been entered, and turns them back into a comma separated string, and stuffs that string into the original hidden input. 

    Neat, eh?  I am really excited about this technique, and excited to have contributed something back to the jQuery community.

    posted 1 year ago on Sep 23, 2010 | Permalink | 13 notes

  2. Tumblr Notes

    1. blackbutshining reblogged this from benbrown
    2. benbrown posted this

Liked on Tumblr

Recently on Flickr

Recently on Twitter

This is Ben Brown's blog about technology, community, and life in Austin, TX.

I run XOXCO, a boutique product development firm. We mostly make websites for Finland.

Right now, I am working on a pixel drawing app for the iPad called Make Pixel Art, hence I am posting tons of pixel drawings! I also contribute to Bitnauts. Prepare yourself for the low rez revolution.

I have been posting to my personal website since 1995!

View the archives.

Subscribe

Search

More Ben Brown

Links