当我在 Jetpack 中使用 jQueryUI 和 Google Ajax API 时,为什么无法获取图标?

发布于 2024-08-18 16:09:55 字数 2910 浏览 10 评论 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 版本中获取图标有什么想法吗?

I can't get any icons to be shown on a modal dialog box when I try to use jQueryUI via Google Ajax API. The icons do not appear but when I click on the locations where they are supposed to be the relevant functinality works (e.g. I can resize and close the modal dialog box). Here's the problematic screenshot and my code for 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']();      
        });
    });
    });
}

On the other hand, in a simple html document I can use Google Ajax API, load jquery and jQueryUI and get the icons correct without any problems. Here's the screenshot and source code that works as I expect:

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>

Any ideas about why I can't get the icons in my Jetpack version?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

燃情 2024-08-25 16:09:55

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

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

Code below solves my problem:

js = js.replace("url(", "url(http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/", "g"); 
style.innerHTML = js;
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文