Shout plugin jQuery: crea il tuo urlo box

Il plugin Shout per jQuery trasforma un campo <input> in un “urlo box”, mostrandone il testo alla massima dimensione orizzontale possibile.

Scarica il plugin qui: Shout per jQuery, versione 1.0 con documentazione

Live demo

Prova il plugin Shout qui.

Comportamento

Questo plugin trasforma un elemento <input> in un “urlo box”,  mostrando il testo contenuto alla massima dimensione possibile su una singola riga orizzontale.

Puoi usare il plugin a questo scopo “così com’è” (senza specificare o modificare alcun parametro), se l’elemento DOM contenente il testo ha un attributo “id” con un valore unico.

Ecco un esempio di un elemento <input> che segue questa convenzione:

<input type="text" id="shout">

Seguendo questo esempio, puoi attivare il plugin con questo semplice setup:

<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="/jquery.shout-1.0.min.js"></script>
<script>
  $(document).ready(function() {
    $("#shout").shout();
  });
</script>

Impostazioni del Plugin Shout per jQuery

Come la maggior parte dei plugin per jQuery, anche Shout ha delle impostazioni per modificarne il comportamento. Puoi usarle in due modi:

1. Creare un oggetto JavaScript e passarlo al costruttore del plugin (in questo caso le proprietà saranno applicate solo all’oggetto creato):

<script>
var settings = {zoomRatio:1.5, unaffectedLetters:6};
$("#shout").shout(settings);
</script>

2. Modificare individualmente le varie proprietà di default del plugin (in questo caso l’impostazione sarà valida per tutte le chiamate successive):

<script>
$.fn.shout.defaults.zoomRatio = 1.5;
$.fn.shout.defaults.unaffectedLetters = 4;
$("#shout").shout();
</script>

Ecco l’elenco di tutte le impostazioni e una guida all’utilizzo:

zoomRatio

• Valori possibili: ogni numero intero > 0
• Valore default : 1.7
• Il moltiplicatore di zoom applicato al testo.
• Il valore del parametro dovrebbe essere scelto tra 1.0 e 3.0.

unaffectedLetters

• Valori possibili: ogni numero intero > 0
• Valore default: 5
• Il numero di lettere non considerate dal moltiplicatore zoomRatio. Questo parametro ha lo scopo di limitare la dimensione eccessiva delle prime lettere digitate.
• Il valore del parametro dovrebbe essere scelto tra 1 e 30.

Funzioni pubbliche del plugin jQuery Shout

Il plugin contiene anche una funzione pubblica, che può essere chiamata individualmente:

textResize(), coi seguenti parametri:

• target: a jQuery object representing the <input> field
• zoomRatio: an integer, typical values are from 1.0 to 3.0, default value is 1.7
• unaffectedLetters: an integer, typical values are from 1 to 30, default value is 5

Puoi usare la funzione nel tuo codice JavaScript in questo modo:

<script>
$.fn.shout.textResize($("#shout"), 1.5, 5);
</script>

Puoi anche usarla come un callback, ad esempio per reagire alle modifiche di dimensione della finestra del browser:

<script>
$(window).resize(function () {
    $.fn.shout.textResize($("#shout"), 1.8, 5);
});
</script>