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

Posted 2023-02-25

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

【英文标题】：jQuery-UI is not working in my userscript without CSS, or with customization?

【发布时间】：2014-10-17 13:30:15

【问题描述】：

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

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

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

我正在 Chrome 上运行 Tampermonkey。

【参考方案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 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://***.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 样式。

【讨论】：

您没有使用官方 JQuery 域文件有什么原因吗？ code.jquery.com vs ajax.googleapis.com（之前从未见过谷歌“Apis”）

所有这些图片都在 CSS 中链接。如果我从不使用它们将不会被下载，或者它们都将被预先下载？

Google 似乎速度更快，正常运行时间更长。另外，我认为带宽对他们的财务影响较小，并且可以跟踪我的活动的域更少（谷歌已经在我查看的几乎每个页面中都有了他们的钩子）。 ...也就是说，如果您愿意，请使用code.jquery.com；应该没有问题。

CSS BG 图片一般不会预加载。我不认为 jQUI 会做任何事情来预加载图像（将来可能会这样做），但是您会惊讶于 BG 图像出现了多少次。例如，我的答案中的示例脚本只显示了一个简单的对话框，但它会导致主题使用和下载 6 个背景图像！ ... 幸运的是，Google 在缓存方面做得很好。

非常有帮助的答案。但是，我在访问 HTTPS 页面时遇到了加载混合内容的问题。要解决此问题，应使用href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/le-frog/jquery-ui.min.css"，请参阅***.com/a/18251129/1071508