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

Question

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

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

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

我在Chrome上运行Tampermonkey.

Answer 1

usercripts和jQuery-UI的问题在于jQUI使用带有大量背景图像的CSS,所有这些都加载了相对路径.例如:

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

出于安全原因,相对路径很少会为用户提供帮助.

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

• 从服务器加载所需的CSS.(动态地,不使用@resource)
  或
• 使用动态CSS重写,如旧答案中所示.

我现在建议您只使用其中一个标准主题(请参阅左侧列中的" 图库"标签),并使用Google托管库.Google托管所有默认的jQUI主题,例如UI亮度等.

就我所见,没有人主持部分jQUI版本供公众使用.但是,既然您正在使用@require,那么JS无论如何都会从本地计算机加载(非常快),因此您可以节省维护麻烦并使用标准jquery-ui.min.js文件.

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

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

// ==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样式.