Jetpack에서 jQuery UI의 대화 상자 기능을 복제하는 방법은 무엇입니까?

Question

jqueryui 웹 사이트에서이 예제와 매우 비슷한 것을 복제하려고하는데, 실제로 jqueryui 웹 사이트에서 매우 기본적인 간단한 대화 상자를 만들려고합니다.

<script type="text/javascript"> 
    $(function() { 
      $("#dialog").dialog({ 
        bgiframe: true, 
        height: 140, 
        modal: true 
      }); 
    }); 
    </script> 

<div class="demo"> 
<div id="dialog" title="Basic modal dialog"> 
    <p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p> 
</div> 

...

순서대로 이것을 달성하기 위해 함수 testJQ를 실행하지만 원하는 효과를 얻을 수 없습니다. div와 내부 p가 추가되어 p의 내용을 볼 수 있지만 "기본 모달 대화 상자"가 표시되지 않고 페이지 주위로 이동할 수 없습니다. 내가 놓친 게 있니? 여기 내 코드가 있습니다 :

function testJQ() { 
    var doc = jetpack.tabs.focused.contentDocument; 
    var win = jetpack.tabs.focused.contentWindow; 

    $.get("http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js", 
function(js) { 

    var script = doc.createElement("script"); 
    script.innerHTML = js; 
    doc.body.appendChild(script); 

    $.get("http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js", 
    function(js) { 

      var script = doc.createElement("script"); 
      script.innerHTML = js; 
      doc.body.appendChild(script); 

     $.get("http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css", 
    function(js) { 

      var style = doc.createElement("style"); 
      style.innerHTML = js; 
      doc.getElementsByTagName('HEAD')[0].appendChild(style); 

      var script = doc.createElement("script"); 
      script.innerHTML = js; 
      doc.body.appendChild(script); 

      script = doc.createElement("script"); 
      script.innerHTML += '$(function() {'; 
      script.innerHTML += '$("#dialog").dialog({' 
      script.innerHTML += '  bgiframe: true, height: 140, modal: true'; 
      script.innerHTML += ' });'; 
      script.innerHTML += '});'; 
      doc.body.appendChild(script); 

      divDialog = doc.createElement("div"); 
      divDialog.setAttribute('id', 'dialog'); 
      divDialog.setAttribute('title', 'Basic Dialog'); 
      divDialog.innerHTML = '<p>This is the default dialog which is useful 
for displaying information. The dialog window can be moved, resized 
and closed with the X icon.</p>'; 
      doc.body.appendChild(divDialog); 
      }); 
     }); 
    }); 
} 

Answer 1

나는 내 문제 (물론이 훨씬 더 나은 제트 팩 이내에 달성의 단순, 더 우아한 방법하지만 그 아직 발견하지 수 있습니다) 해결 한

:

function testJQ() { 
var doc = jetpack.tabs.focused.contentDocument; 
var win = jetpack.tabs.focused.contentWindow; 

$.get("http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js", function(js) { 

var script = doc.createElement("script"); 
script.innerHTML = js; 
doc.getElementsByTagName('HEAD')[0].appendChild(script); 

$.get("http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js", function(js) { 

    var script = doc.createElement("script"); 
    script.innerHTML = js; 
    doc.getElementsByTagName('HEAD')[0].appendChild(script); 

    $.get("http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css", function(js) { 

    var style = doc.createElement("style"); 
    style.innerHTML = js; 
    doc.getElementsByTagName('HEAD')[0].appendChild(style); 

    script = doc.createElement("script"); 
    script.innerHTML += 'var myDialogFunc = function() {'; 
    script.innerHTML += '$("<div id=dialog title=\\"Basic Dialog\\"> <p>The dialog window can be moved, resized and closed with the X icon.</p></div>").appendTo("body");'; 
    script.innerHTML += '$("#dialog").dialog({' 
    script.innerHTML += '  bgiframe: true, height: 140, modal: true'; 
    script.innerHTML += ' });'; 
    script.innerHTML += '};'; 
    doc.body.appendChild(script); 
    win.wrappedJSObject['myDialogFunc']();  
    }); 
}); 
}); 
} 

Answer 2

당신은 대화 자체의 사업부를 삽입하고 다음은 내 코드입니다. 따라서 $("#dialog")은 요소와 일치하지 않으므로 dialog()은 빈 래퍼를 호출해도 자동으로 아무것도 수행하지 않습니다.

$(function)을 사용하여 전체 문서가로드 된 후에 만 ​​호출되는 onready 함수를 등록하기 때문에 간단한 HTML 페이지에서이 문제를 해결할 수 있습니다. 그러나 Jetpack 버전에서는 전체 문서가 이미로드되어 있으므로 onready 스크립트를 삽입하면 곧바로 호출됩니다.

콘텐츠를 삽입하는 임의의 제 3 자 문서 인 경우 매우주의해야합니다. jQuery &과 같은 대형 라이브러리를 UI를 예상하지 않는 임의의 페이지에로드하는 것은 약간 무례하고 잠재적으로 취약합니다. 또한 문서에서 id가 dialog 인 요소를 이미 정의한 경우 어떻게됩니까? 예기치 않은 방식으로 대화 상자를 렌더링하는 스타일 규칙이 있다면 어떨까요? 등등.