javascript - 在 jQuery-ui 中，this._mouseInit 不是函数错误，为什么我升级到 1.8.2 后得到这个

Question

您好，在我升级到 1.8.2 jquery-ui 后，我的应用程序遇到了问题。我收到“this._mouseInit 不是函数错误”。

包括:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style type="text/css" media="all">@import "css/pinpoint.css";</style>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/base/jquery-ui.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.pinpoint.js"></script>

这是代码给我错误的地方:

$(window).load(function() {
  $.widget("ui.boxTool", $.extend({}, $.ui.mouse, {

  _init: function() {
    this.element.addClass("ui-boxTool");
    this.dragged = false;

    this._mouseInit();
    this.width = $('#toPinpoint').width();
    this.height = $('#toPinpoint').height();

    this.helper = $(document.createElement('div'))
      .css({border:'1px dashed #c2c0c0'})
      .css({cursor:'crosshair'})
      .addClass("ui-boxTool-helper");
  },

  destroy: function() {
    this.element
      .removeClass("ui-boxTool ui-boxTool-disabled")
      .removeData("boxTool")
      .unbind(".selectable");
    this._mouseDestroy();

    return this;
  },

  _mouseStart: function(event) {
    var self = this;

    this.opos = [event.pageX, event.pageY];

    if (this.options.disabled)
      return;

    var options = this.options;

    this._trigger("start", event);

    $(options.appendTo).append(this.helper);

    this.helper.css({
      "z-index": 100,
      "position": "absolute",
      "left": event.clientX,
      "top": event.clientY,
      "width": 0,
      "height": 0
    });
  },

  _mouseDrag: function(event) {
    var self = this;
    this.dragged = true;

    if (this.options.disabled)
      return;

    var offset = $('.canvas').offset();
    var options = this.options;
    var x1 = this.opos[0], y1 = this.opos[1], x2 = event.pageX, y2 = event.pageY;
    if (x1 > x2) { 
        var tmp = x2; 
        x2 = x1; 
        x1 = tmp; 
    }
    if (y1 > y2) { var tmp = y2; y2 = y1; y1 = tmp; }
    if (x2 > this.width+offset.left-1){x2=this.width+offset.left-1;}
    if (y2 > this.height+offset.top-1){y2=this.height+offset.top-1;}
    if (x1 < offset.left){x2=this.offset.left;}
    if (y1 < offset.top){ x2=this.offset.top;}
    this.helper.css({left: x1, top: y1, width: x2-x1, height: y2-y1});

    this._trigger("drag", event);

    return false;
  },

  _mouseStop: function(event) {
    var self = this;

    this.dragged = false;

    var options = this.options;

    var clone = this.helper.clone()
      .removeClass('ui-boxTool-helper').appendTo(options.appendTo);



    this._trigger("stop", event, { box: clone });

    this.helper.remove();
    //$('.view-mode').remove(this.helper);
    return false;
  }

  }));
});

Answer 1

在扩展小部件时，jQuery UI 1.8+ 中的语法发生了一些变化，这:

$(window).load(function() {
  $.widget("ui.boxTool", $.extend({}, $.ui.mouse, {

应该是这样的:

$.widget("ui.boxTool", $.ui.mouse, {

这里有两个变化:$.extend()不需要，它现在由参数决定，你不想在 window.onload 事件中声明插件......没有必要，它只会造成麻烦。

---

确保更改结尾以匹配最后两行:

  }));
});

现在应该是:

});