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 バージョンでアイコンを取得できない理由について何か考えはありますか?