| Autor |
Beitrag |
Csharp-programmierer
Beiträge: 696
Erhaltene Danke: 10
Windows 8.1
C# (VS 2013)
|
Verfasst: So 05.02.17 20:43
Hallo,
ich habe mir jetzt ein Plugin heruntergeladen, welches mir einen CricleProgrss erlaubt. Soweit funktioniert das alles, aber ich möchte in der Mitte noch eine Zahl haben (Label)
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:
| <table class="wsite-multicol-table">
<tbody class="wsite-multicol-tbody">
<tr class="wsite-multicol-tr">
<td class="wsite-multicol-col" style="width:33%; padding:0 15px;"><center><div class="firstx"></div></center></td>
<td class="wsite-multicol-col" style="width:33%; padding:0 15px;"><center><div class="firstx"></div></center></td>
<td class="wsite-multicol-col" style="width:33%; padding:0 15px;"><center><div class="firstx"></div></center></td>
</tr>
<tr class="wsite-multicol-tr">
<td class="wsite-multicol-col" style="width:33%; padding:20px 15px;"><font color="#00b1ff" size="5"><center><label>Downloads</label></center></font></td>
<td class="wsite-multicol-col" style="width:33%; padding:20px 15px;"><font color="#00b1ff" size="5"><center><label>Bewertung</label></center></font></td>
<td class="wsite-multicol-col" style="width:33%; padding:20px 15px;"><font color="#00b1ff" size="5"><center><label>xD</label></center></font></td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
function EnableStyle() {
$('.firstx').circleProgress({
value: 1.0,
size: 200.0,
startAngle: -Math.PI,
thickness: 'auto',
color: '#3aeabb',
fill: {
gradient: ['#00b1ff', '#00b1ff']
},
emptyFill: 'rgba(0, 0, 0, .1)',
animation: {
duration: 1200,
easing: 'circleProgressEasing'
},
animationStartValue: 0.0,
reverse: false,
lineCap: 'round',
});
}
</script> |
Hier habe ich mit dieses Plugin heruntergeladen: www.jqueryscript.net...Circle-Progress.html
Wie kann ich noch ein Label in die Mitte machen?
Moderiert von  Christian S.: JS- durch HTML-Tag ersetzt
Einloggen, um Attachments anzusehen!
_________________ "Wer keinen Sinn im Leben sieht, ist nicht nur unglücklich, sondern kaum lebensfähig" - Albert Einstein
|
|
jfheins
Beiträge: 918
Erhaltene Danke: 158
Win 10
VS 2013, VS2015
|
Verfasst: Mo 06.02.17 01:49
Guck' dir mal fen Quellcode der Demo-Seite an: www.jqueryscript.net...vas-Circle-Progress/
Da ist z.B.:   JavaScript-Quelltext
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
|
$('.third.circle').circleProgress({
value: 0.8,
fill: { gradient: ['#0681c4', '#07c6c1'] }
}).on('circle-animation-progress', function(event, progress, stepValue) {
$(this).find('strong').text(String(stepValue.toFixed(2)).substr(1));
});
|
Also ein Callback-Event, in dem du den Fortschritt wieder gesagt bekommst. Solange es nur eine statische Zahl ist, kannst du sie ja einfach drüber positionieren.
Moderiert von Christian S.: PHP- durch JS-Tags ersetzt
|
|
Csharp-programmierer 
Beiträge: 696
Erhaltene Danke: 10
Windows 8.1
C# (VS 2013)
|
Verfasst: Mo 06.02.17 14:10
Ah, vielen Dank. Jetzt bekomme ich schonmal einen Wert angezeigt:
HTML-Dokument
1:
2:
3:
4:
5:
| <td class="wsite-multicol-col" style="width:33%; padding:0 15px;">
<div class="firstx">
<strong></strong>
</div>
</td> |
JavaScript-Quelltext
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:
| function EnableStyle() {
$('.firstx').circleProgress({
value: 1.0,
size: 200.0,
startAngle: -Math.PI,
thickness: 'auto',
color: '#3aeabb',
fill: {
gradient: ['#00b1ff', '#00b1ff']
},
emptyFill: 'rgba(0, 0, 0, .1)',
animation: {
duration: 1200,
easing: 'circleProgressEasing'
},
animationStartValue: 0.0,
reverse: false,
lineCap: 'round',
}).on('circle-animation-progress', function(event, progress, stepValue) {
$(this).find('strong').text(String(stepValue.toFixed(2)).substr(1));
});
} |
Der Wert ist aber jetzt rechts unten neben dem Kreis. Wie kann ich diesen Wert in den Kreis rein machen? _________________ "Wer keinen Sinn im Leben sieht, ist nicht nur unglücklich, sondern kaum lebensfähig" - Albert Einstein
|
|
Csharp-programmierer
Beiträge: 696
Erhaltene Danke: 10
Windows 8.1
C# (VS 2013)
|
Verfasst: Mo 06.02.17 18:19
Jetzt habe ich es geschafft, dass die Zahl in dem Kreis ist. Aber wie kann ich jetzt eine eigene Zahl dort rein machen?
JavaScript-Quelltext
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:
| function EnableStyle() {
$('.firstx').circleProgress({
value: 1.0,
size: 150.0,
startAngle: -Math.PI,
thickness: 'auto',
color: '#3aeabb',
fill: {
gradient: ['#00b1ff', '#00b1ff']
},
emptyFill: 'rgba(0, 0, 0, .1)',
animation: {
duration: 1200,
easing: 'circleProgressEasing'
},
animationStartValue: 0.0,
reverse: false,
lineCap: 'round',
}).on('circle-animation-progress', function(event, progress, stepValue) {
$(this).find('strong').text(String(<?php echo $xx; ?>));
}); |
Wenn ich das jetzt so ausführe, hängt sich der Browser vor Fehlern auf :/ _________________ "Wer keinen Sinn im Leben sieht, ist nicht nur unglücklich, sondern kaum lebensfähig" - Albert Einstein
|
|
Csharp-programmierer
Beiträge: 696
Erhaltene Danke: 10
Windows 8.1
C# (VS 2013)
|
Verfasst: Mo 06.02.17 18:30
Hat sich jetzt erledigt, habe den Fehler gefunden
_________________ "Wer keinen Sinn im Leben sieht, ist nicht nur unglücklich, sondern kaum lebensfähig" - Albert Einstein
|
|
|
