Как скопировать функциональность диалогового окна jQuery UI в Jetpack? - PullRequest
Новая
       3

Как скопировать функциональность диалогового окна jQuery UI в Jetpack?

0 голосов
/ 15 января 2010

Я пытаюсь получить очень простой и простой диалог в моем Javascript, на самом деле я пытаюсь воспроизвести что-то очень похожее на этот пример с веб-сайта 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);
           });
        });
    });
 }

Ответы [ 2 ]

0 голосов
/ 15 января 2010

Я решил свою проблему (конечно, в Jetpack могут быть гораздо лучшие, более простые, более элегантные способы достижения этого, но я пока не мог этого обнаружить): 

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']();      
    });
});
});
}
0 голосов
/ 15 января 2010

Вы вставляете скрипт, который вызывает диалоговое окно jQuery до , вы вставляете div самого диалога. Следовательно, $("#dialog") не соответствует ни одному элементу, поэтому вызов dialog() пустой оболочки ничего не делает.

Вы можете избежать неприятностей на простой HTML-странице, потому что вы используете $(function) для регистрации функции onready, которая вызывается только после загрузки всего документа. Но в версии Jetpack весь документ уже загружен, поэтому при вставке скрипта onready он сразу вызывается.

Если это произвольный сторонний документ, в который вы вставляете контент, с этим вам следует быть очень осторожным. Загрузка большой библиотеки, такой как jQuery & UI, на произвольную страницу, которая не будет ожидать этого (вместо одной конкретной страницы, на которую вы ориентируетесь), немного грубая и потенциально хрупкая. Кроме того, что произойдет, если в документе уже определен элемент с идентификатором dialog? А что, если у него есть правила стиля, которые заставляют диалог отображаться неожиданным образом? И так далее.

...