Data Attributes

A number of IxF plugins will start using a new thing called data- attributes. Rather then describe how this works in multiple locations, we will explain it here where we can be a bit more verbose.

It can be very useful to set options for plugins directly on the element they will be acting upon. This allows you to customize things quickly (don't have to go find the code where it is setup), and individually (don't have to make separate setup scripts for each instance).

This has the potential to backfire in that you have to go to the HTML to make changes to things. But this is just an optional way of setting options up, so be wise in it's use.

The old way... variables as classes

For a while we were setting variables via classes. For the tables plugin you could set a class of dt-rows-10 that would make the plugin only show 10 rows by default. This worked pretty good. Unfortunately in the code that you never see, there was lots of stuff going on to pull that out (checking if there was a class via regex, pulling it out via regex, etc).

If you weren't careful in your naming of the classes, they could also potentially collide with actual CSS you wanted to apply.

The new way... data- attributes

HTML 5 has a great new feature called custom data attributes. John Resig does a great job of describing what they do (another good article). They also seem to be quite backwards compatable. I just tested them on IE 8 with a non-HTML5 doctype. Still works.

jQuery 1.4.3 added a VERY simple way to reference these data attributes. If I have <table data-dt-rows="10"> then jQuery now makes that available via the data method as $("table").data("dt-rows") (just removes the "data-" part). No more needing to build custom regex per custom classname. It just works. Because it's within qutoes (instead of trying to be a single "word" class) you can pass sentences, arrays, json, etc.

This will give us the ability to allow for more complex setting of options while still hiding the complicated code from you.

Text Size
Screen

My Account Sign Out