如何爲我的jQuery插件製作選項？

Question

我有一個爲一組變量設置寬度，高度，位置等的插件。如何修改我的lightbox插件，以便在使用選擇器初始化插件時設置設置選項（設置變量）？我介於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

會有所幫助如果圖沙爾古普塔善意協助。我一直在擺弄選項功能幾天，我一直想念的是，在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); 

Answer 2

plugins文檔

How to make options文檔

tutorial-creating-a-jquery-plugin

options-in-jquery-plugin