Возникли проблемы при создании плагина jQuery

Question

Возникли проблемы при создании плагина jQuery

0

Я создаю плагин, который заставляет страницу (или элемент) исчезать, когда вы нажимаете на ссылку и исчезаете при загрузке страницы. Код, который у меня есть, не работает на моей демо-странице, поэтому я спрашиваю, можете ли вы взглянуть на него?

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Smoode</title>
    <style>
        .container{
            margin:10px auto;
            background:#DDD;
            padding:10px;
            width:500px;
            border:5px solid #000;
        }
    </style>
</head>
<body>
    <div class="container">
        <a href="smoode.html" class="smoode">
            Smoode!
        </a><br />
        <a href="smoode.html">Not smoode</a>
    </div>
</body>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
(function( $ ){
    $.fn.smoode = function() {
        var settings = $.extend({
            // These are the defaults.
            linkClass: "*",
            fadeElement: "body",
            fadeDuration: "300"
        }, options );
        $(document).load(function(){
            $(settings.fadeElement).hide();
            $(settings.fadeElement).fadeIn(settings.fadeDuration);
        });
        return this.click(function(e){
            e.preventDefault();
            $(settings.fadeElement).fadeOut(settings.fadeDuration).setTimeout(function() {
              window.location.href = $(this).attr("href");
            }, settings.fadeDuration);
        });
    }; 
})( jQuery );

$(".smoode").smoode({
    fadeElement: ".container",
    fadeDuration: "1000"
});
</script>
</html>

Я предполагаю, что проблема может быть в том, где я использую "return" и как я вставляю переменные из "настроек", но я не уверен, как это сделать.

imp 30 нояб. 2013, в 14:02

Источник

0

вы не передаете параметры своей функции smoode.
bagonyi 30 нояб. 2013, в 12:46
0

Как бы я это сделал? Я скопировал и вставил это из документации, а в противном случае все выглядит нормально?
imp 30 нояб. 2013, в 12:47
0

Смотрите ответ ниже. Я полагаю, вы скопировали версию, в которой не было вариантов.
bagonyi 30 нояб. 2013, в 12:52

Показать ещё 1 комментарий

Теги:

jquery

function

2 ответа

2

(function ($) {
    $.fn.smoode = function (options) {
        var settings = $.extend({
            // These are the defaults.
            linkClass: "*",
            fadeElement: "body",
            fadeDuration: "300"
        }, options);

        $(document).load(function () {
            $(settings.fadeElement).hide();
            $(settings.fadeElement).fadeIn(settings.fadeDuration);
        });

        return this.click(function (e) {
            e.preventDefault();
            $(settings.fadeElement).fadeOut(settings.fadeDuration).setTimeout(function () {
                window.location.href = $(this).attr("href");
            }, settings.fadeDuration);
        });
    };
})(jQuery);

$(".smoode").smoode({
    fadeElement: ".container",
    fadeDuration: "1000"
});

bagonyi 30 нояб. 2013, в 11:21

0

Это заставляет fadeOut работать, но все еще не перенаправляет, и fadeDuration остается 300 независимо от того, что я вставлю. Любая идея, как я это исправлю?
imp 30 нояб. 2013, в 16:04

Ещё вопросы

вы не передаете параметры своей функции smoode.
Как бы я это сделал? Я скопировал и вставил это из документации, а в противном случае все выглядит нормально?
Смотрите ответ ниже. Я полагаю, вы скопировали версию, в которой не было вариантов.
Это заставляет fadeOut работать, но все еще не перенаправляет, и fadeDuration остается 300 независимо от того, что я вставлю. Любая идея, как я это исправлю?

adeneo · Accepted Answer · 2013-11-30T09-51-00.000Z

Передайте параметры плагину, удалите $(document).load(function(){... поскольку у документа нет функции onload, и он никогда не запускается, и использовать обратный вызов для анимированных методов, нет необходимости в тайм-ауте (и таймауты не могут быть связаны между собой):

(function ($) {
    $.fn.smoode = function (options) {
        var settings = $.extend({
            linkClass: "*",
            fadeElement: "body",
            fadeDuration: "300"
        }, options);

        $(settings.fadeElement).hide().fadeIn(settings.fadeDuration);

        return this.click(function (e) {
            e.preventDefault();
            var self = this;
            $(settings.fadeElement).fadeOut(settings.fadeDuration, function () {
                window.location.href = self.href;
            });
        });
    };
})(jQuery);

$(function() {
    $(".smoode").smoode({
        fadeElement: ".container",
        fadeDuration: "1000"
    });
});

FIDDLE

Спасибо за ваш ответ :) Единственная проблема заключается в том, что «this.href» выглядит как неопределенный (когда я нажимаю на ссылку smoode, я перенаправляюсь на / undefined вместо /smoode.html в моей локальной демоверсии)
@Schart - проблема с областью видимости, исправлена.