Question

I’ve developed a few jQuery plugins before which follow the format of either $('#something').myPlugin() or $.myPlugin().

I know you can also write your own selectors.

What I was wondering if I could write a plugin that changes how the css() method works, that is, if I request a shorthand CSS attribute (such as padding) I could return something like this

return $(this).css('padding-top') + ' ' + $(this).css('padding-right') + ' ' + $(this).css('padding-bottom') + ' ' + $(this).css('padding-left');

Is this possible? How would I do it if so?

Thanks

Answer 1

It is possible, but its use in production should be avoided at all costs.

Changing the core functionality of a library that is so often used in tandem with multiple plugins is a bad, dangerous, and bad-and-dangerous idea.

It may be possible for you to cause the overwritten method to interface and behave in its original way and to only behave differently for a subset of parameters; however, in subsequent releases of the library, if this core method changes, you may, in short, be screwed and have to revisit the overwritten method.

It’s best to use a different method name. Perhaps, for your uses, you can use style , xCss, cssExt, or something along those lines.

If you’re looking for one method to combine the functionality of both your method and the core method, then it is best to take the opposite approach. Instead of overwriting the core method, wrap it with additional functionality, and of course, a new name.

jQuery.fn.xCss = (function() {
    var compoundProperties = {
        'padding':    ['padding-top', 'padding-right' ...],
        'border':     ['border-width', 'border-style', ...],
        'background': ['background-color', ...],
        ...
    };

    return function(property, value) {
        // Use plugin functionality
        if ( compoundProperties.hasOwnPropery(property) ) { 
            // Get value
            if ( !value ) {
                var propertySet = compoundProperties[property],
                    result      = [];

                for ( var i=0, l=propertySet.length; i<l; ++i ) {
                    result.push( this.css(propertySet[i]) );
                }

                return result.join(" ");
            }

            // Set value
            ...
            return this;
        }

        // Use core functionality
        return this.css.apply(this, arguments);
    };
})();

* Code not tested or complete.