代码之家 › 专栏 › 技术社区 › Emre Sevinç

为什么在Jetpack中使用jQueryUI和Google Ajax API时不能获得图标?

google-ajax-api firefox-addon-sdk firefox-addon jquery-ui

0

Emre Sevinç · 技术社区 · 15 年前

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文档中,我可以使用googleajajaxapi,加载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 回复 | 直到 12 年前

1

0

Emre Sevinç 15 年前

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

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