I'm trying to put together a way of marking up various components in HTML that get parsed by a jQuery script and created when the page loads.
For example, at the moment I can put the following in to my page..
<a href="link.html" class="Theme-Button Theme-Button-Style-win2007 Theme-Button-iconLeft Theme-Button-AlignmentCenter Theme-Button-fullWidth">This is a button</a>
When the jQuery script finds it it'll inject the html necessary to create a button with an icon on it and all the necessary events etc.
However, this is messy and requires a lot of long class names. I'd much rather do something like this...
<a href="#" class="Theme-Button" data="{style: 'win2007', icon: 'left', align:'center', fullWidth: true}"></a>
It's not that much shorter but neater in my opinion and requires less parsing. Trouble is, I've done a little bit of research into "expandos" and I'm fairly sure some browsers won't like it and it won't validate.
Anybody got any better suggestions?
Go ahead and use an attribute for this, but use a data- prefix on it. Attributes with the prefix data- are explicitly allowed on all elements as of HTML5. Example:
<a href="#" class="Theme-Button" data-theme="{style: 'win2007', icon: 'left', align:'center', fullWidth: true}"></a>
It works today in all browsers, and because it's now specified behavior, it's future-proofed.