Something about W3C validation and jquery mbComponents

Most of my jQuery components needs some custom attribute to be set on DOM tags I want to manipulate. That just to simplifying code writing and to have an intuitive approach to the constructive theme.
For example, my (mb)ContainerPlus component needs custom attributes like:
•    Icon
•    Buttons
•    Skin
•    Width
•    Height
All this attributes are not W3C compliant and that prevent the use of them in a public html or xhtml context for whom wants a complete W3C code compliance.


Well, even if I’m not totally agree with the restrictions imposed by W3C standards, and the most of the site in the web are not W3C compliant! (http://www.codinghorror.com/blog/archives/001234.html), I had to solve this problem; I was looking for a solution that wouldn’t upset totally my approach to the code, such as adding to a compliant attribute like the “class” one, all my custom properties and than parsing that via JavaScript.

I spent some time searching the way to do that and finally I discover the jquery.metadata plug-in that solves this problem. It allow to use a JSON syntax inside a “class” attribute, or inside a custom attribute (but this wouldn’t be appreciated by W3C!), or inside a specific tag like “<script/>”, to set properties that you can than attach to your element.
For example:
Before:

1
&lt;div class="containerPlus draggable resizable" width="500" <strong>buttons</strong>="m,c,i"  style="top:200px;left:200px" <strong>icon</strong>="chart.png" <strong>skin</strong>="default"&gt;

after:

1
&lt;div class="containerPlus draggable resizable {<strong>buttons</strong>:'m,c,i', <strong>icon</strong>:'chart.png', <strong>skin</strong>:'white', <strong>width</strong>:'500'}" style="top:200px;left:200px"&gt;

bringing to w3c compliance the component’s code, and it’s really great!
I’m modifying my components code to accept this new syntax and soon I’ll publish new releases of each one as W3C compliant code.
But don’t be afraid, if you think that the old way was better the variations I’m making to the code permit both the approach; if you add the jquery.metadata plug-in and you write the properties inside the “class” attribute than my component will read those, otherwise it’ll look for the corresponding custom attribute directly on the tag element.

Life is always a surprise!