0

我有一个为宽度、高度、位置等设置了一堆变量的插件。如何修改我的灯箱插件，以便在使用选择器初始化插件时可以设置设置选项（设置变量）？我是 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);
4

2 回答 2

0

插件文档

如何制作选项文档

教程创建一个 jquery 插件

jQuery 插件中的选项

于 2013-08-26T00:54:45.237 回答
0

如果 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);
于 2013-08-27T20:43:11.307 回答