Почему я не могу получить значки, когда использую jQueryUI с Google Ajax API в Jetpack? - PullRequest
Новая
       17

Почему я не могу получить значки, когда использую jQueryUI с Google Ajax API в Jetpack?

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

Мне не удается отобразить значки в модальном диалоговом окне, когда я пытаюсь использовать jQueryUI через Google Ajax API. Значки не появляются, но когда я нажимаю на места, где они должны быть соответствующими функциональными возможностями (например, я могу изменить размер и закрыть модальное диалоговое окно). Вот проблемный скриншот и мой код для Jetpack:

http://www.flickr.com/photos/64416865@N00/4303522684/

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']();      
        });
    });
    });
}

С другой стороны, в простом html-документе я могу использовать API Google Ajax, загружать jquery и jQueryUI и корректно отображать иконки без проблем. Вот скриншот и исходный код, который работает, как я ожидаю:

http://www.flickr.com/photos/64416865@N00/4303522672/

<html>
<head>

<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
var myDialogFunc = function () {
  $("#dialog").dialog({
  bgiframe: true, 
  height: 140, 
  modal: true
 });
};

  // Load jQuery
  google.load("jquery", "1.4.0");
  google.load("jqueryui", "1.7.2");

  google.setOnLoadCallback(function() {
    myDialogFunc();
  });

</script>

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />

</head>

<body>

 <div id="dialog" title="Basic Dialog"> 
  <p>The dialog window can be moved, resized and closed with the X icon.</p>
 </div>
</body>

Есть идеи, почему я не могу получить иконки в моей версии Jetpack?

1 Ответ

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

Код ниже решает мою проблему: 

js = js.replace("url(", "url(http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/", "g"); 
style.innerHTML = js;
...