Include jquery [optional] and radialIndicator.js.
|
1
|
<
script
src
=
"radialIndicator.js"
></
script
>
|
A simple initialization.
Getting instance of radial Progress
Change
|
1
|
$(
'#indicatorContainer'
).radialIndicator();
|
In this first argument is configuration parameters [Optional], Lets see a example with configuration.
Change
|
1
2
3
4
5
6
7
|
$(
'#indicatorContainer'
).radialIndicator({
barColor:
'#87CEEB'
,
barWidth: 10,
initValue: 40,
roundCorner :
true
,
percentage:
true
});
|
|
1
2
3
4
|
var
radialObj = $(
'#indicatorContainer'
).data(
'radialIndicator'
);
//now you can use instance to call different method on the radial progress.
//like
radialObj.animate(60);
|
What if you don't use jQuery
Radial Progress work standalone too.|
1
2
3
4
5
6
7
8
9
|
//Intialiazation
var
radialObj = radialIndicator(
'#indicatorContainer'
, {
barColor :
'#87CEEB'
,
barWidth : 10,
initValue : 40
});
//Using Instance
radialObj.animate(60);
|
In this way first argument is a selector string or dom node or node list (Even you pass a node list it takes the first node only). Function returns a instance so you can use it call different methods same as shown in jquery example.
You can use any one of the following way as per your convinient.
A radialIndicator without number idicator
Change
|
1
2
3
|
$(
'#indicatorContainer'
).radialIndicator({
displayNumber:
false
});
|
Providing a color range
You can provide a color range for different points, and if interpolate option is true radialIndicator will interpolate color between two points else it will take the upper limit color of the points.
Change
|
1
2
3
4
5
6
7
8
9
|
$(
'#indicatorContainer'
).radialIndicator({
barColor: {
0:
'#FF0000'
,
33:
'#FFFF00'
,
66:
'#0066FF'
,
100:
'#33CC33'
},
percentage:
true
});
|
Providing minimum value and maximum value
You can provide a minimum and maximum value to display the indicator as per required .
Change
|
1
2
3
4
|
$(
'#indicatorContainer'
).radialIndicator({
minValue: 1000,
maxValue: 100000
});
|
Formating a indicator
You can provide a # formatter or a formatter function to format indicator.
Change
|
1
2
3
4
5
6
|
$(
'#indicatorContainer'
).radialIndicator({
radius: 70,
minValue: 10000,
maxValue: 10000000,
format:
'$ ##,##,###'
});
|
Having logo / different element inside the radial inside radialIndicator
This we can easily achieve with normal html css. Here is an example
Change
HTML
|
1
2
3
4
|
<
div
id
=
"indicatorContainerWrap"
>
<
div
id
=
"indicatorContainer"
></
div
>
<
img
src
=
"picture/lab_exp.png"
id
=
"prgLogo"
/>
</
div
>
|
CSS
|
1
2
3
4
5
6
7
8
9
10
11
|
#indicatorContainerWrap,#indicatorContainer{
display
:inline-
block
;
position
:
relative
;
}
#prgLogo{
position
:
absolute
;
width
:
60px
;
height
:
60px
;
margin-top
:
-30px
;
margin-left
:
-30px
;
}
|
JS
|
1
|
$(
'#indicatorContainer'
).radialIndicator({value : 90});
|
A clock example
A simple clock using radial indicator.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
var
radialObj = radialIndicator(
'#indicatorContainer'
, {
radius: 60,
barWidth: 5,
barColor:
'#FF0000'
,
minValue: 0,
maxValue: 60,
fontWeight:
'normal'
,
roundCorner:
true
,
format:
function
(value) {
var
date =
new
Date();
return
date.getHours() +
':'
+ date.getMinutes();
}
});
setInterval(
function
() {
radialObj.value(
new
Date().getSeconds() + 1);
}, 1000);
|
A file upload example
Click / Drop file to select.
HTML
|
1
2
3
4
5
|
<
div
id
=
"indicatorContainerWrap"
>
<
div
class
=
"rad-prg"
id
=
"indicatorContainer"
></
div
>
<
div
class
=
"rad-cntnt"
>Click / Drop file to select.</
div
>
<
input
type
=
"file"
id
=
"prgFileSelector"
/>
</
div
>
|
CSS
|
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
|
#indicatorContainerWrap{
position
:
relative
;
display
: inline-
block
;
}
.rad-cntnt{
position
:
absolute
;
display
: table;
vertical-align
:
middle
;
text-align
:
center
;
width
:
100%
;
top
:
50%
;
-webkit-transform: translateY(
-50%
);
-moz-transform: translateY(
-50%
);
-ms-transform: translateY(
-50%
);
-o-transform: translateY(
-50%
);
transform: translateY(
-50%
);
font-size
:
20px
;
line-height
:
24px
;
}
#prgFileSelector{
position
:
absolute
;
width
:
100%
;
height
:
100%
;
opacity:
0
;
top
:
0
;
left
:
0
;
z-index
:
10
;
}
|
JS
|
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
|
//file upload example
var
container = $(
'#indicatorContainerWrap'
),
msgHolder = container.find(
'.rad-cntnt'
),
containerProg = container.radialIndicator({
radius: 100,
percentage:
true
,
displayNumber:
false
}).data(
'radialIndicator'
);
container.on({
'dragenter'
:
function
(e) {
msgHolder.html(
"Drop here"
);
},
'dragleave'
:
function
(e) {
msgHolder.html(
"Click / Drop file to select."
);
},
'drop'
:
function
(e) {
e.preventDefault();
handleFileUpload(e.originalEvent.dataTransfer.files);
}
});
$(
'#prgFileSelector'
).on(
'change'
,
function
() {
handleFileUpload(
this
.files);
});
function
handleFileUpload(files) {
msgHolder.hide();
containerProg.option(
'displayNumber'
,
true
);
var
file = files[0],
fd =
new
FormData();
fd.append(
'file'
, file);
$.ajax({
url:
'service/upload.php'
,
type:
'POST'
,
data: fd,
processData:
false
,
contentType:
false
,
success:
function
() {
containerProg.option(
'displayNumber'
,
false
);
msgHolder.show().html(
'File upload done.'
);
},
xhr:
function
() {
var
xhr =
new
window.XMLHttpRequest();
//Upload progress
xhr.upload.addEventListener(
"progress"
,
function
(e) {
if
(e.lengthComputable) {
var
percentComplete = (e.loaded || e.position) * 100 / e.total;
//Do something with upload progress
console.log(percentComplete);
containerProg.animate(percentComplete);
}
},
false
);
return
xhr;
}
});
}
|
http://www.htmleaf.com/Demo/201502171390.html
2846
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
