On Sun, Feb 1, 2009 at 10:56 AM, Raymond Camden <rcam...@gmail.com> wrote:
> > 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. This is valuable feedback. Thank you. We want to make it even easier to get up and going quickly. With your help, I'm sure we can do it. > > 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. Actually, this is a sample of markup that will exist after the .dialog() init call has turned your simple div into a jQuery UI Dialog. This is the "after" where the "before" is something like <div id="dialog"> <p>Dialog content goes here.</p> </div> All ui-{widgetname} classes are added by UI plugins themselves. So if you're ever creating markup that contains them, that's not the intended use. I guess we need to make that more clear on this page. > 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. This sounds like it's related to the fact that you've used (as I explained above) the "after" markeup. So you manually turned it into a UI dialog, and then the plugin went and turned *that* into a dialog. Hence the 2 Xs. > > 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? > I'm sorry for your frustration. Here are what we feel are some minimal examples http://jquery-ui.googlecode.com/svn/tags/testing/demos/dialog/default.html http://jquery-ui.googlecode.com/svn/tags/testing/demos/dialog/modal.html http://jquery-ui.googlecode.com/svn/tags/testing/demos/dialog/modal-message.html http://jquery-ui.googlecode.com/svn/tags/testing/demos/dialog/modal-confirmation.html http://jquery-ui.googlecode.com/svn/tags/testing/demos/dialog/modal-form.html You can preview them and do 'view source'. We've tried to make them as minimal and straightforward as possible. The same are also included in the latest preview release (1.6rc6) development bundle, inside the 'demos' folder. If you feel there are some important examples we've missed, or that we could make the existing examples even easier to understand and use, please post to the jQuery UI mailing list: http://groups.google.com/group/jquery-ui Thanks. - Richard
