CODEWITHSUNDEEP
jqueryjquery-plugins
Sivailango
Sivailango

Reputation: 564

Options did not apply for jQuery custom plugin

I just want to create custom jQuery plugin. I followed a tutorial from Tutplu, to create it. I have written the following sample code. But it did not apply styles to h1 element.

 if(typeof Object.create !== 'function') {
        Object.create = function(obj) {
            function F() {};
            F.prototype = obj;
            return new F();
        };
    }

(function($, window, document, undefined) {

    var Modal = {
        init: function(options, el) {
            var self = this;
            self.elem = el;
            self.options = $.extend({}, $.fn.modal.options, options);
        }
    };

    $.fn.modal = function(options) {

        return this.each(function() {
            var myModal = Object.create(Modal);
            myModal.init(options, this);
        });

    };

    $.fn.modal.options = {
        color: '#556b2f',
        backgroundColor: 'red'
    };


})(jQuery, window, document);

$(document).ready(function() {
    $('h1').modal();
});

How can I apply options to the h1 element?

Upvotes: 0

Views: 19

Answers (1)

Tomanow
Tomanow

Reputation: 7377

Modify your init() to loop through the options and apply as css styles like so:

var Modal = {
     init: function (options, el) {
         var self = this;
         self.elem = el;
         self.options = $.extend({}, $.fn.modal.options, options);
         for (var prop in self.options) {
             if (self.options.hasOwnProperty(prop)) {
                 $(self.elem).css(prop, self.options[prop]);
             }
         }
     }
 };

Upvotes: 1

Related Questions