-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
104 lines (97 loc) · 4.49 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>AjaxProgressBar demo by ZiglioNZ</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/result-light.css">
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js">
</script>
<script type='text/javascript' src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.debug.js">
</script>
<style type='text/css'>
.ui-progressbar .ui-progressbar-animated {
background: url("http://view.jqueryui.com/master/demos/progressbar/images/pbar-ani.gif");
}
#progressbar {
width: 95%;
margin: 10px auto;
}
</style>
<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){
model = {
loaded: ko.observable(0),
total: ko.observable(1118012), // alternatively you can read the total length from an http header
init: function(){
ko.bindingHandlers.jqProgress = {
init: function(element, valueAccessor, allBindingsAccessor, viewModel){
var options = {
value: 0
};
var bar = $(element);
bar.progressbar(options);
},
update: function(element, valueAccessor, viewModel){
var bar = $(element);
var oldvalue = bar.progressbar("value");
var newvalue = ko.utils.unwrapObservable(valueAccessor());
if (oldvalue != newvalue) {
bar.progressbar("value", newvalue);
}
}
};
this.progress = ko.computed(function(){
if (this.total())
return this.loaded() / this.total() * 100;
else
return 0;
}, this);
}
};
model.init();
ko.applyBindings(model);
jQuery.ajax({
url: "random750x750.jpg",
cache: false, // for demo purposes
xhr: function(){
var xhr = jQuery.ajaxSettings.xhr();
if( 'onprogress' in xhr ) {
xhr.onprogress = function(e){
if (!model.total() || model.total() <= 0) {
if (e.totalSize && e.totalSize > 0) {
model.total(e.totalSize);
}
else {
model.total(e.target.getResponseHeader('content-length')); // you could pass a customer header
}
}
model.loaded(e.loaded);
};
} else {
xhr.onreadystatechange = function(){
model.loaded(0);
};
}
return xhr;
},
complete: function(jqXHR, textStatus){
model.total(jqXHR.getResponseHeader('Content-Length'));
model.loaded( model.total());
}
});
});//]]>
</script>
</head>
<body>
Test Download Progress Bar
<br/>
<div data-bind="jqProgress: model.progress">
</div>
<br/>
</body>
</html>