Как мне настроить параметры для моего 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