corrade-http-templates – Rev 62

Subversion Repositories:
Rev:
<!doctype html>
<html lang="en">
<head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>jQuery UI Progressbar - Download Dialog</title>
        <link rel="stylesheet" href="../../themes/base/all.css">
        <link rel="stylesheet" href="../demos.css">
        <script src="../../external/requirejs/require.js"></script>
        <script src="../bootstrap.js" data-modules="dialog">
                var progressTimer,
                        progressbar = $( "#progressbar" ),
                        progressLabel = $( ".progress-label" ),
                        dialogButtons = [{
                                text: "Cancel Download",
                                click: closeDownload
                        }],
                        dialog = $( "#dialog" ).dialog({
                                autoOpen: false,
                                closeOnEscape: false,
                                resizable: false,
                                buttons: dialogButtons,
                                open: function() {
                                        progressTimer = setTimeout( progress, 2000 );
                                },
                                beforeClose: function() {
                                        downloadButton.button( "option", {
                                                disabled: false,
                                                label: "Start Download"
                                        });
                                }
                        }),
                        downloadButton = $( "#downloadButton" )
                                .button()
                                .on( "click", function() {
                                        $( this ).button( "option", {
                                                disabled: true,
                                                label: "Downloading..."
                                        });
                                        dialog.dialog( "open" );
                                });

                progressbar.progressbar({
                        value: false,
                        change: function() {
                                progressLabel.text( "Current Progress: " + progressbar.progressbar( "value" ) + "%" );
                        },
                        complete: function() {
                                progressLabel.text( "Complete!" );
                                dialog.dialog( "option", "buttons", [{
                                        text: "Close",
                                        click: closeDownload
                                }]);
                                $(".ui-dialog button").last().trigger( "focus" );
                        }
                });

                function progress() {
                        var val = progressbar.progressbar( "value" ) || 0;

                        progressbar.progressbar( "value", val + Math.floor( Math.random() * 3 ) );

                        if ( val <= 99 ) {
                                progressTimer = setTimeout( progress, 50 );
                        }
                }

                function closeDownload() {
                        clearTimeout( progressTimer );
                        dialog
                                .dialog( "option", "buttons", dialogButtons )
                                .dialog( "close" );
                        progressbar.progressbar( "value", false );
                        progressLabel
                                .text( "Starting download..." );
                        downloadButton.trigger( "focus" );
                }
        </script>
        <style>
        #progressbar {
                margin-top: 20px;
        }

        .progress-label {
                font-weight: bold;
                text-shadow: 1px 1px 0 #fff;
        }

        .ui-dialog-titlebar-close {
                display: none;
        }
        </style>
</head>
<body>

<div id="dialog" title="File Download">
        <div class="progress-label">Starting download...</div>
        <div id="progressbar"></div>
</div>
<button id="downloadButton">Start Download</button>

<div class="demo-description">
<p>Download dialog progressbar demo.</p>
</div>
</body>
</html>