6

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.

Community
  • 1
  • 1
Jonathon
  • 2,571
  • 5
  • 28
  • 49

1 Answers1

16

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.

Community
  • 1
  • 1
Brock Adams
  • 90,639
  • 22
  • 233
  • 295
  • 1
    Is there a reason you are not using the official JQuery domain files? `code.jquery.com` vs `ajax.googleapis.com` (never seen Google "Apis" mentioned before) – Jonathon Aug 24 '14 at 12:56
  • And all these images linked to in the CSS. They will NOT be downloaded if I never use them, or they all will be pre-downloaded? – Jonathon Aug 24 '14 at 12:57
  • 1
    Google has *seemed* to be faster and have higher uptime. Plus, I figure the bandwidth has less of a financial impact on them and it's one less domain that can track my movements (Google's already got their hooks into almost every page I view). ... That said, use `code.jquery.com` if you wish; there should be no problem with that. – Brock Adams Aug 24 '14 at 22:21
  • 1
    CSS BG images are not preloaded in general. I don't *think* that jQUI does anything to preload images (they might in the future), but you'd be surprised how many times a BG image appears. For example, the sample script in my answer just shows a simple dialog, but it causes 6 background images to be used and downloaded by the theme! ... Fortunately, Google is pretty good about caching. – Brock Adams Aug 24 '14 at 22:30
  • 1
    Very helpful answer. However, I run into problems with loading mixed conent when accessing HTTPS page. To fix this `href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/le-frog/jquery-ui.min.css"` should be used, see http://stackoverflow.com/a/18251129/1071508 – Dawid Pytel Mar 10 '15 at 09:52
  • Unfortunately this doesn't work on sites which set `Content-Security-Policy` to a value which prohibits loading CSS from ajax.googleapis.com (or wherever the `` points to. – Adam Spiers Jun 28 '21 at 02:51