javascript - spin.js jquery 不工作

Question

我正在尝试使用这个:http://fgnass.github.io/spin.js/当我通过他们指定的 js 使用它时它工作正常。但是，当我想使用jquery插件时，它不起作用。难道我只需要执行 $('#elementID').spin() 并且它应该在该元素上启动微调器吗？

编辑:

在 jquery 插件中是这样写的:

$('#el').spin();//使用#el 的文本颜色创建一个默认的 Spinner。

这就是我想要使用的。人们在下面回答的常规 js 方式确实有效，但我不知道为什么这种 jquery 方式无法按照他们指定的方式工作。

Answer 1

fiddle Demo

jQuery Plugin

/*
You can now create a spinner using any of the variants below:

$("#el").spin(); // Produces default Spinner using the text color of #el.
$("#el").spin("small"); // Produces a 'small' Spinner using the text color of #el.
$("#el").spin("large", "white"); // Produces a 'large' Spinner in white (or any valid CSS color).
$("#el").spin({ ... }); // Produces a Spinner using your custom settings.

$("#el").spin(false); // Kills the spinner.

*/
(function ($) {
    $.fn.spin = function (opts, color) {
        var presets = {
            "tiny": {
                lines: 8,
                length: 2,
                width: 2,
                radius: 3
            },
                "small": {
                lines: 8,
                length: 4,
                width: 3,
                radius: 5
            },
                "large": {
                lines: 10,
                length: 8,
                width: 4,
                radius: 8
            }
        };
        if (Spinner) {
            return this.each(function () {
                var $this = $(this),
                    data = $this.data();

                if (data.spinner) {
                    data.spinner.stop();
                    delete data.spinner;
                }
                if (opts !== false) {
                    if (typeof opts === "string") {
                        if (opts in presets) {
                            opts = presets[opts];
                        } else {
                            opts = {};
                        }
                        if (color) {
                            opts.color = color;
                        }
                    }
                    data.spinner = new Spinner($.extend({
                        color: $this.css('color')
                    }, opts)).spin(this);
                }
            });
        } else {
            throw "Spinner class not available.";
        }
    };
})(jQuery);

---

您还需要包括 Spin.js

---

$('#foo').spin();