Question

新手在这里......

我在这里找到了这个惊人的弹出代码。我在我的项目中使用它就好了。我要问的是，有人可以帮助我将其转换为插件 - 代码，以便我可以定位所需的div并在多个元素上轻松使用它。

代码：

$(document).ready(function () {
    var offsetY = window.pageYOffset,
    $body = $('body'),
    $win = $(window),
    $close = $('.mobile-filters-close'),
    $open = $('.filters-toggle'),
    $holder = $('.mobile-filters-wrapper'),
    $stuff = $('.mobile-filters-wrapper .filters');

    // Close with 'esc' key
    $(document).keyup(function (e) {
        if (e.keyCode == 27) $close.trigger('click');
    });

    $open.click(function () {
        offsetY = window.pageYOffset;
        // Block scrolling
        $body.css({
        'position': 'fixed',
        'color': '#FFFF00',
        'backgroundColor': '#00D',
        'top': -offsetY + 'px'
    });

    // Show popup
    $holder.css('display', 'block');
    });

    $close.click(function () {
        // Allow scrolling again
        $body.css({
        'position': 'static',
        'color': '',
        'backgroundColor': ''
    });

    /**
    * Remove the following scrollTop()'s if you want.
    * just a UI tweak that the user would expect.
    **/
    // Make the page stay at the position it was at before the overlay
    $win.scrollTop(offsetY);
    // Reset the overlay scroll position to the top
    $stuff.scrollTop(0);
    // Hide popup
    $holder.css('display', 'none');
    });
});

这就是我正在寻找的：

$('.popup').CoolName({
    // options
    $close = $('.mobile-filters-close'),
    $open = $('.filters-toggle'),
    $holder = $('.mobile-filters-wrapper'),
    $stuff = $('.mobile-filters-wrapper .filters');
});

感谢您的帮助：）

Answer 1

稍微清理了一些事情：

{{1}}

请注意，在制作插件时，变量名，函数名和HTML元素名的可能性总是与其他人的代码打断。我会在所有变量/函数前加上＆＃34; coolName _＆＃34;为了防止这种情况，如果这是有道理的。

如何将此jquery代码转换为jquery插件？

1 个答案: