MagicTags - jQuery plugin

A jQuery plugin for dynamic tag filtering of items on the page.

Live Demo

Click to filter by a tag. Shift-click to filter by multiple tags.

• filter by
• Adobe Flex
• Javascript
• Django
• Important
• X

Screencast

Getting Started

1. Download the .zip file using the huge image link above.
2. Unzip the folder.
3. Include the jquery.magictags.js file and the magictags.css files onto your page
4. Now create a tag control bar. This is where you define what tags you want to be clickable. See the example.html file in the download. There are a few important things to note. the 'id' of the ul is going to be the name for this set of tags. Don't leave out the class="magictags" on the ul. Put in any tags you want clickable as a list item (li) that contains a link that has the mandatory "mtagcontrol" class as well as the name of your tag, preceded by "mtag-".
5. Any item on your page can be tagged. Just give the item the appropriate css classes and it will be tagged. Two classes are required: "mtagged", and also the name you assigned your tag set. "tech_tags" in the example. Now also give it the css class of your tag, for example "mtag-important". Again, see the example.html file in the download.
6. Finally, fire up the jquery plugin in a document.ready statement: $(document).ready(function(){ magictags = $.MagicTags(); });

That's it. Its much simpler than it might appear at first glance. Check out the example.html file in the download. Have fun! Feel free to contact me if you have any questions.

License

MagicTags is licensed under the MIT license.