Question

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

编辑：

在jquery插件中它说：

$('#el').spin(); // Creates a default Spinner using the text color of #el.

这就是我想要使用的。人们在下面回答的常规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();

Answer 2

如果您不想在JQuery中安装函数，只需使用查询元素即可。

new Spinner().spin($('#foo')[0]);

spin.js jquery无法正常工作

2 个答案: