toadkicker.com

Attack of the Attributes

by toadkicker.

I have this idea of writing a bunch of jQuery extensions that latch onto data attributes into html and extend the functionality of the tag.

Take for example, a modal. To have a modal on the page, typically you have an open and close button, and the container holding the modal content. Often times I'd have to write a little js to say what those elements were. Now in HTML5 I can create custom attributes! As long as they are prefixed with data- the page will still validate.

This means I could write something like: 

<a href="/ajax/modal/container" data-modal-id="#maybeitsalreadyloaded" data-modal-class="open-modal">Open Modal</a>

<div id="maybeitsalreadyloaded"><div><a href="#" data-modal-class="close-modal">Close</a></div></div>

and my script would just look for these attributes and bind the appropriate event handlers to them.