Question

What I want to do is to set options into plugin like you normally would, but to also override those options with html5 data-attributes.

Here I have exactly that (jsfiddle), but there’s a slight problem with that.

JSFiddle Code:

(function($){
    $.fn.extend({
        test: function(options) {

            var defaults = {
                background: null,
                height: null
            };

            var options = $.extend( defaults, options);

            return this.each(function() {
                  var o = options;
                  var obj = $(this);
                  var objD = obj.data();


                    // background
                    if ( !objD.background) {
                        var cBG = o.background;
                    }
                    else {
                        var cBG = objD.background;
                    }

                    // Opacity
                    if ( !objD.height) {
                        var cH = o.height;
                    }
                    else {
                        var cH = objD.height;
                    }

                    obj.css({
                        background: cBG,
                        height: cH  
                    });

            });
        }
    });
})(jQuery);

$(document).ready(function() {
    $('.test').test({

        background: 'red',
        height: 400

    });
});

The method that I’m using in the jsfiddle bloats the code so much, even with just 2 different options that are also using data.

Question is: How could I achieve same end result with less code, to determine wether or not data should be used?

---

---

Here is the part of the code from the jsfiddle, that determines wether or not to use data.

// objD is obj.data();

// background
if ( !objD.background) {
    var cBG = o.background;
}
else {
    var cBG = objD.background;
}

// Opacity
if ( !objD.height) {
    var cH = o.height;
}
else {
    var cH = objD.height;
}

obj.css({
    background: cBG,
    height: cH  
});

Answer 1

I had a feeling that there might be a better solution, but I wasn’t able to get it working, until now.

---

Of course I am no expert, but this seems to work and shortens the code even more, since it works the same way the plugin options normally do, it just adds the data-attribute in there.

1. Default – Initially use default options.
2. Custom – If set, use custom options to override defaults.
3. Data – If set, use data to override both.

http://jsfiddle.net/lollero/HvbdL/5/

o = $.extend(true, {}, options, $(this).data() );

---

---

Here’s another jsfiddle example.

This one toggles the width of each box on click. The middle box has a data-attribute with bigger width value than the other divs.

As an extra example, here’s the same thing with 1 more option added in to the mix.