Question

我开始使用jQuery UI。

我想了解更多有关jQuery UI鼠标小部件的信息。我正在试图找出它的文档，但它不可用。任何人都知道资源的可用位置？

Answer 1

查看http://bililite.com/blog/understanding-jquery-ui-widgets-a-tutorial/标题为“涉及鼠标”的部分

在你自己的widget的_init函数中调用this._mouseInit，然后覆盖_mouseDown，_mouseDrag等函数。

Answer 2

鼠标小部件是一个内部插件，似乎主要（或仅）用于低级拖放操作。

我刚写了一篇关于使用它来推送你自己的拖放（而不是使用Draggable）的博文：http://www.solitr.com/blog/2012/05/roll-your-own-drag-and-drop-handling-with-jquery-ui/

它的要点是，您可以将其子类化，如下所示：

$.widget('ui.custommouse', $.ui.mouse, {
  options: {
    mouseStart: function(e) {},
    mouseDrag: function(e) {},
    mouseStop: function(e) {},
    mouseCapture: function(e) { return true; }
  },
  // Forward events to custom handlers
  _mouseStart: function(e) { return this.options.mouseStart(e); },
  _mouseDrag: function(e) { return this.options.mouseDrag(e); },
  _mouseStop: function(e) { return this.options.mouseStop(e); },
  _mouseCapture: function(e) { return this.options.mouseCapture(e); }
  // Bookkeeping, inspired by Draggable
  widgetEventPrefix: 'custommouse',
  _init: function() {
    return this._mouseInit();
  },
  _create: function() {
    return this.element.addClass('ui-custommouse');
  },
  _destroy: function() {
    this._mouseDestroy();
    return this.element.removeClass('ui-custommouse');
  },
});

然后实例化您刚刚定义的custommouse插件，并传递您自己的插件事件处理程序作为选项：

$('#containerElement').custommouse({
  mouseStart: function(e) { ... },
  mouseDrag: function(e) { ... },
  mouseStop: function(e) { ... }
});

Answer 3

新的鼠标插件文件使jQuery UI平均减少14％鼠标插件并不是新的，但是这个版本将它移动到它自己的文件jquery.ui.mouse.js，之前它在jQuery UI Core中。这意味着不依赖于鼠标插件但之前包含jQuery UI Core的jQuery UI插件包含的未使用代码较少，平均整体文件大小提高了14％。那只是一个平均值。一些改进将高达36％。

来自jQuery blog 2010年3月

在您的jQuery库中（如this from google），您可以在{{3>}找到 * jQuery UI Mouse 1.8.11 以及更多信息。

有谁知道jQuery UI鼠标小部件？

3 个答案: