Think jQuery, not Javascript !
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?
No comments:
Post a Comment