Skip to content
Permalink
Browse files

progressbar refactor

  • Loading branch information
rdworth committed Dec 5, 2008
1 parent 6c93b4e commit d55c733e41ba9493126b5cb512a8dd347a1d4c31
Showing with 150 additions and 429 deletions.
  1. +30 −279 tests/visual/progressbar.html
  2. +120 −150 ui/ui.progressbar.js
@@ -6,289 +6,40 @@
<title>ProgressBar Test Page</title>
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
<script type="text/javascript" src="../../ui/ui.resizable.js"></script>
<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
<script type="text/javascript" src="../../ui/ui.progressbar.js"></script>
<script type="text/javascript" src="../../ui/effects.core.js"></script>

<style type="text/css" media="all">

body
{
background: #fff;
font-family: Arial;
}

#log {
right:0px;
top:0px;
background-color:#FAFCFE;
border:1px solid #DFE8F6;
height:400px;
width:300px;
position:absolute;
overflow:auto;
}

/* ProgressBar */

.ui-progressbar {
width: 400px; height: 20px;
border: 1px #ccc solid;
background:#E0E8F3 url(../images/bg.gif) repeat-x scroll 0%;
position:relative;
}

.ui-progressbar-wrap {
position: relative;
height: auto;
width: auto;
line-height: 18px;
_line-height: 16px;
}

.ui-progressbar-bar {
background:#9CBFEE url(../images/progress-bg.gif) repeat-x scroll left center;
border-bottom:1px solid #7FA9E4;
border-right:1px solid #7FA9E4;
border-top:1px solid #D1E4FD;
position: absolute;
}

.ui-progressbar-text {
color:#fff;
overflow: hidden;
white-space: nowrap;
font-size: 11px;
font-weight: bold;
padding-left: 5px;
}

.ui-progressbar-text-back {
color:#000;
padding-top: 1px;
padding-bottom: 1px;
padding-right: 1px;
}

.ui-progressbar-disabled {
opacity:.5;
filter:Alpha(Opacity=50);
}


/* custom */
.ui-progressbar-text.right-align {
text-align: right;
padding: 0 5px 0 0;
}
.ui-progressbar-inner-custom {
background: url(../images/custom-bar.gif) repeat-x scroll left center;
border-bottom:1px solid #EFEFEF;
border-right:0pt none;
border-top:1px solid #BEBEBE;
height:15px;
}
.bold {
color: red !important;
}
.ui-hidden {
left:-10000px;
position:absolute;
top:-10000px;
visibility:hidden;
}

<style type="text/css">
.ui-progressbar { position: relative; height: 22px; border: 1px solid black; }
.ui-progressbar-labelalign-left { text-align: left; }
.ui-progressbar-labelalign-center { text-align: center; }
.ui-progressbar-labelalign-right { text-align: right; }
.ui-progressbar-label { color: black; }
.ui-progressbar-labelalign-left .ui-progressbar-label div { padding-left: 0.5em; }
.ui-progressbar-labelalign-right .ui-progressbar-label div { padding-right: 0.5em; }
.ui-progressbar-value { position: absolute; top: 0; background: gray; overflow: hidden; height: 100%; white-space: nowrap; }
.ui-progressbar-value .ui-progressbar-label { color: white; }
</style>
</head>
<body >

<h1>jQuery - ProgressBar</h1>

<div id="log">log</div>


<div id='p1'></div><br>

<button id="p1-create">Create</button>
<button id="p1-destroy" onclick="$('#p1').progressbar('destroy');">destroy</button>
<button id="p1-start" onclick="$('#p1').progressbar('start');">Start</button>
<button id="p1-stop" onclick="$('#p1').progressbar('stop');">Stop</button>
<button id="p1-stop" onclick="$('#p1').progressbar('pause');">pause</button>
<button id="p1-enable" onclick="$('#p1').progressbar('enable');">enable</button>
<button id="p1-disable" onclick="$('#p1').progressbar('disable');">disable</button>
<button id="p1-progress" onclick="$('#p1').progressbar('progress', 50);">progress to 50</button>
<button id="p1-progress" onclick="$('#p1').progressbar('text', 'Textchanged!');">Change text</button>

<br><br>

<div id='p2'></div><br>

<button id="p2-create">Create</button>
<button id="p2-destroy" onclick="$('#p2').progressbar('destroy');">destroy</button>
<button id="p2-start" onclick="$('#p2').progressbar('start');">Start</button>
<button id="p2-stop" onclick="$('#p2').progressbar('stop');">Stop</button>
<button id="p2-stop" onclick="$('#p2').progressbar('pause');">pause</button>
<button id="p2-enable" onclick="$('#p2').progressbar('enable');">enable</button>
<button id="p2-disable" onclick="$('#p2').progressbar('disable');">disable</button>
<button id="p2-progress" onclick="$('#p2').progressbar('progress', 40);">progress to 50</button>

<br><br>

<div id='p3'></div><br>

<button id="p3-create">Create</button>
<button id="p3-destroy" onclick="$('#p3').progressbar('destroy');">destroy</button>
<button id="p3-start" onclick="$('#p3').progressbar('start');">Start</button>
<button id="p3-stop" onclick="$('#p3').progressbar('stop');">Stop</button>
<button id="p3-stop" onclick="$('#p3').progressbar('pause');">pause</button>
<button id="p3-enable" onclick="$('#p3').progressbar('enable');">enable</button>
<button id="p3-disable" onclick="$('#p3').progressbar('disable');">disable</button>
<button id="p3-progress" onclick="$('#p3').progressbar('progress', $('#p3-value').val());">progress to</button>
<input type="text" id="p3-value" value="35"/>

<br><br>

<button id="p2-startall" onclick="$('#p2, #p1, #p3').progressbar('start');">Start All</button>
<button id="p2-stopall" onclick="$('#p2, #p1, #p3').progressbar('stop');">Stop All</button>
<button id="p2-stopall" onclick="$('#p2, #p1, #p3').progressbar('pause');">Pause All</button>

<script>

$(function() {

$('#p1-create').click(function() {

$('#p1').progressbar({

text: 'jQuery ProgressBar waiting...',

//addClass: 'ui-progressbar-inner-custom teste',

//textClass: 'right-align',

//align: 'right',

equation: 'easeOutBounce',

width: 500,

duration: 3000,

interval: 800,

increment: 1,

progress: function(ui) {
//console.log(ui.pixelRange);
//console.log(ui);
//ui.instance.text('Waiting...');
},

stop: function(ui) {
//console.log('user stop', ui);
},

start: function(ui) {
//console.log('user start', ui);
console.log('p1', ui.identifier);
}

});

}).trigger("click");


$('#p2-create').click(function() {

$('#p2').progressbar({

text: 'Testing...',

//addClass: 'ui-progressbar-inner-custom teste',

//textClass: 'right-align',

//align: 'right',

width: 500,

duration: 5000,

equation: 'easeInOutQuint',

interval: 2000,

increment: 50,

progress: function(ui) {
//console.log(ui.pixelRange);
//console.log(ui);
//ui.instance.text('Waiting...');
},

stop: function(ui) {
//console.log('user stop', ui);
},

start: function(ui) {
//console.log('user start', ui);
console.log('p2', ui.identifier);
}

});

}).trigger("click");


$('#p3-create').click(function() {

$('#p3').progressbar({

//text: 'Testing again...',

//addClass: 'ui-progressbar-inner-custom teste',

//textClass: 'right-align',

//align: 'right',

width: 700,

duration: 5000,

interval: 3000,

increment: 10,

progress: function(ui) {
//console.log(ui.pixelRange);
//console.log(ui);
//ui.instance.text('Waiting...');
},

stop: function(ui) {
//console.log('user stop', ui);
},

start: function(ui) {
//console.log('user start', ui);
console.log('p3', ui.identifier);
}

});
}).trigger('click');
});

if(!window.console) {
window.console = {
log: function() {
$('#log').append(arguments[0]+"<br>");
$('#log').scrollTop(999999);
}
};
}
<script type="text/javascript">
$(function() {
$("#progressbar1").progressbar({ value: 6 });
$("#progressbar2").progressbar({ labelAlign: 'center', label: 'center' });
$("#progressbar3").progressbar().progressbar("option", "labelAlign", "right").progressbar("value", 90).data("label.progressbar", "right");
});
</script>
</head>
<body>

<ul class="plugins">
<li>
Progressbar
<div id="progressbar1"></div>
<hr>
<div id="progressbar2"></div>
<hr>
<div id="progressbar3"></div>
</li>
</ul>

</script>
</body>
</html>

0 comments on commit d55c733

Please sign in to comment.
You can’t perform that action at this time.