Open jQuery ui Dialog in Firefox extension_问答_开发者

Open jQuery ui Dialog in Firefox extension

开发者 https://www.devze.com 2023-03-16 16:59 出处：网络

I need to open jQuery ui dialog by clicking the button in the Firefox toolbar (developed as the Firefox extension). I\'ve added the .js files in the .xul file, but it doesn\'t work from some reason. I

I need to open jQuery ui dialog by clicking the button in the Firefox toolbar (developed as the Firefox extension). I've added the .js files in the .xul file, but it doesn't work from some reason. I use the Mozilla Firefox 4. Here is my source code:

.xul file:

..

<script type="application/x-javascript" src="chrome://tuttoolbar/content/tuttoolbar.js" /> 
<script type="application/x-javascript" src="chrome://tuttoolbar/content/scripts/jquery-1.4.2.min.js" /> 
<script type="application/x-javascript" src="chrome://tuttoolbar/content/scripts/jquery-ui-1.8.4.custom.min.js"/>

...

<toolbarbutton id="Example" tooltiptext="UI Dialog" label="Open jQ dialog" oncommand="objTutorialToolbar.sayHello1(event); event.stopPropagation();"/>

tuttoolbar.js:

   ....

   var objTutorialToolbar = {

   ......

   sayHello1 : function(aEvent) {

    var docUrl =  window.content.document.location.href;

    var div = document.createElement("div");

    div.setAttribute("id", "dialog_dummy");

    var body = document.getElementsByTagName("body").item(0);

    body.appendChild(div);

    $dialog = $('#dialog_dummy').html('').dialog(
    {
      title : 'Title',
      modal : false,
      autoOpen : false,
      show : 'slide',
      hide : 'slide',
      url : docUrl,
      height: 550,
      width: 1050
    });

       $dialog.dialog("open");
    },

开发者_开发问答   ...

}

Does somebody know where is the mistake in the code above?

document in your code above is the XUL document your code is executing in. It isn't an HTML document so it doesn't have a <body> element (document.getElementsByTagName("body") gives you an empty list). And even if it had one, I'm pretty certain that jQuery's "dialogs" are built for the positioning system of HTML, not for the box model that is used in XUL. In other words - it cannot work. What you probably wanted was showing a <panel> element (see https://developer.mozilla.org/en/XUL/panel). Or maybe even a full-fetched XUL dialog window (see https://developer.mozilla.org/en/XUL/dialog and https://developer.mozilla.org/en/DOM/window.openDialog).

But, I have the problem: I can't delete location from the title bar. Because of that I've tried to create and open an inline jQuery dialog that will hide the location in title. Do you know a better way how to do that?

Xul dialogs and prompts are customizable:

Dialogs and Prompts

Prompt Service

Prompt:

var promptService = Components.classes["@mozilla.org/embedcomp/prompt-service;1"]
.getService(Components.interfaces.nsIPromptService);

var result = promptService.confirm(null, "Title of this Dialog", "Are you sure?");

// result is now true if OK was clicked, and false if cancel was clicked

Dialog:

<dialog
  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
  id="myDialogId"
  title="My Dialog"
  ondialogaccept="return onOK();"
  onload="onLoad();"
  persist="screenX screenY width height"
  windowtype="myDialogWindowType">

  <script type="application/javascript" src="chrome://myext/content/mydialog.js"/>
  <grid>
    <columns><column/><column/></columns>
    <rows>
      <row align="center"><label value="Name:"/><textbox id="name"/></row>
      <row align="center"><label value="Description:"/><textbox id="description"/></row>
      <row align="center"><spacer/><checkbox id="enabled" label="Check to Enable"/></row>
    </rows>
  </grid>
</dialog>