Html 5 data-attributes into jquery plugin options format

Question

In addition to jquery plugin options, I want to override those values with html5 data-attributes.

This is the desired format for the optionis:

var defaults = {
   text: {
      color: 'red',
      opacity: 0.5
   },
   button: {
      width: 100,
      height: 30
   }
}

I wanted to format the data-attribute something like this:

<div data-text="color:'red', opacity: 0.5"></div>

...But you wouldn't be able to read this data o.text.color because it simply does not exist. There is however data inside o.text.

How could I format the data-attribute so that I can fetch the value with o.text.color?

Razor · Accepted Answer · 2012-04-05 18:46:35Z

2

Just pass an object formatted like a json string to the attribute, and jQuery data will parse it for you.

<div class="test" data-test='{ "test1":"Lorem","test2":"Ipsum" }'></div>

Also see updated fiddle

answered Apr 5, 2012 at 18:46

Razor

30k8 gold badges57 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Joonas Over a year ago

This always happens.. It's something simple and I just couldn't wrap my finger around it. Thanks.

Adi · Accepted Answer · 2013-01-28 10:26:38Z

0

This isnt very clean and reminds me of onclick events in HTML. Why not seperate them out into data-test1="Lorem" & data-test2="Ipsum"?

Plugin could be something like this (extending jquery plugin boilerplate):

function Plugin( element, options, objD ) {
    this.element = element;
    this.options = $.extend( {}, defaults, options, objD );
    this._defaults = defaults;
    this._name = pluginName;
    this.init();
}

$.fn[pluginName] = function ( options ) {
  return this.each(function () {
    if (!$.data(this, "plugin_" + pluginName)) {
        var objD = $(this).data();
        $.data(this, "plugin_" + pluginName, new Plugin( this, options, objD ));
    }
  });
};

Im no guru but works well for me

answered Jan 28, 2013 at 10:26

Adi

4,03213 gold badges58 silver badges80 bronze badges

1 Comment

Joonas Over a year ago

The reason stems from my desire to use this format: pastebin.com/pnEeNje7 for the options, because I find it to be a bit cleaner and easier to remember compared to the usual way of laying them out like this: pastebin.com/6DxTvgzL especially if the names are long and there are multiple options.

Collectives™ on Stack Overflow

Html 5 data-attributes into jquery plugin options format

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related