[JQUERY] jQuery-UI는 CSS없이 또는 사용자 정의없이 내 사용자 스크립트에서 작동하지 않습니다.

jQuery-UI는 CSS없이 또는 사용자 정의없이 내 사용자 스크립트에서 작동하지 않습니다.

해결법

1. ---

   1.사용자 스크립트 및 jQuery-UI의 문제점은 jQuery가 모든 백그라운드 이미지를 많이 사용하여 CSS를 사용하며 상대 경로가 모두로드됩니다. 예 :

   사용자 스크립트 및 jQuery-UI의 문제점은 jQuery가 모든 백그라운드 이미지를 많이 사용하여 CSS를 사용하며 상대 경로가 모두로드됩니다. 예 :

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

   보안상의 이유로, 그 상대 경로는 사용자 스크립트에 대해 거의 작동하지 않습니다.

   즉, 사용자 스크립트에서 JQui를 사용하려면 다음 중 하나를 의미합니다.

   이제 표준 테마 중 하나를 사용하는 것이 좋습니다 (왼쪽 열의 갤러리 탭 참조) 및 Google 호스팅 라이브러리를 사용하는 것이 좋습니다. Google은 UI 가벼움 등의 모든 기본 JQui 테마를 호스팅합니다.

   아무도 호스팅이없는 부분 jqui는 내가 발견 한 한 공중 소비를 위해 빌드합니다. 그러나 @Require를 사용하고 있으므로 JS는 로컬 컴퓨터에서 로컬 컴퓨터에서로드되므로 유지 관리 헤드를 저장하고 표준 jquery-ui.min.js 파일을 사용하십시오.

   사용자 정의 jqui 빌드 또는 크게 사용자 정의 된 CSS 테마를 정말로 원한다면 자신의 서버를 가져와 거기에서 파일을 호스팅해야합니다.

   jqui를 쉽게 사용하는 방법을 보여주는 완전한 Greasemonkey / Tampermonkey 스크립트가 있습니다. 트릭은 모든 호스팅 된 배경 이미지가 올바르게로드되도록 <링크> 노드가있는 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 (
       '<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 ()을 사용하여 중요한 스타일을 설정할 수 있습니다.

from https://stackoverflow.com/questions/25468276/jquery-ui-is-not-working-in-my-userscript-without-css-or-with-customization by cc-by-sa and MIT license