jQuery UI在没有CSS的用户脚本中无法工作，或者无法自定义？

我只想在我正在制作的用户脚本中使用jqueryui（菜单）的一小部分。jQueryUI提供自定义下载，但我找不到特定模块的任何链接，我可以在脚本中

@require

。是否有人托管各个模块

另外，我尝试只需要

code.jquery.com/ui/1.11.1/jquery ui.js

，脚本就会崩溃。
我也需要包括一些CSS吗？还做了一些看起来凌乱的改变，比如根据？对于不同的JQUI版本，代码会有所不同吗？如果我只使用了UI的一小部分，这是否会改变我可以安全删除/不下载的内容

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

---

我正在Chrome上运行Tampermonkey。

用户脚本和jQuery UI的问题是，jQUI使用CSS处理大量背景图像，所有图像都加载了相对路径。例如：

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

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

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

• 从服务器上加载所需的CSS。（动态地，不使用

  @resource

  ）
  或
• 使用动态CSS重写，如中所示

现在我建议只使用其中一个（请参见左侧栏中的Gallery选项卡），然后使用。谷歌拥有所有默认的jQUI主题，如UI轻量级等

据我所知，没有人为公共消费托管部分jQUI构建。但是，由于您使用的是

@require

，JS无论如何都会从本地机器加载（非常快），因此您最好省去维护方面的麻烦，使用标准的

jquery ui.min.JS

文件

如果你真的想要，或者一个高度定制的CSS主题，你需要有自己的服务器并从那里托管文件

下面是一个完整的Greasemonkey/Tampermonkey脚本，它演示了如何以简单的方式使用jQUI。诀窍是在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"
} );

/==UserScript==
//@name\u使用jQuery UI向网页添加内容。
//@包括https://stackoverflow.com/questions/*
//@需要http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js
//@需要http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js
//@grant GM_addStyle
//==/UserScript==
/*---为了使其正常工作，我们还必须添加jQueryUICSS。
我们以这种方式添加CSS，以便正确加载嵌入的、相对链接的图像。
（使用//ajax…以便根据需要选择https或http以避免“混合内容”。）
*/
$（“标题”）。附加(
''
);
//---使用jQuery添加自定义对话框。
$（“body”）.append（“使用jQuery UI添加的示例对话框”）；
//---激活对话框。
$（“#gmoverlydialog”）。对话框（{
莫代尔：错，
标题：“可拖动、大小可调的对话框”，
职位：{
我的：“上衣”，
在“顶部”，
文件：文件
，碰撞：“无”
},
宽度：“自动”，
最小宽度：400，
身高：200，
zIndex:3666
} )
.dialog（“小部件”）.draggable（“选项”、“包含”、“无”）；
//--修复FF中的疯狂错误。。。
$（“#gmoverlydialog”）.parent（）.css（{
位置：“固定”，
排名：0，
左：“4em”，
宽度：“75ex”
} );

---

---

对于较小的主题调整，您可以使用

GM\u addStyle（）

设置

！重要信息

样式。

您不使用正式JQuery域文件有什么原因吗

code.jquery.com

vs

ajax.googleapis.com

（以前从未见过谷歌的“API”）以及CSS中链接到的所有这些图像。如果我从不使用它们，它们将不会被下载，或者它们都将被预下载？谷歌似乎更快，正常运行时间也更长。另外，我认为带宽对他们的财务影响较小，而且可以跟踪我的活动的领域也少了一个（谷歌已经将他们的钩子钩住了我浏览的几乎每一个页面）。。。也就是说，如果你愿意，可以使用

code.jquery.com

；这应该没有问题。CSS BG图像通常不会预加载。我不认为jQUI会做任何事情来预加载图像（将来可能会这样），但是你会惊讶于BG图像会出现多少次。例如，我的答案中的示例脚本只显示了一个简单的对话框，但它会导致主题使用和下载6个背景图像。。。幸运的是，谷歌在缓存方面做得很好。这是一个非常有用的答案。然而，在访问HTTPS页面时，我遇到了加载混合内容的问题。要解决此问题，请使用

href=“//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/le frog/jquery ui.min.css”

，请参阅