JQuery Progress-Bar in Contao

Visualisierungen sind wichtig, um eine Webseite möglichst intuitiv und gleichzeitig ansehnlich zu gestalten. Animierte Balkendiagramme, auch progress-bars genannt, sind dabei eine gute Möglichkeit. Das folgende Tutorial erklärt, wie mit jquery animierte Progress-Bars in Contao eingebunden werden können. Die Grundlage dafür ist skillset.js.

Das Paket herunterladen, entpacken, im Backend hochladen.
Im Seitenlayout die .css sowie die skillset.css und skillset.js im <head>-Bereich einbinden, außerdem JQuery aktivieren:

<link rel="stylesheet" href="<Pfad>/skillset.css"> <script src="<Pfad>/skillset.js"></script>

1
2

<link rel="stylesheet" href="<Pfad>/skillset.css">
<script src="<Pfad>/skillset.js"></script>

Im <head>-Bereich fügen wir außerdem die Inhalte für unsere geplante progress-bar ein. Bei headline wird die Überschrift eingetragen, unter description findet sich der tooltip wieder. Mit length und value können Länge sowie Anzeigestand der Progressbar eingestellt werden.

<script type="text/javascript">

var object = [

{
'headline':'Überschrift',
'value':5,
'length':5,
'description':'Beschreibung'
},
{
'headline':'Überschrift',
'value':1,
'length':5,
'description':'Beschreibung'
},
{
'headline':'Überschrift',
'value':2,
'length':5,
'description':'Beschreibung'
}
];

$(document).ready(function(){

$("#skillset").skillset({

object:object,
duration:400

});

});

</script>

var object = [

{

'headline':'Überschrift',

'value':5,

'length':5,

'description':'Beschreibung'

{

'headline':'Überschrift',

'value':1,

'length':5,

'description':'Beschreibung'

{

'headline':'Überschrift',

'value':2,

'length':5,

'description':'Beschreibung'

}

];

$(document).ready(function(){

$("#skillset").skillset({

object:object,

duration:400

});

</script>

Als nächstes gehen wir in den Artikel, in dem die Progressbar zu sehen sein soll. Dort legen wir ein html-Element an und fügen folgenden Code ein:

<div class="section skills"> <div id="skillset" class="column"> </div> </div>

1
2
3

<div class="section skills">
<div id="skillset" class="column"> </div>
</div>
Die Farbe der Balken kann in der skillset.css angepasst werden, nämlich unter

.skillset-list li .bar .full

1

.skillset-list li .bar .full

Da ich außerdem Font-Awesome nutze, habe ich darauf verzichtet, den in skillset eingebundenen Fontello zu nutzen. Die Anpassung in der skillset.css ist wie folgt:

[class^="icon-"]:before, [class*=" icon-"]:before {
font-family: "FontAwesome";
font-style: normal;
font-weight: normal;
speak: none;
display: inline-block;
text-decoration: inherit;
/* For safety - reset parent styles, that can break glyph codes*/
font-variant: normal;
text-transform: none;
}
.icon-info-circled:before {
content: '\f059';
}

[class^="icon-"]:before, [class*=" icon-"]:before {

font-family: "FontAwesome";

font-style: normal;

font-weight: normal;

speak: none;

display: inline-block;

text-decoration: inherit;

/* For safety - reset parent styles, that can break glyph codes*/

font-variant: normal;

text-transform: none;

}

.icon-info-circled:before {

content: '\f059';

}

Fertig ist die Progress-Bar!

JQuery Progress-Bar in Contao

Jonathan

Schreibe einen Kommentar Antworten abbrechen