如果没有 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 吗?并且还做了一些看起来凌乱的变化，比如根据 这个答案?对于不同的 JQUI 版本，该代码会有所不同吗?如果我只使用 UI 的一小部分，这是否会改变我可以安全删除/不下载的内容?

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 重写，如这个旧答案中所示.

我现在建议只使用标准主题之一(请参阅图库左侧栏中的选项卡)，并使用 Google 托管库.Google 拥有所有默认的 jQUI 主题，例如 UI 亮度 等.

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.诀窍是使用 节点注入 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 样式.

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