Question

我不知道如何调用我的问题，所以我希望即使问题的名称不好，你们也会帮助我。

我有一个从github下载的morhpext库。整个代码如下所示：

 /*!
 * Morphext - Text Rotating Plugin for jQuery
 * https://github.com/MrSaints/Morphext
 *
 * Built on jQuery Boilerplate
 * http://jqueryboilerplate.com/
 *
 * Copyright 2014 Ian Lai and other contributors
 * Released under the MIT license
 * http://ian.mit-license.org/
 */

/*eslint-env browser */
/*global jQuery:false */
/*eslint-disable no-underscore-dangle */

(function ($) {
    "use strict";

    var pluginName = "Morphext",
        defaults = {
            animation: "bounceIn",
            separator: ",",
            speed: 2000,
            complete: $.noop
        };

    function Plugin (element, options) {
        this.element = $(element);

        this.settings = $.extend({}, defaults, options);
        this._defaults = defaults;
        this._init();
    }

    Plugin.prototype = {
        _init: function () {
            var $that = this;
            this.phrases = [];

            this.element.addClass("morphext");

            $.each(this.element.text().split(this.settings.separator), function (key, value) {
                $that.phrases.push($.trim(value));
            });

            this.index = -1;
            this.animate();
            this.start();
        },
        animate: function () {
            this.index = ++this.index % this.phrases.length;
            this.element[0].innerHTML = "<span class=\"animated " + this.settings.animation + "\">" + this.phrases[this.index] + "</span>";

            if ($.isFunction(this.settings.complete)) {
                this.settings.complete.call(this);
            }
        },
        start: function () {
            var $that = this;
            this._interval = setInterval(function () {
                $that.animate();
            }, this.settings.speed);
        },
        stop: function () {
            this._interval = clearInterval(this._interval);
        },
        kalreg: function () {
            console.log("call invoked!");
        }
    };

    $.fn[pluginName] = function (options) {
        return this.each(function() {
            if (!$.data(this, "plugin_" + pluginName)) {
                $.data(this, "plugin_" + pluginName, new Plugin(this, options));
            }
        });
    };
})(jQuery);

它有自己的“功能” - 动画，启动和停止。不幸的是，只能从原型内部或回调函数中调用它。每次动画完成时调用最后一个（使用setInterval / setTimeout）。我不想等到动画结束然后从回调中调用任何东西 - 我想在原型之外的任何时候停止它。所以，如果我做：

    $(".title").Morphext({
        animation: [ "bounceIn"],
        speed: (1000,
        complete: function () {
            if (this.index === this.phrases.length - 1) {
                this.stop();
            };
    }

我也会随时随地启动原型内的东西。我创建了一个函数“kalreg”（首先在上面提到）。我的意思是：

$(".title").kalreg()

或

$(".title").Morphext().kalreg()

或

$(".title").Morphext(kalreg())

换句话说：我想调用kalreg函数，它是Morphext原型的一部分，从任何时刻和代码的任何部分调用任何DOM元素。这该怎么做？

Answer 1

您可以像下面这样构建插件：

var AddNew = React.createClass({
  getInitialState: function() {
    return {elements:[]}
  },
  nameChange: function(index, e) {
    var elements = this.state.elements;
    elements[index].name = e.target.value;

    this.setState({elements: elements});   
    console.log(this.state.elements);
  },
  quantityChange: function(index, e) {
    var elements = this.state.elements;
    elements[index].quantity = e.target.value;

    this.setState({elements: elements});   
    console.log(this.state.elements);
  },
  priceChange: function(index, e) {
    var elements = this.state.elements;
    elements[index].price = e.target.value;

    this.setState({elements: elements});   
    console.log(this.state.elements);
  },
  createNewSet: function(e) {
    var elements = this.state.elements;
    elements.push({name: '', quantity: '', price: ''});

    this.setState({elements: elements});
  },
  render: function() {
    return (
      <div className="new-section">
        {this.state.elements.map((element, index) =>
          <div key={index}>
            <div>
              <label>Name</label>
              <input className="add-name" type="text" value={element.name} onChange={this.nameChange.bind(this, index)} />
            </div>
            <div>
              <label>Quantity Available</label>
              <input className="add-name" type="text" value={element.quantity} onChange={this.quantityChange.bind(this, index)} />
            </div>
            <div>
              <label>Price</label>
              <input className="add-name" type="text" value={element.price} onChange={this.priceChange.bind(this, index)} />
            </div>
          </div>
        )}

      <button className="add-another" onClick={this.createNewSet}>+ Add another set of inputs</button>
      </div>
    );
  }
});

Answer 2

您提到的插件在功能上看起来非常有限。您正在谈论在执行期间停止动画，并且需要一些重新编写才能使其工作。

通过更强大的动画包可以更好地服务，听起来像。我强烈推荐Greensock / TweenMax库。

Answer 3

我是该项目的作者，从'outside'调用方法非常简单（我真的应该更好地记录它）。

实际上，当最初添加stop()和start()时，会添加它们，以便允许您从外部停止/启动它（除了回调之外）。

除非我误解了你的问题，否则你可以通过做类似的事情来完成你想要的事情：

var morphext = $("#js-rotating").Morphext({
   animation: "rotateIn"
});
var data = morphext.data("plugin_Morphext");

// Start Morphext (autostarts by default)
data.start();

// Stop Morphext
data.stop();

以上内容记录在release notes。

中

默认功能是有意限制的，但它们很容易extend。

我希望有所帮助。如果没有，请告诉我。

jquery - 随时随地从对象外部调用原型函数

3 个答案: