没有CSS或自定义，jQuery-UI在我的用户脚本中不起作用？

Question

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

此外，我尝试过只需要code.jquery.com/ui/1.11.1/jquery-ui.js，然后脚本崩溃 我是否还需要包含一些CSS？还有一些看起来很乱的变化，比如this answer？对于不同的JQUI版本，该代码会有所不同吗？如果我只使用UI的一小部分，这是否会改变我可以安全删除/不下载的内容？

我认为这将是一个受欢迎的事情，官方教程。但是我没有看到很多关于如何在用户脚本中处理JQUI的资源。

我在Chrome上运行Tampermonkey。

Answer 1

usercripts和jQuery-UI的问题在于jQUI使用带有大量背景图像的CSS，所有这些都加载了相对路径。 EG：

... 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 lightness 等。

就我所见，没有人主持部分jQUI构建供公众使用。但是，由于您正在使用@require，因此无论如何都会从本地计算机加载JS（非常快），因此您可以节省维护麻烦并使用标准jquery-ui.min.js文件。

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

这是一个完整的Greasemonkey / Tampermonkey脚本，它以简单的方式展示了如何使用jQUI。诀窍是使用<link>节点注入 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个样式。