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 | <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"> |
after:
1 | <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"> |
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!
@mihai: this is an approach I saw in a Microsoft video. MS are using this for all their client-side Ajax controls, so it’ll definately be supported in IE. The video is Bertrand Le Roy’s session at pdc2009, number PC32.
I think that… if you’re going to use namespaces with xhtml pages, you’ll get in trouble with non xhtml compliant browsers… like ie6 and ie7.
Matteo thank you for your great scripts,
keep up the good work!
Hi Steve,
I’ll try with namespaced attribute instad of metadata; that would be more readable and clean.
Thnx,
Matteo
Had you considered adding namespaced attributes to your documents?
I believe that XHTML sort-of allows you to add your own namespaces to the document;
xmlns:mb=”http://mb.jquery.com”
And then add attributes;
<div mb:gallery-width=”300px”%gt;
http://www.w3.org/TR/xhtml1/#well-formed says;
“The XHTML namespace may be used with other XML namespaces as per [XMLNS], although such documents are not strictly conforming XHTML 1.0 documents as defined above. Work by W3C is addressing ways to specify conformance for documents involving multiple namespaces.”
I don’t know if this is a worthwhile approach, but I thought I’d mention it.
Atwood: “I’ll tell you the same thing my father told me: take my advice and do as you please.”:
http://www.codinghorror.com/blog/archives/001234.html