Geek Answers Handbook

JQuery-UI not working in my usercript without CSS or with customization?

I just want to use the tiny part of jQuery-UI (menu) in the usercript that I am doing. jQuery-UI offers custom downloads, but I cannot find links to specific modules that I can @requirein the script. Does anyone post separate modules?

In addition, I tried to just require code.jquery.com/ui/1.11.1/jquery-ui.jsa crash script.
Do I need to include CSS in it? And also some dirty looking changes, for example, in accordance with this answer ? Will this code be different for different versions of JQUI? If I use only a small part of the user interface, does it change that I can safely remove / not download?

I thought it would be popular, with official textbooks. But I don’t see much resources on how to handle JQUI in user scripts.

I am running Tampermonkey in Chrome.

+4
source share
1 answer

The problem with usercripts and jQuery-UI is that jQI uses CSS with a lot of background images loaded with relative paths. EG:

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

For security reasons, this relative path will rarely work for the user.

This means that to use jQUI in a user document, you can:

  • Download the required CSS from the server. (Dynamically without using @resource)
    or
  • CSS, .

(. ) Google Hosted Libraries. Google jQuon , ..

jQUI , - . @require, JS ( ), jquery-ui.min.js .

jQUI CSS, .

Greasemonkey/Tampermonkey script, , jQUI . , CSS <link> node, :

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

+9

More articles:


All Articles