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

如何在Jetpack中复制jquery用户界面的对话框功能?

firefox-addon-sdk jquery-ui

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

我试图在我的javascript中得到一个非常基本和简单的对话框,实际上我试图从jqueryui网站复制与此示例非常相似的东西:

<script type="text/javascript">
   $(function() {
           $("#dialog").dialog({
                   bgiframe: true,
                   height: 140,
                   modal: true
           });
   });
   </script>

<div class="demo">
 <div id="dialog" title="Basic modal dialog">
   <p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p>
 </div>

…

为了实现这一点,我运行了一个函数testjq,但是我无法获得所需的效果。添加了DIV及其内部P,我可以看到P的内容,但我看不到“基本模式对话框”,也无法在页面上移动它。我错过什么了吗?这是我的代码:

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.body.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.body.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);

           var script = doc.createElement("script");
           script.innerHTML = js;
           doc.body.appendChild(script);

           script = doc.createElement("script");
           script.innerHTML += '$(function() {';
           script.innerHTML += '$("#dialog").dialog({'
           script.innerHTML += '      bgiframe: true, height: 140, modal: true';
           script.innerHTML += '  });';
           script.innerHTML += '});';
           doc.body.appendChild(script);

           divDialog =  doc.createElement("div");
           divDialog.setAttribute('id', 'dialog');
           divDialog.setAttribute('title', 'Basic Dialog');
           divDialog.innerHTML = '<p>This is the default dialog which is useful
 for displaying information. The dialog window can be moved, resized
 and closed with the X icon.</p>';
           doc.body.appendChild(divDialog);
           });
        });
    });
 }

2 回复 | 直到 13 年前

bobince 15 年前

您正在插入调用jquery对话框的脚本之前您正在插入对话框本身的DIV。因此 $("#dialog") 不匹配任何元素,因此 dialog() 默默地调用空包装器什么也不做。

你可以在一个简单的HTML页面中摆脱它,因为你正在使用 $(function) 注册一个 onready 只在加载整个文档后才调用的函数。但是在Jetpack版本中,整个文档已经加载,因此插入 随时准备 脚本会立即调用它。

如果这是您要插入内容的任意第三方文档,那么您应该非常小心。将一个大型库(如jquery&ui)加载到一个不需要的任意页面(而不是一个特定的页面)中有点粗鲁,而且可能很脆弱。加上如果文档已经定义了一个ID为的元素会发生什么 dialog 是吗?如果它有导致对话框以意外方式呈现的样式规则呢?等等。

Emre Sevinç 15 年前

我已经解决了我的问题(当然,在Jetpack中可能有更好、更简单、更优雅的方法来实现这一点,但我还没有发现这一点):

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']();      
    });
});
});
}