Pourquoi ne puis-je pas obtenir les icônes lorsque j'utilise jQueryUI avec API Google Ajax dans Jetpack?

Je ne peux afficher aucune icône dans une boîte de dialogue modale lorsque j'essaie d'utiliser jQueryUI via l'API Ajax de Google. Les icônes n'apparaissent pas mais lorsque je clique sur les emplacements où elles sont supposées être les fonctions pertinentes (par exemple, je peux redimensionner et fermer la boîte de dialogue modale). Voici la capture d'écran problématique et mon code pour Jetpack:Pourquoi ne puis-je pas obtenir les icônes lorsque j'utilise jQueryUI avec API Google Ajax dans Jetpack?

http://www.flickr.com/photos/[email protected]/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']();  
     }); 
    }); 
    }); 
}

D'autre part, dans un document html simple que je peux utiliser l'API Google Ajax, charge jquery et jQueryUI et obtenir les icônes correctes sans problèmes. Voici la capture d'écran et le code source qui fonctionne comme je le pense:

http://www.flickr.com/photos/[email protected]/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>

Des idées sur pourquoi je ne peux pas obtenir les icônes dans ma version Jetpack?

Source

2010-01-25 Emre Sevinç

code ci-dessous permet de résoudre mon problème:

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

Source

2010-01-25 15:30:25

Pourquoi ne puis-je pas obtenir les icônes lorsque j'utilise jQueryUI avec API Google Ajax dans Jetpack?

Répondre

Questions connexes