jQuery-UI 在没有 CSS 或自定义的情况下无法在我的用户脚本中工作？

Question

我只想在我正在制作的用户脚本中使用 jQuery-UI(菜单)的一小部分。 jQuery-UI 提供自定义下载，但我找不到任何指向特定模块的链接，我可以在脚本中使用 @require 。有人托管各个模块吗？

此外，我尝试只要求 code.jquery.com/ui/1.11.1/jquery-ui.js，并且脚本崩溃。
我还需要包含一些 CSS 吗？并且还做了一些看起来凌乱的更改，例如根据 this answer ？对于不同的 JQUI 版本，该代码会有所不同吗？如果我只使用 UI 的一小部分，这会改变我可以安全删除/不下载的内容吗？

我认为这会是一个流行的东西，有官方教程。但我没有看到很多关于如何在用户脚本中处理 JQUI 的资源。

我正在 Chrome 上运行 Tampermonkey。

Answer 1

用户脚本和 jQuery-UI 的问题是 jQUI 使用带有大量背景图像的 CSS，所有背景图像都通过相对路径加载。例如:

... url("images/ui-bg_dots-small_35_35414f_2x2.png") ...

出于安全原因，该相对路径很少适用于用户脚本。

这意味着要在用户脚本中使用 jQUI，您可以:

• 从服务器加载所需的 CSS。 (动态，不使用 @resource )
  或
• 使用动态CSS重写，如this old answer所示.

我现在建议仅使用 the standard themes 之一(请参阅左侧栏中的图库选项卡)，并使用 Google Hosted Libraries 。 Google 托管所有默认的 jQUI 主题，例如 UI 亮度等。

据我所知，没有人托管部分 jQUI 构建供公众使用。但是，由于您使用的是 @require ，JS 无论如何都会从本地机器加载(非常快)，因此您不妨省去维护麻烦并使用标准 jquery-ui.min.js文件。

如果你真的想要a custom jQUI build ，或高度定制的 CSS 主题，您将需要拥有自己的服务器并从那里托管文件。

这是一个完整的 Greasemonkey/Tampermonkey 脚本，展示了如何以简单的方式使用 jQUI。诀窍是使用<link>注入(inject) CSS节点，以便所有托管的背景图像都能正确加载:

// ==UserScript==
// @name        _Add stuff to a web page using jQuery UI.
// @include     https://stackoverflow.com/questions/*
// @require     http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js
// @require     http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js
// @grant       GM_addStyle
// ==/UserScript==

/*--- For this to work well, we must also add-in the jQuery-UI CSS.
    We add the CSS this way so that the embedded, relatively linked images load correctly.
    (Use //ajax... so that https or http is selected as appropriate to avoid "mixed content".)
*/
$("head").append (
    '<link '
  + 'href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/le-frog/jquery-ui.min.css" '
  + 'rel="stylesheet" type="text/css">'
);

//--- Add our custom dialog using jQuery.
$("body").append ('<div id="gmOverlayDialog"><h1>Sample Dialog added using jQuery-UI</h1></div>');

//--- Activate the dialog.
$("#gmOverlayDialog").dialog ( {
    modal:      false,
    title:      "Draggable, sizeable dialog",
    position:   {
           my: "top",
           at: "top",
           of: document
           , collision: "none"
    },
    width:      "auto",
    minWidth:   400,
    minHeight:  200,
    zIndex:     3666
} )
.dialog ("widget").draggable ("option", "containment", "none");

//-- Fix crazy bug in FF! ...
$("#gmOverlayDialog").parent ().css ( {
    position:   "fixed",
    top:        0,
    left:       "4em",
    width:      "75ex"
} );

<小时/>

对于较小的主题调整，您可以使用 GM_addStyle()设置!important样式。