jquery - 如何使 JQuery 可调整大小和可拖动与 Greasemonkey 一起使用？

Question

[以下是我自己解决问题后的自答帖。我想有些人可能会觉得它有用。]

我尝试在 Greasemonkey 脚本中使用 JQuery 的 ressized 和 draggable，并且

• 我在 JS 控制台中收到错误“组件不可用”(NS_ERROR_NOT_AVAILABLE)”，
• 或者:
• 我在 JS 控制台中没有收到任何错误，但可拖动功能不起作用。

如何解决这个问题？

Answer 1

原因是某些版本的JQuery及其插件与GreaseMonkey不兼容。

以下是已确认可与 Firefox 7.0.1 + GreaseMonkey 0.9.11 配合使用的代码片段(应该可以在 Fx 3.0+ 和 GM 0.8+ 中工作)。它利用 GreaseMonkey 的 0.8+ @require 和 @resource 命令。 @require 和 @resource 中的文件安装用户脚本时下载(一次)，并存储在磁盘上与用户脚本相同的文件夹中。当依赖关系集发生更改时，例如当用户使用代码时，所有依赖项都会重新下载。

// @require       http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js
// @require       http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.2/jquery-ui.min.js

$('#someid').draggable().resizable();

您可以在 @require 之后添加以下内容来加载 JQuery UI CSS，但这不是必需的:

// @resource  jqueryUICSS https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/base/jquery-ui.css

// load JQuery UI CSS
var jqueryUICSS = GM_getResourceText("jqueryUICSS");
GM_addStyle(jqueryUICSS);

有关兼容性的一些信息:

// @require       http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js //DRAGGABLE FAILS
// @require       http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js //INCOMPATIBLE
// @require       http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js //OK
// @require       http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js //DRAGGABLE FAILS

// @require       http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.2/jquery-ui.min.js //OK
// @require       http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js //seems okay, but http://wiki.greasespot.net/Third-Party_Libraries says some other stuff is incompatible

// @resource  jqueryUICSS https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css //OK
// @resource  jqueryUICSS https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/base/jquery-ui.css //OK

文献:

• http://wiki.greasespot.net/Third-Party_Libraries
• http://viralpatel.net/blogs/2010/01/jquery-resizable-draggable-resize-drag-tutorial-example.html
• http://strd6.com/2009/02/how-to-load-jquery-ui-css-in-greasemonkey/

相关 StackOverflow 问题:

• Greasemonkey @require jQuery not working "Component not available"
• jQuery UI Dialog Throw Errors When Invoked from Greasemonkey
• How can I use jQuery in Greasemonkey?
• How to embed additional jQuery plugins into Greasemonkey