Plugin jQuery jQMeter: barra di avanzamento animata
Oggi nella puntata dedicata alle Risorse Utili e a jQuery, andiamo a scoprire il plugin jQMeter. Grazie a questo plugin jQuery, potete realizzare una barra di avanzamenteo animato. Il plugin jQMeter pesa all’incirca 3kb ed è in grado di supportare un layut orizzontale oppure verticale. jQMeter è distribuito stto la licenza MIT/GPL ed è compatibile con Chrome/Chromium, Firefox, Opera, Safari e con tutte le versione di Internet Explorer dalla 7 in su.
Come utilizza e si installa il plugin jQMeter:
1. Scaricare e poi includere la libreria jQuery 1.11.2 e il plugin jQuery jQMeter. Il codice sottostante lo potete inserire alla fine della vostra pagina web.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="jqmeter.min.js"></script>
2. Adesso dovete creare un elemento che avrà lo scopo di contenitore per l’indicatore di avanzamento. Il tutto lo potete realizzare con questo codice:
<div id="demo"></div>
3. Adesso andiamo a richiamare il plugin e configurare la barra di avanzamento utilizzando gli oggetti di opzione JS. Questo passaggio lo potete svolgere grazie a questo codice:
</pre>
<pre>$('#demo').jQMeter({
goal:'$10,000',
raised:'$6,600',
width:'300px'
});
4. Queste sono tutte le opzioni presenti di default:
$('#demo').jQMeter({
// the width of the progress meter
width: "100%",
// the height of the progress meter
height: "50px",
// the background color
// Supports hex, rgba, or word values
bgColor: "#444",
// the text color
// supports hex, rgba, or word values.
barColor: "#bfd255",
// horizontal or vertical
orientation: "horizontal",
// animation time in milliseconds.
animationSpeed: 2000,
// whether to display the percentage completed or raised.
displayTotal: true
});
Ecco adesso, se tutto è andato come si deve, dovreste ricevere questo risultato: DEMO.
Se considerate che il plugin jQuery jQMeter, è proprio la risorsa che stavate cercando e se pensate che sia molto semplice da configurare con il vostro progetto, non ci resta altro da fare che segnalarvi il link da dove scaricare questo plugin.
Download plugin jQuery jQMeter
Conclusione
Per il momento questo è tutto, continuate a seguirci per altri consigli utili dal mondo jQuery. Vi diamo appuntamento alla prossima puntata dedicata alle Risorse Utili.
Seguiteci anche su Facebook, Tumblr, Twitter e Telegram, per restare sempre in contatto con noi e con le nostre guide.
Blogger e Sviluppatore, appassionato sin da piccolo dell’informatica e di tutta la tecnologia.
