What's the best HTML attribute to use to store information for jQuery to parse?

Question

Must Support IE6 and must Validate vs XHTML Strict 1.0!

This is tricky to explain...

I'm using a generic class name to initiate a plugin feature on an associated element. I also want to have options associated with the element stored in an attribute as well.

<a href="url.com" class="popup" rel="900x900" >My Link</a>

With this, jQuery will look for all elements that have 'popup' and parse the rel value for the dimensions of the popup and initiate the popup() function whenever this link is clicked with a window the size w=900 h=900

but I need to take this a step further because I want to have more options...

<a href="url.com" class="popup" rel="900x900_scroll_tool_menu" >My Link</a>

I'm not sure if using the rel attribute is the place for this because I also want to use this on other elements that dont have a rel= attribute.

So I was thinking using classes for this too... I came up with this:

 <a href="url.com" class="popup opt_dim-900x900_scroll_tool_menu" >My Link</a>
 <img src="pic.gif" class="popup opt_dim-150x200_location" >My Link</a>

From the looks of this the options can get VERY long, using class seems ok, but maybe there's something better..

Which way do you think is better? Do you have another idea for this? I want to store the options in some html attribute.

Thanks!

UPDATE

I am continually reminded that there are a dozen ways to do anything in Javascript, in terms of the solutions here I later changed the correct answer to the html5 data attribute, which now that ie6 isnt an issue, seems like the best method.

Best, because it uses standard features and avoids any of the hackery I was trying to do with class names. Sure classnames are extremely flexible still, but that solution isn't semantic, nor does it follow best practice of separating views from behavior.

Answer 1

If you can use HTML5, then use data-* attributes -- they were designed for exactly this problem.

<div data-tool-menu="900x900">

http://ejohn.org/blog/html-5-data-attributes/

Answer 2

Why not just embed json in the rel attribute:

<a href="url.com" class="popup" rel="{w:900,h:900}" >My Link</a>

That way you can have as many properties as you want and the format is standardized and easy to access.

if validation is a concern; you could always use xhtml, define your own custom namespace, and then add a custom attribute.

<a href="url.com" class="popup" custom:options="{w:900,h:900}" >My Link</a>

Edit: Thanks to @andras in the comments, here's a great example of this technique:
http://www.bennadel.com/blog/1453-Using-jQuery-With-Custom-XHTML-Attributes-And-Namespaces-To-Store-Data.htm

Answer 3

Extract metadata from a DOM Element and return it as an Object.

You could support / use the jQuery metadata plugin. There are a few options to choose from, and it's a good way to embed metadata in the html.

e.g. the following are all supported by the plugin.

<li class="someclass {some: 'data'} anotherclass">...</li>
<li data="{some:'random', json: 'data'}">...</li>
<li class="someclass">
   <script type="application/json">{some:"json",data:true}</script>...
</li>

See also: A Plugin Development Pattern over at learningjquery.com

Answer 4

Technically, rel has a limited list of possible values, so you could create a page that won't validate.

I use extra classes for this type of thing all the time. I've never had one longer than about 20 characters, so I've never pushed against any length limit. The good thing about using classes this way is that you can validate the page, which is always a Good Thing(tm).

Update for comment:

I tend to not overload a single class name, but to generate multiple classes that each Do One Thing. This not only makes things simpler to parse, but it also makes it easy to separate behavior from identity from attribute.

For example: the Django Book platform code has not been made available (at least not that I can find anywhere, and I've looked hard), so I'm reimplementing it for a customer (and, yes, it will be released OS). A lightly modified version of docutils automatically adds behavior and identity to the tags of "commentable items" as it converts from reStructuredText to HTML. The specifics aren't pertinent, but there are lots of cg-13-134 and cg-15-u-142 type classes floating around, which are easy on the eyes and the parser.

Answer 5

You can include a element within an element

If you give the element an id, you could use something like:

<a href="/url" id="unique_id" class="popup">My Link
    <script type="text/javascript">
        popup['unique_id'] = { \\JSON object describing options
                             };
    </script>
</a>

Granted, you still have Javascript entwined with your HTML, but it will, at least, validate.

Answer 6

I think you're looking for jQuery.data().

The jQuery.data() method allows us to attach data of any type to DOM elements ...

From the example in the link above:

var div = $("div")[0];
jQuery.data(div, "test", { first: 16, last: "pizza!" });
$("span:first").text(jQuery.data(div, "test").first);
$("span:last").text(jQuery.data(div, "test").last);

Answer 7

Since you're going to be using javascript, I'll suggest adding the extra options/information you need as parameters to your url. I've been looking for a similar solution to your question and I've finally decided to take this route. It's also the way ThickBox (http://jquery.com/demo/thickbox/) does it, and I've used it successfully on a couple of projects.

<a href="url.com?width=900&height=900&randomKey=randomValue" class="popup">My Link</a>

Then in your js

$(".popup").click(function(){
  var url = $(this).attr("href");
  var width = fancyFunctionToParseParameters(url, "width");
  ...
});

Answer 8

Why not this instead:

<a href="url.com" class="popup">
<input type="hidden" value="900x900_scroll_tool_menu">My Link</a>

Then just use the proper jQuery selector on your click event. Simple and it keeps the javascript out of this part of your HTML.