jQuery-UI is not working in my userscript without CSS, or with customization?

Question

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?

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?

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.

I'm running Tampermonkey on Chrome.

Answer 1

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.

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

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

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.

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.

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.

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"
} );

---

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