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

Italians do it better: i plugins degli utenti jQuery Italia

Pubblicato il 8 Novembre 201223 Giugno 2020 Categoria:
  • Plugins

Anche se con colpevole ritardo, voglio segnalare alcuni plugin realizzati e prontamente segnalati dai alcuni lettori di jQuery Italia.

Il primo, MediaTable, è di Marco Pegoraro che ha abilmente trasformato in plugin un articolo di FilamentGroup riguardante l’usabilità di una tabella su schermi di piccole dimensioni. Si tratta quindi di un plugin utilizzabile in un contesto di responsive design.

Mediatable richiede solamente la corretta definizione di una tabella html (definita quindi con i tag THEAD e TBODY) con le colonne di intestazione raggruppate (per classe) in base alla priorità di visualizzazione.
Basterà quindi inizializzare il plugin nella seguente maniera:

$('.mediaTable').mediaTable();

per consentire la selezione dei campi ed il comportamento “responsive” rispetto alle dimensioni dello schermo di tutte le tabelle definite con classe “mediaTable”.

Il plugin, come dichiarato dallo stesso autore, è compatibile con tutti i principali browser e di libera distribuzione.
Potete trovare la documentazione, con relativa demo e link per il download alla pagina http://www.consulenza-web.com/2012/01/mediatable-jquery-plugin/.


Il secondo plugin mi è stato inviato dall’amico ed ex-collega Luca Mattiuzzo.
Si tratta di hideValueOnFocus, un piccolo plugin che permette di nascondere il valore definito in un campo di testo (quindi essenzialmente nei campi input di un form) quando l’utente clicca su di esso, ripristinandone il valore se l’utente non inserisce nulla.

L’utilizzo è molto semplice e consiste nel definire il campo di testo:

<input type="text" name="email" value="insert your email here" />

ed inizializzare il plugin nel seguente modo:

$( function() {
        $( '#myForm input[type=text]' ).hideValueonFocus();
 });

Essendo il plugin estremamente piccolo ve lo fornisco di seguito.

/**
 * hideValueOnFocus plugin
 *
 * hides the value of a text field if the user clicks on it.
 * restores the value on blur, if the user didn't write in it.
 *
 * Version 1.0
 * Updated 11/06/2012
 *
 * Copyright (c) 2012 Luca Mattiuzzo (stanza27.com)
 *
 * Usage example:
 * HTML: <input type="text" name="email" value="insert your email here" />
 * JS: $(document).ready(function(){ $('#myForm input[type=text]').hideValueonFocus(); });
 *
 */
(function($) {
 $.fn.hideValueonFocus = function() {
 this.each(function() {
// store the devault value in each field
 $(this).data('default_value', $(this).val());
$(this).bind('click focusin focus', function() {
 // empty the field when the user writes in it for the first time
 if ($(this).val() == $(this).data('default_value')) {
 $(this).val('');
 }
 })
 .blur(function(){
 // display the default value if the user deletes the inserted value
 if ($(this).val() == '') {
 $(this).val($(this).data('default_value'));
 }
 });
 });
return this;
 }
 })(jQuery);

La terza ed ultima segnalazione riguarda, più che un plugin, una estensione dell’elegante, intuitivo e potente framework front-end che va sotto il nome di Twitter Bootstrap.
Mattia Larentis (questo il nome dell’autore dell’estensione) ha infatti realizzato Bootstrap Toggle Buttons (arrivato alla versione 2.8) che rende appunto disponibili per Twitter Bootstrap gli switch.
Non mi dilungo più di tanto nelle spiegazioni in quanto, per capire di cosa stiamo parlando è sufficiente andare alla pagina del progetto ( http://www.bootstrap-switch.org/ ).
L’estensione è comunque disponibile per il download su GitHub.

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 (3588 download)
  • jqueryformwizard-201.html (3217 download)
  • jquery-1.4.1.min.js (3138 download)
  • tinytips11.html (3123 download)
  • jquery-ui-1.8rc1.zip (2988 download)
  • jquerytools120.html (2917 download)
  • jquery-1.4.2.min.js (2903 download)
  • calendarPicker.html (2891 download)
  • 1.0.0.zip (2884 download)
  • move-background.html (2853 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) html5 (11) immagini (38) javascript (29) jQuery (160) jQuery UI (15) Linux Day (3) maps (3) menu (6) mobile (10) modalbox (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) tooltip (6) tutorial (12) twitter (2) upload (3) utility (18) VELug (3) video (3) widget (3) WYSIWYG (2) 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 - 2022 jQuery Italia
Designed By ZeeTheme
Posting....