Eklentiden jQuery.css nasıl genişletilir

Question

'#ffccaa' yerine css renkleri için 0xffccaa biçimini kullanmamı sağlayan çok basit bir eklenti yazdım (çoğunlukla tırnak yazmayı önlemek için), ayrıca renklerin kolayca değiştirilmesine izin vermek için bir tamsayı olarak).

$().xcss({}) olarak yapıyorum, ancak yalnızca $().css({})'u kullanmayı tercih ediyorum.

$.fn.css işlevinin işlevselliğini nasıl uzatabilirim ve dikkat etmem gereken herhangi bir tuzak var mı?

Ayrıca, sanırım $.animate için aynısını yapmak istiyorum.

Fiddle: keyfi fonksiyonlar için kanca oluşturmak için bu kod dayanarak 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

Bu benim için iş gibi görünüyor: 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

, sadece aramadan önce ne istediğinizi yapan bir yöntemle $ .fn.css geçersiz kılabilirsiniz orijinal işlev