Download Safari Books Online apps: Apple iOS | Android

Entire Site

Safari Books Online

    Free Trial

    Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.


    • Create BookmarkCreate Bookmark
    • Create Note or TagCreate Note or Tag
    • DownloadDownload
    • PrintPrint
    Share this Page URL
    Help

    Examples of Using Dialog Boxes > Changing the Behavior of a Dialog Box with Eff...

    Changing the Behavior of a Dialog Box with Effects

    We have seen that the options used when creating the dialog box can be modified by the dialog ("option", param, value) method. The param parameter is the name of the option, while the value corresponds to its new value.

    To illustrate this, let’s change the effect for the opening and closing of the window. We’ll display two lists for which we can select the desired effect ("puff", "slide", etc.). When creating the dialog box, no effect is associated with it:

    <!DOCTYPE html>
<script src = jquery.js></script>
<script src = jqueryui/js/jquery-ui-1.8.16.custom.min.js></script>

<link rel=stylesheet type=text/css
      href=jqueryui/css/smoothness/jquery-ui-1.8.16.custom.css />

<div id="dialog" title="Window title">
  <p> Content of the dialog box</p>
</div>

Open effect
<select id=effectopen>
  <option>No effect</option>
  <option>blind</option>
  <option>bounce</option>
  <option>clip</option>
  <option>drop</option>
  <option>fold</option>
  <option>highlight</option>
  <option>puff</option>
  <option>pulsate</option>
  <option>scale</option>
  <option>slide</option>
</select>

<br />

Close effect
<select id=effectclose>
  <option>No effect</option>
  <option>blind</option>
  <option>bounce</option>
  <option>clip</option>
  <option>drop</option>
  <option>fold</option>
  <option>highlight</option>
  <option>puff</option>
  <option>pulsate</option>
  <option>scale</option>
  <option>slide</option>
</select>

<br />

<input id=open type=button value=Open>

<script>

$("div#dialog").dialog ({
  autoOpen : false
});

$("#effectopen").change (function (event)
{
  var effect = $(this).val ();
  if (effect == "No effect") effect = false;
  $("div#dialog").dialog ("option", "show", effect);
});

$("#effectclose").change (function (event)
{
  var effect = $(this).val ();
  if (effect == "No effect") effect = false;
  $("div#dialog").dialog ("option", "hide", effect);
});

$("#open").click (function (event)
{
  $("#dialog").dialog ("open");
});

</script>

    Figure 4-11 shows the result with the fold and highlight effects selected.

    Application of an effect at the opening and closing of the dialog box

    Figure 4-11. Application of an effect at the opening and closing of the dialog box