Question

我有一个jQuery插件。我从我的页面中将其称为：

$('#mySelector').myPlugin();

我有几个带有该插件的函数。如何从我的文档中调用名为 close（）的函数？

这是插件的代码：

;(function ($, window, document) {

// window and document are passed through as local variable rather than global
// as this (slightly) quickens the resolution process and can be more efficiently
// minified (especially when both are regularly referenced in your plugin).

function boxPos(el) {

    // calculate/set height of content area         
    var winH = $(window).height(),                          // viewport height
        winW = $(window).width(),                           // viewport width
        ttlH = $('#bmcTitle').outerHeight(true),            // modal title element height
        auxH = $('#bmcAux').outerHeight(true),              // auxiliary area element height
        ftrH = $('#bmcFooter').outerHeight(true),           // modal footer element height
        cntH = winH - ttlH - auxH - ftrH - 150;             // calculated content area height 

    $('#bmcContent').css('max-height', cntH+'px');

    // position modal in center
    var boxH = $('#bmc').outerHeight(true),                 // real modal height
        bmcH = ttlH + auxH + cntH + ftrH + 80,              // modal height plus content padding/margin  
        bmcW = $('#bmc').outerWidth(true),                  // real modal width 
        bmcT = (winH - (boxH < bmcH ? boxH : bmcH)) / 2,    // top offset for centering         
        bmcL = (winW - bmcW) / 2;                           // left offset for centering 

    $('#bmc').css({ 'top': bmcT+'px', 'left': bmcL+'px' });
    $('html, body').css('overflow','hidden');
}

function boxRePos(el) {

    // calculate/set height of content area         
    var winH = $(window).height(),                          // viewport height
        winW = $(window).width(),                           // viewport width
        ttlH = $('#bmcTitle').outerHeight(true),            // modal title element height
        auxH = $('#bmcAux').outerHeight(true),              // auxiliary area element height
        ftrH = $('#bmcFooter').outerHeight(true),           // modal footer element height
        cntH = winH - ttlH - auxH - ftrH - 150;             // calculated content area height 

    $('#bmcContent').css('max-height', cntH+'px');

    // position modal in center
    var boxH = $('#bmc').outerHeight(true),                 // real modal height
        bmcH = ttlH + auxH + cntH + ftrH + 80,              // modal height plus content padding/margin  
        bmcW = $('#bmc').outerWidth(true),                  // real modal width 
        bmcT = (winH - (boxH < bmcH ? boxH : bmcH)) / 2,    // top offset for centering         
        bmcL = (winW - bmcW) / 2;                           // left offset for centering 

    $('#bmc').animate({ 'top': bmcT+'px', 'left': bmcL+'px' });
}

$.fn.close = function() {
    $('#bmc, .bmcOverlay').remove();
    $('html, body').css('overflow','');
}

$.fn.bmc = function() { 

    // REQUIRED -- modal title
    var el = $(this),
        boxHeader = el.attr('title'),                       // modal title          
        boxContnt = el.find('#bmcMid').show().html(),       // content area will overflow if content exceeds max space          
        overlay   = $('<div />').css('opacity','.8').addClass('bmcOverlay');

    // check if form is present
    if (el.find('form').length > 0) {
        var boxForm      = el.find('form').clone().empty(),
            boxFormTags  = boxForm[0].outerHTML,
            boxFormOpen  = boxFormTags.split("</")[0];  
            boxFormClose = '</form>';
    } else {
        var boxFormOpen  = '',
            boxFormClose = '';
    }

    // OPTIONAL -- reserved spot for anything static on top of modal box, like errors, or description.
    if (el.find('#bmcTop').length > 0) {
        var boxAuxilr = (el.find('#bmcTop').html() == '' ? '' : '<div id="bmcAux">'+el.find('#bmcTop').html()+'</div>');            
    } else {
        var boxAuxilr = '';
    }

    // OPTIONAL -- static area at the bottom of modal. Put buttons here.
    if (el.find('#bmcBtm').length > 0) {
        var boxFooter = (el.find('#bmcBtm').html() == '' ? '' : '<div id="bmcFooter">'+el.find('#bmcBtm').html()+'</div>');
    } else {
        var boxFooter = '';     
    }

    // assemble modal box
    var modalBx = $('<div id="bmc"><div id="bmcClose"></div><div id="bmcTitle">'+ boxHeader +'</div>'+ boxAuxilr + boxFormOpen +'<div id="bmcContent">'+ boxContnt +'</div>'+ boxFooter + boxFormClose +'</div>');  

    $('body').append(overlay, modalBx).hide().fadeIn(500);

    function close() {
        modalBx.remove();
        overlay.remove();
        $('html, body').css('overflow','');
    }

    // load modal
    boxPos(el);

    // adjust position and dimentions of the modal
    $(window).resize(function() {
        boxPos(el);
    });

    $('#bmc').find('a, div, span, p, td, input').on('mouseup', function() {
        setTimeout(function(){ boxRePos(el); }, 100);
    });

    // close and remove modal
    $('#bmcClose, .bmcClose').on('click', function() {
        $(this).close();
    });

    return;
};

})(jQuery, window, document);

Answer 1

我没有阅读完整的代码，但通常你会这样做

$('#mySelector').myPlugin('close');

修改

看不到此插件允许您调用close功能。在不更改插件代码的情况下，我会说你能做的最好就是触发#bmcClose上的点击事件，但这不是很优雅。

$('#bmcClose').trigger('click');

如果更改插件的代码是一个选项，您可以更好地公开关闭功能。

从插件中调用函数

1 个答案: