0

当我尝试通过 Google Ajax API 使用 jQueryUI 时，无法在模式对话框中显示任何图标。图标不会出现，但是当我单击它们应该是相关功能的位置时（例如，我可以调整大小并关闭模式对话框）。这是有问题的屏幕截图和我的 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 文档中，我可以使用 Google Ajax API、加载 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 版本中获得图标的任何想法？

4

1 回答 1

0

下面的代码解决了我的问题：

js = js.replace("url(", "url(http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/", "g"); 
style.innerHTML = js;
于 2010-01-25T15:30:25.707 回答