Come estendere jQuery.css dal plugin

Question

Ho scritto un plugin molto semplice che mi permette di usare il formato 0xffccaa per i colori CSS invece di '#ffccaa' (principalmente per evitare di scrivere virgolette - ma anche per consentire una facile modifica dei colori semplicemente aggiungendo a è un numero intero).

Sto implementando come $().xcss({}), ma preferirei semplicemente usare $().css({}).

Come è possibile estendere la funzionalità della funzione $.fn.css e ci sono delle insidie ​​a cui è necessario prestare attenzione?

Inoltre, credo che vorrò fare lo stesso per $.animate.

Fiddle: http://jsfiddle.net/hB4R8/

// pugin wrapper 
(function($){ $.fn.xcss = function(opts){ 
    // loop through css color properties 
    $.each(['background', 'backgroundColor','background-color', 'color', 'borderColor','border-color'],function(i,v){ 
     // if set as number (will be integer - not hex at this point) 
     // convert the value to `#ffccaa` format (adds padding if needed) 
     if(typeof opts[v] === 'number') 
      opts[v] = ('00000'+opts[v].toString(16)).replace(/.*([a-f\d]{6})$/,'#$1') 
    }) 
    // run css funciton with modified options 
    this.css(opts) 
    // allow chaining 
    return this 
} })(jQuery) 

// test the plugin 
$('body').xcss({ 
    'background-color': 0xffccFF, 
    color: 0xccffcc, 
    border: '3px solid red', 
    borderColor:0x0ccaa, 
    padding:50 
}).html('<h1>This should be a funny color</h1>') 

Answer 1

Questo sembra funzionare per me: http://jsfiddle.net/frfdj/

(function($) { 
    var _css = $.fn.css; // store method being overridden 
    $.fn.css = function(opts) { 
     $.each(['background', 'backgroundColor', 'background-color', 'color', 'borderColor', 'border-color'], function(i, v) { 
      if (typeof opts[v] === 'number') opts[v] = ('00000' + opts[v].toString(16)).replace(/.*([a-f\d]{6})$/, '#$1') 
     }) 
     return _css.apply(this, [opts]); // call original method 
    } 
})(jQuery) 

Answer 2

https://github.com/aheckmann/jquery.hook/blob/master/jquery.hook.js

Sulla base di questo codice per la creazione di ganci per funzioni arbitrarie, si può semplicemente ignorare $ .fn.css con un metodo che fa quello che si vuole prima di chiamare il funzione originale