jQuery-UI不工作在我的脚本没有CSS或定制？
我只想使用我正在编写的脚本中的一小部分jQuery-UI（菜单）。 jQuery-UI提供了自定义下载，但我找不到任何特定模块的链接，我可以在脚本中@require 。 有没有人主持单独的模块？
此外，我已经尝试只需要code.jquery.com/ui/1.11.1/jquery-ui.js ，脚本崩溃。
我是否也需要包含一些CSS？ 并根据这个答案做一些凌乱的外观变化？ 这个代码对于不同的JQUI版本会有所不同吗？ 如果我只是使用一小部分的用户界面，这是否改变了我可以安全地删除/不下载？
我会认为这将是一个普遍的事情，与官方教程。 但是我没有看到如何处理用户脚本中的JQUI的许多资源。
我在Chrome上运行Tampermonkey。
用户脚本和jQuery-UI的问题在于，jquI使用带有大量背景图片的CSS，所有背景图片都加载了相对path。 例如：
... url("images/ui-bg_dots-small_35_35414f_2x2.png") ...
出于安全原因，这个相对path很less会出现在用户脚本上。
这意味着要在用户脚本中使用jQUI，您可以：
- 从服务器加载所需的CSS。 （dynamic，不使用
@resource）
要么 - 使用旧的答案中显示的dynamicCSS重写。
我现在推荐使用其中一个标准主题 （请参阅左侧列中的图库选项卡），并使用Google托pipe库 。 Google托pipe所有默认的jqui主题，例如UI亮度等
根据我的发现，没有人主持部分jqui构build公共消费。 但是，由于您使用的是@require ，因此无论如何（非常快），JS会从您的本地机器加载，所以您不妨保存维护问题并使用标准的jquery-ui.min.js文件。
如果你真的想要一个自定义的jqui构build ，或者大量定制的CSS主题，你将需要拥有自己的服务器并从那里托pipe这些文件。
这里有一个完整的Greasemonkey / Tampermonkey脚本，展示了如何使用jQUI这个简单的方法。 诀窍是注入一个<link>节点的CSS，以便所有托pipe的背景图像都能正确加载：
// ==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样式。
