没有CSS或自定义，jQuery-UI无法在我的用户脚本中运行吗? [英] jQuery-UI is not working in my userscript without CSS, or with customization?

问题描述

我只想在正在制作的用户脚本中使用jQuery-UI(菜单)的一小部分. jQuery-UI提供自定义下载，但是我无法找到指向特定模块的任何链接，因此可以在脚本中@require.有人托管各个模块吗?

I only want to use a tiny part of jQuery-UI (Menus) in a userscript I am making. jQuery-UI offers custom downloads, but I cannot find any links to specific modules, that I can @require in the script. Does anyone host the individual modules?

此外，我尝试只需要code.jquery.com/ui/1.11.1/jquery-ui.js，脚本就会崩溃.
我是否还需要包含一些CSS?并做一些看起来很凌乱的更改，例如根据

Also, I have tried just requiring code.jquery.com/ui/1.11.1/jquery-ui.js, and the script crashes.
Do I need to include some CSS with it as well? And also do some messy looking changes, like according to this answer? Will that code be different for different JQUI versions? If I am only using a small part of the UI, does that change what I can safely delete/not download?

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

I would of thought that this would be a popular thing, with official tutorials. But I am not seeing many resources on how to deal with JQUI in userscripts.

我正在Chrome上运行Tampermonkey.

I'm running Tampermonkey on Chrome.

推荐答案

用户脚本和jQuery-UI的问题在于，jQUI使用CSS带有大量背景图像，并且全部带有相对路径. EG:

The problem with userscripts and jQuery-UI is that jQUI uses CSS with lots of background images, all loaded with relative paths. EG:

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

出于安全考虑，很少为用户脚本找到相对路径.

For security reasons, that relative path will seldom work out for a userscript.

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

This means that to use jQUI in a userscript you can either:

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

• Load the required CSS off a server. (Dynamically, not using @resource)
  or
• Use dynamic CSS rewriting as shown in this old answer.

我现在建议仅使用标准主题之一(请参见画廊标签，然后使用 Google托管库. Google托管所有默认的jQUI主题，例如 UI lightness 等.

I now recommend just using one of the standard themes (See the Gallery tab in the left-hand column), and using Google Hosted Libraries. Google hosts all of the default jQUI themes such as UI lightness, etc.

据我所知，没有人托管供公众使用的部分jQUI构建.但是，由于您使用的是@require，因此无论如何(非常快)都可以从本地计算机加载JS，因此您也可以省去维护工作的麻烦，并使用标准的jquery-ui.min.js文件.

No one hosts partial jQUI builds for public consumption as far as I've ever found. But, since you are using @require, the JS loads from your local machine anyway (very fast), so you might as well save maintenance headaches and use the standard jquery-ui.min.js file.

如果您真的想要自定义jQUI构建，或者是高度自定义的CSS主题，则需要具有您自己的服务器并从那里托管文件.

If you really want a custom jQUI build, or a heavily customized CSS theme, you will need to have your own server and host the files from there.

这是一个完整的Greasemonkey/Tampermonkey脚本，它显示了如何轻松使用jQUI.诀窍是用<link>节点注入 CSS，以便所有托管的背景图像都能正确加载:

Here's a complete Greasemonkey/Tampermonkey script that shows how to use jQUI the easy way. The trick is to inject the CSS with a <link> node so that all the hosted background images will load correctly:

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

---

For minor theme adjustments, you can use GM_addStyle() to set !important styles.

这篇关于没有CSS或自定义，jQuery-UI无法在我的用户脚本中运行吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！