Как расширить jQuery.css из плагина - PullRequest
Новая
       6

Как расширить jQuery.css из плагина

8 голосов
/ 16 сентября 2011

Я написал очень простой плагин, который позволяет мне использовать 0xffccaa формат для цветов CSS вместо '#ffccaa' (в основном, чтобы избежать написания кавычек - но также и для простой модификации цветов, просто добавляя к нему как целое число).

Я реализую как $().xcss({}), но предпочел бы просто использовать $().css({}).

Как расширить функциональность функции $.fn.css и есть ли подводные камни?Мне нужно остерегаться?

Кроме того, я думаю, я захочу сделать то же самое для $.animate.

Скрипка: 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>')

Ответы [ 2 ]

5 голосов
/ 16 сентября 2011

Мне кажется, это работает: 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)
2 голосов
/ 16 сентября 2011

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

Основываясь на этом коде для создания ловушек для произвольных функций, вы можете просто переопределить $ .fn.css методом, который делает то, что вам нужно, перед вызовом исходной функции.

...