Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

New download dialog progressbar demo #872

Closed
wants to merge 2 commits into from

3 participants

@kborchers
Owner

No description provided.

demos/progressbar/download.html
((3 lines not shown))
+<head>
+ <meta charset="utf-8">
+ <title>jQuery UI Progressbar - Download Dialog</title>
+ <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+ <script src="../../jquery-1.8.3.js"></script>
+ <script src="../../ui/jquery.ui.core.js"></script>
+ <script src="../../ui/jquery.ui.widget.js"></script>
+ <script src="../../ui/jquery.ui.progressbar.js"></script>
+ <script src="../../ui/jquery.ui.button.js"></script>
+ <script src="../../ui/jquery.ui.position.js"></script>
+ <script src="../../ui/jquery.ui.dialog.js"></script>
+ <link rel="stylesheet" href="../demos.css">
+ <script>
+ $(function() {
+ var progressbar = $( "#progressbar" ),
+ progressLabel = $( ".progress-label" ),
@scottgonzalez Owner

progressbar.find( ".progress-label" )

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
demos/progressbar/download.html
((31 lines not shown))
+ $( this ).button( "option", {
+ disabled: true,
+ label: "Downloading..."
+ });
+ dialog.dialog( "open" );
+ });
+
+ progressbar.progressbar({
+ value: false,
+ change: function() {
+ progressLabel.text( progressbar.progressbar( "value" ) + "%" );
+ },
+ complete: function() {
+ progressLabel
+ .prependTo( "#progressbar" )
+ .css({
@scottgonzalez Owner

Use a class.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
@scottgonzalez

I actually find the moving label kind of distracting. What do you think about just moving the label outside of the progressbar, either above or below it?

@scottgonzalez

I'm also not a fan of a non-movable, non-closable dialog.

@kborchers
Owner

I can move the label out, no problem. I actually meant to add a "Cancel Download" button which would effectively just close the dialog but didn't feel like the "X" button made sense. I'll add that button and make it movable.

@kborchers
Owner

@scottgonzalez let me know what you think of those updates

@jzaefferer
Owner
  • Add new file to index.html
  • Move focus to "Done" button when replacing the Cancel Download button
  • Progress got stuck at 99% twice, maybe need to check for <= on line 64
  • Reenable the button before closing the dialog, so that focus can move back
@jzaefferer
Owner

@kborchers ping. Can you address those four points above?

@kborchers
Owner

@jzaefferer Yep, I should have time to do that tonight. Sorry, this must have slipped by me and I forgot about it.

@kborchers
Owner

Replacing this PR with #970 since this PR was done from my master branch like a n00b :-/

@kborchers kborchers closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Dec 30, 2012
  1. @kborchers
Commits on Jan 4, 2013
  1. @kborchers

    Progressbar Demos: Add ability to cancel download, move label outside…

    kborchers authored
    … of value bar and clean up.
This page is out of date. Refresh to see the latest.
Showing with 111 additions and 0 deletions.
  1. +111 −0 demos/progressbar/download.html
View
111 demos/progressbar/download.html
@@ -0,0 +1,111 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>jQuery UI Progressbar - Download Dialog</title>
+ <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+ <script src="../../jquery-1.8.3.js"></script>
+ <script src="../../ui/jquery.ui.core.js"></script>
+ <script src="../../ui/jquery.ui.widget.js"></script>
+ <script src="../../ui/jquery.ui.progressbar.js"></script>
+ <script src="../../ui/jquery.ui.mouse.js"></script>
+ <script src="../../ui/jquery.ui.draggable.js"></script>
+ <script src="../../ui/jquery.ui.button.js"></script>
+ <script src="../../ui/jquery.ui.position.js"></script>
+ <script src="../../ui/jquery.ui.dialog.js"></script>
+ <link rel="stylesheet" href="../demos.css">
+ <script>
+ $(function() {
+ 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 );
+ }
+ }),
+ 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
+ }]);
+ }
+ });
+
+ function progress() {
+ var val = progressbar.progressbar( "value" ) || 0;
+
+ progressbar.progressbar( "value", val + Math.floor( Math.random() * 3 ) );
+
+ if ( val < 99 ) {
+ progressTimer = setTimeout( progress, 100 );
+ }
+ }
+
+ function closeDownload() {
+ clearTimeout( progressTimer );
+ dialog
+ .dialog( "option", "buttons", dialogButtons )
+ .dialog( "close" );
+ progressbar.progressbar( "value", false );
+ progressLabel
+ .text( "Starting download..." );
+ downloadButton.button( "option", {
+ disabled: false,
+ label: "Start Download"
+ });
+ }
+ });
+ </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>
Something went wrong with that request. Please try again.