如何访问jQuery插件功能？

Question

所以我有一个jQuery插件，它工作得很好。在这个插件中，有一个分配给togglePushy();方法的HTML按钮，它工作得很好。

但是，我想从Javascript控制台使用此方法。问题是，如果类型为$.togglePushy();，它会说它是未定义的。我如何访问它？

$(function() {
    var pushy = $('.pushy'), //menu css class
        body = $('body'),
        container = $('#container'), //container css class
        push = $('.push'), //css class to add pushy capability
        siteOverlay = $('.site-overlay'), //site overlay
        pushyClass = "pushy-left pushy-open", //menu position & menu open class
        pushyActiveClass = "pushy-active", //css class to toggle site overlay
        containerClass = "container-push", //container open class
        pushClass = "push-push", //css class to add pushy capability
        menuBtn = $('.menu-btn, .pushy a'), //css classes to toggle the menu
        menuSpeed = 200, //jQuery fallback menu speed
        menuWidth = pushy.width() + "px"; //jQuery fallback menu width

    function togglePushy(){
        body.toggleClass(pushyActiveClass); //toggle site overlay
        pushy.toggleClass(pushyClass);
        container.toggleClass(containerClass);
        push.toggleClass(pushClass); //css class to add pushy capability
    }

    function openPushyFallback(){
        body.addClass(pushyActiveClass);
        pushy.animate({left: "0px"}, menuSpeed);
        container.animate({left: menuWidth}, menuSpeed);
        push.animate({left: menuWidth}, menuSpeed); //css class to add pushy capability
    }

    function closePushyFallback(){
        body.removeClass(pushyActiveClass);
        pushy.animate({left: "-" + menuWidth}, menuSpeed);
        container.animate({left: "0px"}, menuSpeed);
        push.animate({left: "0px"}, menuSpeed); //css class to add pushy capability
    }

    menuBtn.click(function() {
        togglePushy();
    });
});

Answer 1

也许你可以把togglePushy改成这样：

$.togglePushy = function(){ 
    body.toggleClass(pushyActiveClass); //toggle site overlay
    pushy.toggleClass(pushyClass);
    container.toggleClass(containerClass);
    push.toggleClass(pushClass); //css class to add pushy capability
}

现在您应该能够通过$.togglePushy()来访问它了

Answer 2

我不知道最好的解决方案。但是您可以通过将您的函数保留在domaready事件处理程序之外来完成此操作，如下所示。

function togglePushy(){
    body.toggleClass(pushyActiveClass); //toggle site overlay
    pushy.toggleClass(pushyClass);
    container.toggleClass(containerClass);
    push.toggleClass(pushClass); //css class to add pushy capability
}

function openPushyFallback(){
    body.addClass(pushyActiveClass);
    pushy.animate({left: "0px"}, menuSpeed);
    container.animate({left: menuWidth}, menuSpeed);
    push.animate({left: menuWidth}, menuSpeed); //css class to add pushy capability
}

function closePushyFallback(){
    body.removeClass(pushyActiveClass);
    pushy.animate({left: "-" + menuWidth}, menuSpeed);
    container.animate({left: "0px"}, menuSpeed);
    push.animate({left: "0px"}, menuSpeed); //css class to add pushy capability
}

$(function() {
    var pushy = $('.pushy'), //menu css class
        body = $('body'),
        container = $('#container'), //container css class
        push = $('.push'), //css class to add pushy capability
        siteOverlay = $('.site-overlay'), //site overlay
        pushyClass = "pushy-left pushy-open", //menu position & menu open class
        pushyActiveClass = "pushy-active", //css class to toggle site overlay
        containerClass = "container-push", //container open class
        pushClass = "push-push", //css class to add pushy capability
        menuBtn = $('.menu-btn, .pushy a'), //css classes to toggle the menu
        menuSpeed = 200, //jQuery fallback menu speed
        menuWidth = pushy.width() + "px"; //jQuery fallback menu width



    menuBtn.click(function() {
        togglePushy();
    });
});

然后直接调用togglePushy()。

Answer 3

您的togglePushy()函数仅在jQuery闭包(匿名函数)的上下文(作用域)中定义。在全局作用域中定义它(在文件中的其他地方，而不是作为“函数参数”)。

如果需要该作用域中的变量，请将它们封装在命名空间(对象)中，或者将其声明为window.togglePushy() = function() { /* ... */}。

或

$(document).ready(function() {
  ...
  .....
  window.togglePushy()= function() {
    //to do
  } 
});

或

$(document).ready(function(){
    $('button').click(function(){
        $.togglePushy();
    });
});