JS Tutorial
Download
Demo
- Overview
- Documents
User Rating: 3.4/5 ( 1 votes)
Your Rating:
Mambo is a jQuery plugin that let you easily create rounded badges using canvas.
You could use it for creating colorful badges with labels, display percentages or both. It was created because I wanted to avoid the mess of using images made ad-hoc for displaying "percentage badges" and as an excuse to start playing with canvas!
Source: valeriobarrila.com
1. INCLUDE JS FILES
<script src="js/jquery.min.js"></script> <script src="js/jquery.mambo.js"></script>
2. HTML
<canvas class="full-features" width="200" height="200">
3. JAVASCRIPT
$(".full-features").mambo({
percentage: 65,
label: "Cr",
displayValue: true,
labelColor: "#ccc",
circleColor: '#5965E5',
circleBorder: '#282D66',
ringStyle: "full",
ringBackground: "#999EDD",
ringColor: "#393F90",
drawShadow: true
});
4. OPTIONS
| Option | Type | Default | Description |
|---|---|---|---|
| percentage | float | 100 | The percentage represented by the badge. |
| image | string | none | If an image path is specified label will not be considered. The image will be scaled to the maximum size that fits the badge. |
| label | string | none | The label show in the badge; due to technical limitations the max length i 3 chars. If neither label and image are not set the badge will show the percentage. |
| labelColor | string | #FFF | Let you choose the text color. The color will be applied also to the value if showed. |
| displayValue | boolean | true | Indicates if the value should be displayed or not above the text. If the label is not specified the scripts automatically shows the value. |
| circleColor | float | #F2AC29 | The color used to fill the internal circle. |
| circleBorder | float | #FFF | The color used for the internal circle border. |
| ringStyle | string | percentage | If "percentage" the external ring will be drawn proportionally to the value of the percentage; e.g.: 100% will draw a full circle around the badge, 50% half a circle and so on. If "full" a complete ring is drawn, regardeless of the percentage value. |
| ringColor | string | #F2762E | The color used for the external ring. |
| ringBackground | string | #CCC | If you chose to draw a complete ring using ringstyle: "full", the remaining part of the circle will be filled with this color. |
| drawShadow | boolean | false | Draw a little shadow on the edge of the badge. |
5. EXAMPLES
Default
$(".default").mambo({
percentage: 65
});
Only label
$(".only-label").mambo({
percentage: 37,
label: "Lbl",
displayValue: false,
circleColor: '#C9D94E',
circleBorder: '#535920',
ringColor: "#8E9937"
});
Label & Value
$(".label-value").mambo({
percentage: 59,
label: "Lbl",
circleColor: '#9136C7',
ringColor: "#632587"
});
Percentage fill
$(".percentage-fill").mambo({
percentage: 43,
label: "Pf",
displayValue: true,
circleColor: '#7ACAD9',
ringStyle: "full",
ringColor: "#7ACAD9",
drawShadow: true
});
Image badge
$(".image-badge").mambo({
image: "/media/images/Gnome_Monkey.png",
circleColor: '#F2DEBB',
circleBorder: '#736959',
ringColor: "#A69880",
drawShadow: true
});
Color badge
$(".just-badge").mambo({
displayValue: false,
label: "",
circleColor: '#FD92A1',
circleBorder: '#FD5EBA',
ringColor: "#F2385A",
drawShadow: true
});
