On Sun, Feb 1, 2009 at 11:57 AM, phicarre <gam...@bluewin.ch> wrote:
>
> Hide it with autoOpen:false, style="display: none is unnecessary
> Think jQuery, not Javascript !
Actually, autoOpen: false won't hide it if it's not hidden. It simply won't
automatically open it when the .dialog() init is called.
jQuery UI Dialog, like other UI plugins are designed to upgrade existing
elements into something a little more. In a way, it makes no presumptions
about those elements, in terms of where it's positioned, whether it's in the
dom, whether it's hidden, whether it's in a container that's hidden. The
default behavior is to call
$("#myDiv").dialog();
With no options specified to this init, the dialog will initialize (this
element will be upgraded to a dialog) at that call and open automatically
(the default value for autoOpen is true). Before this call there's nothing
the dialog plugin could do to ensure the #myDiv wasn't visible before being
made into a dialog. Make sense? So there are a couple options
1. create the dialog content dynamically
$("<div>I'm in a dialog</div>").dialog()
2. hide the dialog element using css on the element itself, or on a
container element
<div id="myDiv" stlye="display:none;">I'm in a dialog</div>
or
<div style="display:none;">
<div id="myDiv">I'm in a dialog</div>
</div>
- Richard
>
>
> On 1 fév, 16:56, Raymond Camden <rcam...@gmail.com> wrote:
> > Ok, I'm probably missing the obvious here, but I'm having a very
> > difficult time understanding how to use a jQuery UI dialog with a
> > simple theme.
> >
> > First off, I began with the following code:
> >
> > <html>
> >
> > <head>
> > <script src="js/jquery.js"></script>
> > <script src="js/ui/ui.core.js"></script>
> > <script src="js/ui/ui.dialog.js"></script>
> > <script>
> > function showDialog(){
> > $("#example").dialog();
> > return false;}
> >
> > </script>
> > </head>
> >
> > <body>
> >
> > <p>
> > <a href="" onclick="return showDialog()">Show the Dialog</a>
> > </p>
> >
> > <div id="example" class="flora" title="This is my title">I'm in a
> > dialog!</div>
> >
> > </body>
> > </html>
> >
> > This is a small modification of the code here:
> http://docs.jquery.com/UI/Dialog
> > All I changed was switching from the document ready code to showDialog
> > so I could manually load the dialog. This works, but the dialog is
> > visible on page load. I would have assumed that would be something the
> > basic docs would cover. I had to dig a bit and finally found that I
> > would just hide it with CSS:
> >
> > <div style="display: none;" id="example" class="flora" title="This is
> > my title">I'm in a dialog!</div>
> >
> > Ok, so no big deal, but why didn't the basic demo mention this? I'm
> > still a bit rough w/ CSS so if I had not found this on some other
> > demo, I would have been out of luck.
> >
> > Anyway, at this point it works, but it has no skin at all. I went on
> > to the dialog theming page (http://docs.jquery.com/UI/Dialog/Theming),
> > and it showed this example:
> >
> > <div class="ui-dialog ui-widget ui-widget-content ui-corner-all
> > undefined ui-draggable ui-resizable">
> > <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-
> > helper-clearfix">
> > <span id="ui-dialog-title-dialog" class="ui-dialog-title">Dialog
> > title</span>
> > <a class="ui-dialog-titlebar-close ui-corner-all" href="#"><span
> > class="ui-icon ui-icon-closethick">close</span></a>
> > </div>
> > <div style="height: 200px; min-height: 109px; width: auto;"
> > class="ui-dialog-content ui-widget-content" id="dialog">
> > <p>Dialog content goes here.</p>
> > </div>
> > </div>
> >
> > So I replaced my div with that code. Right away I see that the dialog
> > is no longer hidden. Ok, no big deal, I can fix that later I assume.
> > There is no ID on the div though so I have no way of showing it.
> >
> > I added id="example" to the top level div:
> >
> > <div class="ui-dialog ui-widget ui-widget-content ui-corner-all
> > undefined ui-draggable ui-resizable" id="example">
> >
> > Now when I click on the link to show the dialog, it does pop the
> > dialog up, but with multiple title bars. Well, one title, but 2 Xs.
> > Almost like jquery re-wrapped the div. There is a thick white border
> > around the item.
> >
> > I'm pretty frustrated. I've looked around at the demos and docs, but I
> > can't seem to find a very simple _minimal_ example. Any help please?
>
