jQuery-UI не работает в моем usercript без CSS или с настройкой?

Я только хочу использовать крошечную часть jQuery-UI (меню) в usercript, который я делаю. jQuery-UI предлагает пользовательские загрузки, но я не могу найти ссылки на определенные модули, которые я могу @require в скрипте @require . Кто-нибудь размещает отдельные модули?

Кроме того, я пробовал просто потребовать code.jquery.com/ui/1.11.1/jquery-ui.js , и сбой сценария.
Нужно ли включать в него CSS? А также сделать некоторые беспорядочные изменения, как в соответствии с этим ответом ? Будет ли этот код отличаться для разных версий JQUI? Если я использую только небольшую часть пользовательского интерфейса, это меняет то, что я могу безопасно удалить / не скачать?

Я бы подумал, что это будет популярно, с официальными учебниками. Но я не вижу много ресурсов о том, как обращаться с JQUI в скриптах пользователей.

Я использую Tampermonkey в Chrome.

    Проблема с usercripts и jQuery-UI заключается в том, что jQUI использует CSS с большим количеством фоновых изображений, загруженных относительными путями. НАПРИМЕР:

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

    По соображениям безопасности этот относительный путь будет редко работать для пользователя.

    Это означает, что для использования jQUI в пользовательском документе вы можете:

    • Загрузите требуемый CSS с сервера. (Динамически, не используя @resource )
      или
    • Используйте динамическую перезаписи CSS, как показано в этом старом ответе .

    Теперь я рекомендую использовать только одну из стандартных тем (см. Вкладку Галерея в левом столбце) и с помощью Google Hosted Libraries . В Google размещаются все темы jQuon по умолчанию, такие как легкость пользовательского интерфейса и т. Д.

    Никто не имеет частичные сборки jQUI для общественного потребления, насколько я когда-либо находил. Но, поскольку вы используете @require , JS загружается с вашей локальной машины в любом случае (очень быстро), поэтому вы можете также сохранить головные боли обслуживания и использовать стандартный файл jquery-ui.min.js .

    Если вам действительно нужна пользовательская assembly jQUI или сильно настраиваемая тема CSS, вам нужно будет иметь собственный сервер и размещать файлы там.

    Вот полный сценарий Greasemonkey / Tampermonkey, который показывает, как использовать jQui простой способ. Хитрость заключается в том, чтобы внедрить CSS с узлом чтобы все размещенные фоновые изображения загружались правильно:

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

    Для небольших настроек темы вы можете использовать GM_addStyle() для установки !important стилей.

    Давайте будем гением компьютера.