jQueryUI setting options in a variable - syntax for effects

Question

$(function(){
        var dialogOpts = {
        autoOpen:       false,
        height:         400,
        width:          600,
        position:       ["center", "center"],
        modal:          false,
        closeOnEscape:  true,
        stack:          true,
        draggable:      true,
        show:           "clip",
        hide:           "bounce"
    };

I'm setting the above options for a jQuery UI Dialog but want to dictate some options for each of the effects, such as speed and number of bounces etc, but I can't find an example of the syntax anywhere.

I've tried

show: ["clip", 100],

and the like but not hitting the mark, any pointer in the right direction would be appreciated...!

Answer 1

If you can provide option, it's probably in an object and not an array try:

show : { "clip": 100},

Answer 2

The jQuery UI Dialog source code uses the following command to show the dialog:

uiDialog.show(options.show);

So you are not going to be able to pass additional options to show because the code is not expecting them. In order to do so, you will probably have to create your own custom version of the dialog code. Which is not that hard to do since the source code is freely available, but it is work.

Answer 3

You can't do this with the current version of jQuery UI, however, you're not the first person wanting this. If you look at Ticket #2358 you can get the patch needed to accomplish this. Once you apply dialog2.patch to your ui.dialog.js you can use this syntax:

show: { effect:"clip", options:{}, speed:100 }

This will not work without the patch, jQuery UI doesnt' natively support it. This is the community adding functionality, which hopefully will land in a future jQuery UI release.