Question

我有一个插件，其中包含一系列宽度，高度，位置等变量。如何修改灯箱插件，以便在使用选择器初始化插件时可以设置设置选项（设置变量）？我是jQuery的中间人，并没有制作很多插件。

感谢您的帮助。

我的插件如下：

(function($){
$.fn.scpopup = function(){

    // Settings Variables
    var linkType        = "iframe";     // iframe, inline, html, image
    var scWidth         = "65%";        // Width of popup container (in px, % or auto)
    var scHeight        = "auto";       // Height of popup container (in px, % or auto)
    var popupMaxWidth   = "700px;";     // Max width of popup container (in px, % or auto)
    var popupMaxHeight  = "auto";       // Max width of popup container (in px, % or auto)
    var popupTheme      = "test";       // Popup theme name (is an additional class added to parent)
    var activeClass     = "active";     // Class name to use for active elements
    var popupPosition   = "fixed";      // absolute, fixed
    var effectOpen      = "";           // Popup opening effect
    var effectClose     = "";           // Popup closing effect

    var htmlContent     = "<h2>Title</h2><p>This content will go into the popup.</p>";           // Must set linkType to html

    // Functions to Specify Width and Height of Popup
    function scpopupWidth(scW) {
        $('#scpopup').css({'position' : popupPosition, 'margin-left' : '-' + scW/2 + 'px'});
    }
    function scpopupHeight(scH) {
        $('#scpopup').css({'position' : popupPosition, 'margin-top' : '-' + scH/2 + 'px'});
    }

    // Append Backdrop and Content Container
    $('body').append('<div class="popupbackdrop"></div>');
    $('body').append('<div id="scpopup" class="scpopup"><div id="scpopupouter"><div id="scpopupinner"><div id="scpopuptitle"></div><div id="scpopupsubtitle"></div><div id="scpopupholder"><div id="scpopupcontent"></div><div class="clear"></div></div><div class="clear"></div></div><div class="clear"></div></div>');

    // Set Width and Height of Outer Container
    $('#scpopup').width(scWidth).height(scHeight).addClass(popupTheme);

    $(this).addClass('scpopuplink');

    // Click Event: Open
    $(this).on('click', function(e){
        e.preventDefault();

        // Margin/Width/Height for Popup
        scpopupWidth($('#scpopup').width());
        scpopupHeight($('#scpopup').height());

        // Setting Body/HTML tags to 100% width and height
        $('body', 'html').css({'width' : '100%', 'height' : '100%'});
        $('body').addClass('scpopupactive');

        // Transitions
        $('div.popupbackdrop').fadeIn(150).addClass(activeClass);
        $('#scpopup').fadeIn(300).addClass(activeClass);

        // Empty Title/Subtitle Holders on Click
        $('#scpopuptitle, #scpopupsubtitle').empty();

        // Load Title/Subtitles on Click
        $('<span></span>').text($(this).attr('title')).appendTo('#scpopuptitle');
        $('<span></span>').text($(this).attr('alt')).appendTo('#scpopupsubtitle');

        // Link Type (linkType)
        if(linkType == 'iframe'){
            $('#scpopupcontent').empty().append(
                $('<iframe>', {src: this.href})
            );
            //$('#scpopupcontent').empty().append('<iframe src="' + this.href + '"></iframe>');
        }else if(linkType == 'inline'){
            //alert('inline');
        }else if(linkType == 'html') {
            $('#scpopupcontent').empty().append(htmlContent);
        }else if(linkType == 'image') {
            //alert('image');
        }
    });

    // Click Event: Close
    $('div.popupbackdrop').on('click', function(e){
        e.preventDefault();

        $('body').removeClass('scpopupactive');
        $(this).delay(50).fadeOut(300).removeClass(activeClass);
        $('#scpopup').delay(25).fadeOut(150).removeClass(activeClass);
    });
};
})(jQuery);

Answer 1

plugins文档

How to make options 文档

tutorial-creating-a-jquery-plugin

options-in-jquery-plugin

Answer 2

如果Tushar Gupta非常友好地提供帮助，那将会有所帮助。我一直在使用选项功能几天，而我一直缺少的是，var default中设置了每个选项，我必须在整个代码中为每个项添加options.。我刚刚了解到options.必须加入，现在事情开始对我有用了。

以下是修改后的部分：

// Settings Variables
var linkType        = "iframe";     // iframe, inline, html, image
var scWidth         = "65%";        // Width of popup container (in px, % or auto)
var scHeight        = "auto";       // Height of popup container (in px, % or auto)
var popupMaxWidth   = "700px;";     // Max width of popup container (in px, % or auto)
var popupMaxHeight  = "auto";       // Max width of popup container (in px, % or auto)
var popupTheme      = "test";       // Popup theme name (is an additional class added to parent)
var activeClass     = "active";     // Class name to use for active elements
var popupPosition   = "fixed";      // absolute, fixed
var effectOpen      = "";           // Popup opening effect
var effectClose     = "";           // Popup closing effect

var htmlContent     = "<h2>Title</h2><p>This content will go into the popup.</p>";           // Must set linkType to html

成为：

    var defaults = {

        // Settings Variables
        linkType        : "iframe",     // iframe, inline, html, image
        scWidth         : "65%",        // Width of popup container (in px, % or auto)
        scHeight        : "auto",       // Height of popup container (in px, % or auto)
        popupMaxWidth   : "700px;",     // Max width of popup container (in px, % or auto)
        popupMaxHeight  : "auto",       // Max width of popup container (in px, % or auto)
        popupTheme      : "test",       // Popup theme name (is an additional class added to parent)
        activeClass     : "active",     // Class name to use for active elements
        popupPosition   : "fixed",      // absolute, fixed
        effectOpen      : "",           // Popup opening effect
        effectClose     : "",            // Popup closing effect
        htmlContent     : "<h2>Title</h2><p>This content will go into the popup.</p>" // Must set linkType to html
    };

    var options = $.extend(defaults, options);

然后，我在整个代码中为上面的每个项目添加了options.。一个例子是：

$('#scpopup').width(options.scWidth).height(options.scHeight).addClass(options.popupTheme);

以前的代码是：

$('#scpopup').width(scWidth).height(scHeight).addClass(popupTheme);

如何为我的jQuery插件制作选项？

2 个答案: