mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-11-21 11:04:24 +00:00
296 lines
7.0 KiB
HTML
296 lines
7.0 KiB
HTML
<?xml version="1.0" encoding="UTF-8"?>
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
|
<head>
|
|
<meta http-equiv="Content-Language" content="en" />
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<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>
|
|
</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>
|
|
</body>
|
|
</html>
|