Markup and Scripting

The majority of the time, you'll want the wijdialog to show up during an event, such as an onClick event. For example, the above markup includes markup to create buttons that will show or hide the wijdialog widget.

The HTML markup for a wijdialog widget looks like this.

Markup	Copy Code
<div> <input type="button" value="Hide Dialog" onclick="$('#dialog').wijdialog('close')"/> <input type="button" value="Show Dialog" onclick="$('#dialog').wijdialog('open')"/> <div id="dialog" title="Basic dialog"></div> </div>

Markup

Copy Code

<div>                
    <input type="button" value="Hide Dialog" onclick="$('#dialog').wijdialog('close')"/>                
    <input type="button" value="Show Dialog" onclick="$('#dialog').wijdialog('open')"/>                
    <div id="dialog" title="Basic dialog"></div>            
</div>

You can initialize the widget with the following jQuery script.

Script	Copy Code
<script type="text/javascript"> requirejs.config({ baseUrl: "http://cdn.wijmo.com/amd-js/3.20161.90", paths: { "jquery": "jquery-1.11.1.min", "jquery-ui": "jquery-ui-1.11.0.custom.min", "jquery.ui": "jquery-ui", "jquery.mousewheel": "jquery.mousewheel.min", "globalize": "globalize.min" } }); </script> <script id="scriptInit" type="text/javascript"> require(["wijmo.wijdialog"], function () { $(document).ready(function () { $('#dialog').wijdialog({ autoOpen: false, captionButtons: { refresh: { visible: false} } }); }); }); </script>

Script

Copy Code

<script type="text/javascript">
    requirejs.config({
        baseUrl: "http://cdn.wijmo.com/amd-js/3.20161.90",
            paths: {
                "jquery": "jquery-1.11.1.min",
                "jquery-ui": "jquery-ui-1.11.0.custom.min",
                "jquery.ui": "jquery-ui",
                "jquery.mousewheel": "jquery.mousewheel.min",
                "globalize": "globalize.min"
            }
    });
</script>

<script id="scriptInit" type="text/javascript">
    require(["wijmo.wijdialog"], function () {
        $(document).ready(function () {
            $('#dialog').wijdialog({
                autoOpen: false,
                captionButtons: {
                    refresh: { visible: false}
                }
            });
        });
    });
</script>

The markup and script featured here results in the following live widget. Click the buttons to show or hide the dialog.

Reference

wijdialog Widget