Vai al contenuto
jQuery Italia
jQuery Italia

La community italiana di jQuery

  • IMPARA
    • Tutorials jQuery Italia
    • Tutorials dal web
    • Supporto ed Aiuto
  • CONTRIBUISCI
    • Nuovo Articolo
    • Nuovo Tutorial
  • SVILUPPA
    • Snippets
    • Tools
    • Download
    • Plugins
    • Links
  • FORUM
    • Reception
    • Supporto ed Aiuto
    • jQuery News
    • Non solo jQuery
  • NOTIZIE
    • jQuery
    • jQuery UI
    • Projects
  • CONTATTI
  • LOGIN

Mambo italiano per la creazione di badge

Pubblicato il 19 Marzo 201423 Giugno 2020 Categoria:
  • Plugins

Presentiamo oggi un plugin di uno sviluppatore italiano, Valerio Barrilà , plugin che nonostante sia nato quasi per gioco, è estremamente utile e di facile utilizzo.

Mambo (questo il suo nome) è un plugin per jQuery in licenza MIT che permette di creare facilmente badge rotondi utilizzando elementi canvas.

Badge circolari con jQuery Mambo

Può essere utilizzato per la creazione di badge colorati con etichette testuali, percentuali, immagini od entrambi.
L’autore sostiene di averlo creato per evitare il caos di utilizzare immagini realizzate ad-hoc per la visualizzazione di “badge percentuali” ma, soprattutto, come una scusa per iniziare a giocare con i canvas!

Il plugin deve essere configurato con alcune opzioni in formato JSON:

  • percentage:   la percentuale rappresentata nel badge
  • image: se un percorso immagine viene specificato l’opzione label non verrà presa in considerazione. L’immagine verrà automaticamente ridimensionata alla dimensione massima del badge, in modo da adattarla perfettamente allo stesso.
  • label: etichetta visualizzata nel badge. A causa di limitazioni tecniche la sua lunghezza massima è di 3 caratteri. Se non vengono impostate nè l’etichetta nè l’immagine, il badge mostrerà la percentuale.
  • labelColor: colore del testo. Tale coloro verrà applicato anche al valore se impostato.
  • displayValue:  indica se il valore deve essere visualizzata o meno sopra il testo. Se l’etichetta non viene specificata,  verrà mostrato automaticamente il valore.
  • circleColor: il colore utilizzato per il riempimento del badge.
  • circleBorder: il colore utilizzato per il bordo del badge.
  • ringStyle:  Se impostato a “percentage” l’anello esterno del badge viene disegnato in modo proporzionale al valore impostato nella percentuale; ad esempio 100 significa un cerchio completo intorno al badge, 50 mezzo cerchio e così via. Se impostato  a “full” viene generato un anello completo senza prendere in considerazione il valore percentuale.
  • ringColor: Il colore utilizzato per l’anello esterno.
  • ringBackground: Se si sceglie di disegnare un anello completo con l’opzione ringstyle: “full” la parte restante del cerchio sarà riempita con questo colore.
  • drawShadow: disegnare una piccola ombra sul bordo del badge.

Queste le future caratteristiche che lo sviluppatore ha in mente di implementare nel suo (poco) tempo libero:

  • animazione del badge al mouseEnter e mouseLeave eventi in modo che la barra percentuale venga ridisegnata utilizzando una funzione di easing.
  • inserimento di un’opzione che permetta di configurare la dimensione dell’anello esterno.
  • possibilità di inserire etichette con più di 3 caratteri e scelta del font

Il plugin funziona perfettamente con Firefox, Chrome, Safari, Opera ed IE10+ (personalmente testato).

Demo, caratteristiche e documentazione le trovate su http://www.valeriobarrila.com/mambo.html

0 Condivisioni
Share
Tweet
Share
Pin

Login

Accedi con Facebook
Accedi con Google
Accedi con Twitter
  • Registrati
  • Password dimenticata?

SOSTIENI jQuery Italia

Aiuta la Community di jQuery Italia a rimanere in vita per contribuire a diffondere le conoscenze di base ed avanzate di jQuery.

Download in evidenza

  • gmap104.html (3115 download)
  • jquery-1.4.1.min.js (2907 download)
  • tinytips11.html (2792 download)
  • jquery-ui-1.8rc1.zip (2780 download)
  • jqueryformwizard-201.html (2760 download)
  • 1.0.0.zip (2724 download)
  • jquery-1.4.2.min.js (2653 download)
  • calendarPicker.html (2651 download)
  • move-background.html (2621 download)
  • jquerytools120.html (2619 download)

jQuery Links

  • jQuery Howto
  • jQuery Official Site
  • jQuery UI Official Site
  • Learning jQuery
  • Use jQuery

SITO SEGNALATO SU

Sito segnalato da Freeonline.it - La guida alle risorse gratuite Mooseek.com - Web Directory, Download Software, Giochi Online, Video Tecnologici, Siti d'Affari

TAG

aggiornamento (3) ajax (5) Android (5) animazione (49) api (10) BlackBerry (4) calendario (3) canvas (4) css3 (9) form (12) framework (41) gallery (8) google (5) grafici (2) html5 (11) immagini (38) javascript (29) jQuery (160) jQuery UI (15) Linux Day (3) maps (3) menu (6) mobile (10) news (2) open source (4) overlay (3) plugin (93) Plugins (17) presentation cycle (4) projects (11) responsive (5) slider (7) slideshow (18) Smartphones (5) Tablets (4) template (5) testo (2) tooltip (6) tutorial (12) upload (3) utility (18) VELug (3) video (3) widget (3) zoom (3)
jQuery Italia

La community italiana di jQuery

  • Facebook
  • Twitter
  • Linkedin
  • Youtube
Tutti i loghi ed i marchi contenuti e citati in questo sito sono dei rispettivi propietari.
Privacy Policy
Cookies Policy
COPYRIGHT © 2010 - 2021 jQuery Italia
Designed By ZeeTheme