Cum se utilizează jQuery Pentru a permite vizitatorilor să redimensioneze fontul Site-ului dvs.

puteți utiliza jQuery pentru a oferi vizitatorilor site-ului dvs. posibilitatea de a redimensiona fontul site-ului dvs. Aceasta este o interfață utilă, deoarece vizitatorii dvs. pot mări sau reduce dimensiunea fontului în timpul liber, oferindu-le cea mai bună experiență de citire. Dacă nu sunteți familiarizați cu jQuery, consultați articolul nostru Jquery Basics pentru o explicație a modului în care funcționează jQuery.

acesta este un afișaj Cod interactiv care vă arată HTML, CSS, jQuery, și un demo de ieșire.

Configurarea HTML pentru redimensionarea

primul lucru pe care trebuie să-l faceți este să vă configurați HTML-ul, astfel încât jQuery-ul să poată determina ce să redimensionați. Dacă nu sunteți familiarizați cu echiparea documentului HTML pentru a face referire la jQuery,consultați articolul nostru Getting your HTML Ready for jQuery.

în primul rând, trebuie să adăugați o interfață de redimensionare. Nu vă faceți griji, acest lucru sună mai complicat decât este de fapt. Acesta este doar ceva cu care utilizatorii site-ului dvs. web pot interacționa pentru a redimensiona fontul paginii web. După cum puteți vedea în exemplul de mai sus, am folosit link-uri care au fost reprezentate ca plus, minus și cuvântul „Resetare.”

<a class="increase">+</a><a class="decrease">-</a><a class="reset">reset</a>

fiecare legătură ar trebui să aibă o clasă care reprezintă acțiunea, cum ar fi „creștere” sau „scădere”.”Când adăugăm jQuery, vom folosi aceste clase pentru a indica ce legătură ar trebui să crească, să scadă sau să reseteze dimensiunea fontului.

acum, evaluați ce elemente sau secțiuni doriți să fie redimensionabile. Dacă este o secțiune, poate doriți să creați un< div > cu o clasă, astfel încât să puteți specifica o zonă unică de redimensionat.

a se vedea Pen Jquery: Redimensionarea pagina Web Font exemplu de clasă de rețele pereche (@pairdocs) pe CodePen.

în exemplul de mai sus, puteți vedea că < div> cu class=”resizable” este marcat pentru a fi redimensionat. Cu toate acestea, restul paragrafelor dvs. nu vor fi afectate, cu excepția cazului în care specificați că toate elementele <p> ar trebui, de asemenea, redimensionate.

jQuery pentru redimensionarea

jQuery se ocupă de ridicarea grele de redimensionare. Dacă nu sunteți familiarizați cu jQuery, consultați articolul nostru Jquery Basics pentru a înțelege conceptele comune.

primul pas este crearea unui $(document).funcție gata care va încadra toate declarațiile jQuery.

$(document).ready(function(){//jQuery statements//jQuery statements});

apoi, vom adăuga prima declarație jQuery pentru a merge în cadrul acestei funcții.

var resize = new Array('element','.class'); resize = resize.join(',');

această declarație stabilește ce elemente sau clase ar trebui incluse în redimensionare. Aceste elemente / clase sunt stocate în variabila ” redimensionare.”Dacă vă uitați la exemplul de redimensionare a fontului, veți vedea că elementul <p> și clasa „redimensionabilă” au fost alese pentru redimensionare.

după stabilirea elementelor sau claselor care vor fi afectate, trebuie să configurați codul pentru a modifica dimensiunea fontului atunci când un vizitator interacționează cu interfața dvs. de redimensionare.

resetați dimensiunea fontului

sub declarația noastră „var resize”, vom adăuga o declarație care va reseta fontul la dimensiunea sa originală.

 var resetFont = $(resize).css('font-size'); $(".reset").click(function(){ $(resize).css('font-size', resetFont); });

această instrucțiune apelează elementele sau clasele pe care le-ați stocat în variabila „redimensionare” și, când se face clic pe linkul cu clasa „Resetare”, atributul font-size din CSS va reveni la dimensiunea inițială.

$(„.reset”).faceți clic pe (funcția () apelează clasa „resetare” din HTML. Acest lucru permite jQuery pentru a reseta dimensiunea fontului atunci când utilizatorul interacționează cu textul asociat cu clasa „reset”. În exemplul nostru, acest text este pur și simplu linkul „Resetare”.

măriți dimensiunea fontului

în continuare, trebuie să adăugăm o declarație care va crește dimensiunea fontului. În exemplul nostru, am adăugat clasa „creștere” la linkul”+”, deci trebuie să legăm acțiunea jQuery de creștere a dimensiunii la”+”.

acest exemplu face exact asta.

//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; });

exemplul începe prin a stabili că această instrucțiune depinde de un utilizator care face clic pe textul asociat clasei „creștere”. Acesta este un „+” în exemplul nostru. Următoarele trei linii adaugă noi variabile: originalFontSize, originalFontNumber și newFontSize.

originalFontSize colectează dimensiunea curentă a fontului din CSS și o stochează. originaFontNumber analizează acest număr, astfel încât jQuery poate citi. Apoi, newFontSize ia numărul stocat în originalFontNumber și îl înmulțește cu 1.2.

apoi, ultima linie merge în CSS și modifică dimensiunea fontului pentru a se potrivi newFontSize.

această secvență se va executa de fiecare dată când se face clic pe”+”.

reduceți dimensiunea fontului

instrucțiunea scădere este foarte similară cu declarația anterioară. Cu toate acestea, în loc să înmulțească dimensiunea fontului cu un număr care va crește numărul fontului original, instrucțiunea scădere înmulțește numărul fontului original cu o zecimală, ceea ce îl reduce.

//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; });});

această secvență se va executa de fiecare dată când se face clic pe” -„. Acest lucru va reduce dimensiunea fontului cu fiecare clic.