Question

我有这个jquery代码，但我无法设置默认行为。哪里（我的意思是代码中的位置）我可以编写默认指令吗？返回此之后或之前或之处？谢谢你的回答。

// corners v2
$.fn.corners2 = function (options) {
    // defaults settings for corners2
    var defaults = {
        // corners default style
        corners: 'default',

        // corners default radius 
        border_radius: '1',

        // borders default style
        border_style: 'solid',

        // borders default color without # symbol
        border_color: '#f7145a'
    };

    // options
    var options = $.extend({}, defaults, options);

    return this.each(function () {
        var element = $(this);

        // corners
        switch (options.corners) {
            // all
            case 'all':
                element.css({
                    '-webkit-border-radius': '' + options.radius + 'px',
                    '-moz-border-radius': '' + options.radius + 'px',
                    'border-radius': '' + options.radius + 'px'
                });
                break;

                // top left
            case 'top-left':
                element.css({
                    '-webkit-border-top-left-radius': '' + options.radius + 'px',
                    '-moz-border-radius-topleft': '' + options.radius + 'px',
                    'border-top-left-radius': '' + options.radius + 'px'
                });
                break;

                // top right
            case 'top-right':
                element.css({
                    '-webkit-border-top-right-radius': '' + options.radius + 'px',
                    '-moz-border-radius-topright': '' + options.radius + 'px',
                    'border-top-right-radius': '' + options.radius + 'px'
                });
                break;
        }
    });
};
}(jQuery));

Answer 1

// corners v2
$.fn.corners2 = function (opts) {
    // defaults settings for corners2
    var defaults = {
        // corners default style
        corners: 'default',

        // corners default radius 
        border_radius: '1',

        // borders default style
        border_style: 'solid',

        // borders default color
        border_color: '#f7145a'

        // border size
        border_width: 1
    };

    // options
    var options = $.extend({}, defaults, opts);

    return this.each(function () {
        var element = $(this);

        $(this).css({
            borderWidth:options.border_width,
            borderStyle:options.border_style,
            borderColor:options.border_color});

        // corners
        switch (options.corners) {
            // all
            case 'all':
                element.css({
                    '-webkit-border-radius': '' + options.border_radius + 'px',
                    '-moz-border-radius': '' + options.border_radius + 'px',
                    'border-radius': '' + options.border_radius + 'px'
                });
                break;

                // top left
            case 'top-left':
                element.css({
                    '-webkit-border-top-left-radius': '' + options.border_radius + 'px',
                    '-moz-border-radius-topleft': '' + options.border_radius + 'px',
                    'border-top-left-radius': '' + options.border_radius + 'px'
                });
                break;

                // top right
            case 'top-right':
                element.css({
                    '-webkit-border-top-right-radius': '' + options.border_radius + 'px',
                    '-moz-border-radius-topright': '' + options.border_radius + 'px',
                    'border-top-right-radius': '' + options.border_radius + 'px'
                });
                break;
            // Add cases for bottom-left, bottom-right, top, left, right, bottom, top-bottom, left-right, top-left-right, etc.
        }
    });
};

Jquery边框插件

1 个答案: