Puoi usare jQuery per dare ai visitatori del tuo sito la possibilità di ridimensionare il font del tuo sito. Questa è un’interfaccia utile per avere, dal momento che i visitatori possono ingrandire o ridurre la dimensione del carattere a loro piacimento, dando loro la migliore esperienza di lettura. Se non si ha familiarità con jQuery, controllare il nostro articolo jQuery Basics per una spiegazione di come funziona jQuery.
Questo è un display di codice interattivo che mostra HTML, CSS, jQuery e una demo dell’output.
Impostazione di HTML per il ridimensionamento
La prima cosa che devi fare è impostare il tuo HTML in modo che jQuery possa determinare cosa ridimensionare. Se non hai familiarità con l’equipaggiamento del tuo documento HTML per fare riferimento a jQuery, consulta il nostro articolo Come preparare il tuo HTML per jQuery.
Innanzitutto, è necessario aggiungere un’interfaccia di ridimensionamento. Non ti preoccupare, questo suona più complicato di quanto non sia in realtà. Questo è solo qualcosa con cui gli utenti del tuo sito Web possono interagire per ridimensionare il carattere della tua pagina web. Come puoi vedere nell’esempio sopra, abbiamo usato i collegamenti rappresentati come più, meno e la parola “ripristina.”
<a class="increase">+</a><a class="decrease">-</a><a class="reset">reset</a>
Ogni collegamento dovrebbe avere una classe che rappresenta l’azione, come “aumento” o “diminuzione.”Quando aggiungiamo il jQuery, useremo queste classi per indicare quale collegamento dovrebbe aumentare, diminuire o reimpostare la dimensione del carattere.
Ora, valuta quali elementi o sezioni vuoi essere ridimensionabili. Se si tratta di una sezione, è possibile creare un <div> con una classe in modo da poter specificare un’area univoca da ridimensionare.
Vedere la penna jQuery: Ridimensionamento pagina Web Esempio di classe di font da Pair Networks (@pairdocs) su CodePen.
Nell’esempio sopra, puoi vedere che il < div> con class=”resizable” è contrassegnato per essere ridimensionato. Tuttavia, il resto dei paragrafi non sarà influenzato, a meno che non si specifichi che tutti gli elementi <p> devono essere ridimensionati.
jQuery per il ridimensionamento
jQuery gestisce il sollevamento pesante del ridimensionamento. Se non si ha familiarità con jQuery, controllare il nostro articolo jQuery Basics per ottenere una comprensione dei concetti comuni.
Il primo passo è creare un document(documento).funzione pronta che racchiuderà tutte le tue istruzioni jQuery.
$(document).ready(function(){//jQuery statements//jQuery statements});
Successivamente, aggiungeremo la prima istruzione jQuery per accedere a questa funzione.
var resize = new Array('element','.class'); resize = resize.join(',');
Questa istruzione stabilisce quali elementi o classi devono essere inclusi nel ridimensionamento. Questi elementi / classi sono memorizzati nella variabile ” ridimensiona.”Se si guarda l’esempio di ridimensionamento dei caratteri, si vedrà che l’elemento < p > e la classe” ridimensionabile ” sono stati scelti per il ridimensionamento.
Dopo aver stabilito quali elementi o classi saranno interessati, è necessario impostare il codice per modificare effettivamente la dimensione del carattere quando un visitatore interagisce con l’interfaccia di ridimensionamento.
Ripristina la dimensione del carattere
Sotto la nostra istruzione “var resize”, aggiungeremo un’istruzione che ripristinerà il carattere alla sua dimensione originale.
var resetFont = $(resize).css('font-size'); $(".reset").click(function(){ $(resize).css('font-size', resetFont); });
Questa istruzione chiama gli elementi o le classi memorizzate nella variabile “ridimensiona” e, quando si fa clic sul collegamento con la classe “ripristina”, l’attributo font-size in CSS tornerà alla sua dimensione originale.
Il $(“.reset”).click (function () chiama la classe “reset” dall’HTML. Ciò consente a jQuery di reimpostare la dimensione del carattere quando l’utente interagisce con il testo associato alla classe “reset”. Nel nostro esempio, questo testo è semplicemente il link” reset”.
Aumenta la dimensione del carattere
Successivamente, dobbiamo aggiungere un’istruzione che aumenterà la dimensione del carattere. Nel nostro esempio, abbiamo aggiunto la classe” increase “al link”+”, quindi dobbiamo legare l’azione jQuery di aumentare la dimensione al”+”.
Questo esempio fa proprio questo.
//specifies that this will affect the "increase" class $(".increase").click(function(){//creates a variable that holds the current font size var originalFontSize = $(resize).css('font-size');//creates a variable that parses the number var originalFontNumber = parseFloat(originalFontSize, 10);//creates a variable that holds the increased font sizevar newFontSize = originalFontNumber*1.2;//changes the font-size in the CSS document $(resize).css('font-size', newFontSize); return false; });
L’esempio inizia stabilendo che questa istruzione dipende da un utente che fa clic sul testo associato alla classe “increase”. Questo è un ” + ” nel nostro esempio. Le tre righe successive aggiungono nuove variabili: originalFontSize, originalFontNumber e newFontSize.
originalFontSize raccoglie la dimensione del carattere corrente dal CSS e la memorizza. originaFontNumber analizza questo numero in modo che jQuery possa leggerlo. Quindi, newFontSize prende il numero memorizzato in originalFontNumber e lo moltiplica per 1.2.
Quindi, l’ultima riga entra nel CSS e cambia la dimensione del carattere in modo che corrisponda a newFontSize.
Questa sequenza verrà eseguita ogni volta che si fa clic su”+”.
Riduci la dimensione del carattere
L’istruzione Diminuisci è molto simile all’istruzione precedente. Tuttavia, invece di moltiplicare la dimensione del carattere per un numero che aumenterà il numero del carattere originale, l’istruzione decrease moltiplica il numero del carattere originale di un decimale, che lo riduce.
//specifies that this will affect the "decrease" class $(".decrease").click(function(){//creates a variable that holds the current font size var originalFontSize = $(resize).css('font-size');//creates a variable that parses the number var originalFontNumber = parseFloat(originalFontSize, 10);//creates a variable that holds the decreased font size var newFontSize = originalFontNumber*0.8;//changes the font-size in the CSS document $(resize).css('font-size', newFontSize); return false; });});
Questa sequenza verrà eseguita ogni volta che si fa clic su” -“. Ciò ridurrà la dimensione del carattere ad ogni clic.
jQuery è un software open-source permissivo sotto una licenza MIT. jQuery non è un prodotto di Pair Networks, Inc., e Reti di coppia non fornisce alcuna garanzia per jQuery. Si prega di notare che ci sono molti livelli di librerie javascript disponibili. Si prega di consultare il proprio professionista IT per consigli e indicazioni su una libreria appropriata. Questo prodotto specifico può o non può soddisfare le vostre esigenze. Coppia Reti, Inc. sta fornendo supporto per questo tutorial per la vostra convenienza e non è responsabile per le prestazioni di jQuery. Si prega di leggere attentamente i termini e l’ambito dei servizi per qualsiasi servizio o prodotto online che si sta valutando l’acquisto o l’utilizzo.
