jQuery-UI no funciona en mi userscript sin CSS, o con personalización?

Solo quiero usar una pequeña parte de jQuery-UI (Menus) en una lista de usuarios que estoy creando. jQuery-UI ofrece descargas personalizadas, pero no puedo encontrar enlaces a módulos específicos, que puedo @require en el script. ¿Alguien aloja los módulos individuales?

Además, he intentado simplemente requerir code.jquery.com/ui/1.11.1/jquery-ui.js , y el script falla.
¿Debo incluir algo de CSS también? ¿Y también hacer algunos cambios de aspecto desordenado, como de acuerdo con esta respuesta ? ¿Ese código será diferente para las diferentes versiones de JQUI? Si solo estoy usando una pequeña parte de la IU, ¿eso cambia lo que puedo eliminar / no descargar de forma segura?

Pensé que esto sería algo popular, con tutoriales oficiales. Pero no veo muchos recursos sobre cómo lidiar con JQUI en las listas de usuarios.

Estoy ejecutando Tampermonkey en Chrome.

El problema con userscripts y jQuery-UI es que jQUI usa CSS con muchas imágenes de fondo, todas cargadas con rutas relativas. P.EJ:

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

Por razones de seguridad, esa ruta relativa raramente funcionará para un usuario.

Esto significa que para usar jQUI en un usuario, puede:

  • Cargue el CSS requerido de un servidor. (Dinámicamente, no utilizando @resource )
    o
  • Use la reescritura dinámica de CSS como se muestra en esta respuesta anterior .

Ahora recomiendo usar solo uno de los temas estándar (consulte la pestaña Galería en la columna de la izquierda) y el uso de Bibliotecas hospedadas de Google . Google aloja todos los temas jQUI predeterminados, como la ligereza de UI , etc.

Nadie alberga construcciones jQUI parciales para el consumo público hasta donde he llegado. Pero, como está utilizando @require , el JS se carga desde su máquina local de todos modos (muy rápido), por lo que también podría ahorrar dolores de cabeza en el mantenimiento y usar el archivo jquery-ui.min.js estándar.

Si realmente quieres una comstackción jQUI personalizada o un tema CSS muy personalizado, necesitarás tener tu propio servidor y alojar los archivos desde allí.

Aquí hay un script completo de Greasemonkey / Tampermonkey que muestra cómo usar jQUI de la manera más fácil. El truco es inyectar el CSS con un nodo para que todas las imágenes de fondo alojadas se carguen correctamente:

 // ==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 ( '' ); //--- Add our custom dialog using jQuery. $("body").append ('

Sample Dialog added using jQuery-UI

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

Para ajustes menores de tema, puede usar GM_addStyle() para establecer estilos !important .