21

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?

Gavin Miller
  • 43,168
  • 21
  • 122
  • 188
jonhobbs
  • 26,684
  • 35
  • 115
  • 170
  • I [asked a similar question](http://stackoverflow.com/questions/1600106/storing-arbitrary-info-in-html-tags-for-javascript) a few months back and good a few good answers. Also check out the links in bobince's comment. – Pekka Dec 17 '09 at 17:28
  • possible duplicate of [Non-Standard Attributes on HTML Tags. Good Thing? Bad Thing? Your Thoughts?](http://stackoverflow.com/questions/209428/non-standard-attributes-on-html-tags-good-thing-bad-thing-your-thoughts) – Ciro Santilli OurBigBook.com Jan 31 '14 at 10:59

6 Answers6

36

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.

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • 4
    @Felix: Just fine. It works fine with just about any browser, the only real issue with defining your own attributes was that it caused validation errors (if you were validating), it wasn't specified anywhere (and so in theory, UAs could have ignored them and not made them available to the JS layer or to CSS, although apparently none did), and of course there's the risk of colliding with newly-defined attributes. The great thing about the HTML5 formalization of this is that it address those issues at a stroke. But you don't have to wait, works fine now, even on IE6. – T.J. Crowder Mar 05 '10 at 08:22
2

Use jquery's ".data" property. This is very handy and many people don't know about it.

See this link for more information.

Patrick Karcher
  • 22,995
  • 5
  • 52
  • 66
  • 2
    Thanks Patrick. If you look at my username on here and the name on that article you'll see that I wrote it :) Unfortunately, I need people to be able to mark up this stuff in HTML to be parsed by jQuery later so it has to be somewhere in the HTML element, not in a script. – jonhobbs Dec 17 '09 at 17:33
  • the Link say page not found! – Quethzel Diaz Apr 29 '17 at 14:28
2

The Prototype library supports:

element.store("key","value")

and

element.retrieve("key","value").

Simple. Nice. Effective.

Diodeus - James MacFarlane
  • 112,730
  • 33
  • 157
  • 176
1

Look at the jQuery .data() function.

Community
  • 1
  • 1
micahwittman
  • 12,356
  • 2
  • 32
  • 37
0

One could also use classes for this sort of thing.

<a href="#" class="Theme-Button Style-win2007 Icon-left Align-Center FullWidth"></a>

You will have to pre define a lot of classes, but it doesn't feel too much different than handling each key value pair that you have to create.

Matthew Vines
  • 27,253
  • 7
  • 76
  • 97
0

Use xhtml with custom elements mixed in from another DTD. or use html5 with custom data- attributes

just somebody
  • 18,602
  • 6
  • 51
  • 60