GPS Web Assets

References

<script type='text/javascript' src='http://webassets.guardianprotection.com/Scripts/jquery-1.4.4.js'></script>
<script type='text/javascript' src='http://webassets.guardianprotection.com/Scripts/jquery-ui-1.8.7.custom.min.js'></script>
<script type='text/javascript' src='http://webassets.guardianprotection.com/Scripts/jquery.gps.global-init.js'></script>

<link href='http://webassets.guardianprotection.com/Content/css/gps/jquery-ui-custom.css' rel='stylesheet' type='text/css' />

Class auto-wire:

To take advantage of the class auto-wire in the GPS javascript library you must specify: class="jqy-dialog"

The example that pops up initially does so because the autoOpen property is set to true. Specifying the class only prompts the framework that the given div tag should be processed as a dialog, all options are retrieved from the data property.

        <div class="jqy-dialog" data='{"autoOpen":"true", "title":"Basic Dialog", "width":"500", "height":"300"}'>
            This is a dialog with <code>data='{"autoOpen":"true"}'</code> set.
        </div>
    

Dialog Trigger Auto-wiring:

To take advantage of the dialog trigger auto-wiring you need to place two elements into whatever clickable element you choose to use as the trigger event.

            <div id="trigger-dialog" class="jqy-dialog" data='{"title":"Triggered Dialog"}'>
                This is a dialog triggered by a trigger element with <code>class="jqy-dialog-trigger"</code>
            </div>

            <input type="button" class="jqy-dialog-trigger" data='{"targetDialog":"#selector"}'>
        

The two elements here is the class="jqy-dialog-trigger" which tells the gps javascript framework that this element is a dialog trigger and data='{"targetDialog":"#selector"}' which specifies the target dialog(s) to open upon being clicked. One important thing to note the JQuery-UI default of autoOpen: true has been set to false. To make a dialog window not autoOpen do not specify it in the data parameters.

Example:

Options

Options can be specified in the data property of the div element you want to make into a dialog window. Note: These are the same options that can be used inside the jquery $("selector").dialog(); method.

The format of this should be:

        <div class="jqy-dialog" data='{"autoOpen":"true", "title":"Basic Dialog", "width":"500", "height":"300"}'>
            This is a dialog with <code>data='{"autoOpen":"true"}'</code> set.
        </div>
    

More documentation can be found at the JQuery-UI Dialog page.