Share
Interfața utilizatorului JQuery poate adăuga atât de mult la o pagină Web. Există multe widgeturi diferite pe care UI le oferă. Una dintre primele stele care aleargă este glisorul. În acest tutorial, vă voi arăta cum să utilizați un cursor pentru a controla dimensiunea textului unui articol pe o pagină. Acest lucru permite utilizatorului să controleze exact dimensiunea care le convine și este, de asemenea, o caracteristică destul de impresionantă pe care o are pe un site!
Partea glisantă a acestui tutorial reproduce o tehnică inițial creată de Buck Wilson.
În final, vom dori ca pagina noastră să arate astfel:
Comportament:
Evident, avem nevoie de JQuery, dar de asemenea, vom avea nevoie de unele fișiere UI pentru a extinde JQuery. Putem obține un fișier UI care este personalizat pentru nevoile noastre la pagina JQuery UI Build Your Download.
După cum puteți vedea, există câteva efecte sonore foarte bune acolo! Așadar, așa cum este tentant, nu avem nevoie de toate aceste efecte pentru a obține produsul dorit. Tot ce ne trebuie este:
Pentru acest tutorial, nu voi pierde timpul explicând elementele de bază ale HTML și creând un aspect care să-l folosească și CSS. Dacă doriți să aflați mai multe despre acest lucru, există și alte tutoriale aici, cum ar fi tutorialul din panoul meu de sus sau conținutul tutorialului Collis 'Tabbed Content.
Nettuts Slider Dimensiunea textului
Dimensiunea curentă a fontului:Lorem Ipsum este pur și simplu un text fals al industriei de imprimare și de tipărire. Lorem Ipsum a fost textul standard al industriei de manechin încă din anii 1500, când o imprimantă necunoscută a luat o bucătărie de tip și a amestecat-o pentru a face o carte tip specimen. Ea a supraviețuit nu numai cinci secole, ci și saltul în tipărirea electronică, rămânând în esență neschimbată. A fost popularizată în anii 1960, odată cu lansarea foilor Letraset care conțineau pasajele Lorem Ipsum și, mai recent, cu software-ul pentru publicații desktop precum Aldus PageMaker, inclusiv versiunile lui Lorem Ipsum.
Deci veți observa câteva lucruri:
NOTĂ: Pentru ca cursorul să funcționeze, trebuie să avem o bară și un mâner.
Iată CSS pentru a face ca pagina să arate puțin mai bine. Această pagină este destul de simplă și, prin urmare, CSS este destul de simplă:
corp fundal: # 373737; text-align: centru; margine: 0px; #header width: 700px; înălțime: 200px; fundal: # 48887d url (imagini / header.jpg); margin-stânga: auto; margin-dreapta: auto; poziție: relativă; .slider_container poziție: absolută; înălțime: 25px; top: 170px; stânga: 165px; . minus background: url (imagini / minus-trans.png) nr-repeta; înălțime: 9px; lățime: 25px; overflow: ascuns; plutește la stânga; cursor: pointer; .slider_bar fundal: url (images / bar-trans.png) no-repeat; înălțime: 9px; lățime: 316px; plutește la stânga; margine: 0px 5px; poziție: relativă; .add background: url (imagini / add-trans.png) nr-repeta; înălțime: 25px; lățime: 23px; plutește la stânga; poziție: relativă; top: -5px; cursor: pointer; .slider_handle fundal: url (imagini / selector-trans.png) no-repeat; înălțime: 25px; lățime: 12px; poziția: absolută; top: -8px; #slider_caption fundal: url (images / caption-trans.png) no-repeat; înălțime: 45px; lățime: 38px; overflow: ascuns; poziția: absolută; top: -50px; margin-left: -10px; umplutură: 5px 0px 0px 0px; font-family: "Myriad Pro"; culoare: # 36665d; font-weight: bold; text-align: centru; #text font-family: Helvetica, Arial, sans-serif; lățime: 655px; fundal: # f9f9f9; margin-stânga: auto; margin-dreapta: auto; zăpadă: 20px 20px 20px 25px; poziție: relativă; #text p font-size: 12px; text-aliniere: stânga; culoarea neagra; #text h1 text-aliniere: stânga; margin-stânga: 20px; p font-family: Arial, Helvetica, sans-serif; culoare: # CCCCCC; #font_indicator poziție: absolută; dreapta: 100px; top: 50px; font-size: 10px; afișare: niciunul;
Din nou, nu voi intra în detaliu cu CSS. Dacă aveți nevoie de mai mult ajutor în acest sens, asigurați-vă că ați verificat cele două tutoriale pe care le-am menționat mai sus. Dacă aveți întrebări, asigurați-vă că vă anunțați în comentarii.
Observați că toate imaginile PNG care au transparență alfa au sfârșitul -trans.png.
Când am învățat mai întâi despre efectul de cursor, l-am făcut să cerceteze ceva mai mult și cum funcționează. Ei bine, am avut norocul să găsesc acest screencast uimitor. A avut un efect foarte curat; o legendă care părea să afișeze poziția cursorului, în partea de sus a cursorului. Din păcate, s-au oprit acolo. Vom folosi o variantă a codului JQuery ca punct de plecare:
Accentsconagua
$ ('slider_caption'). () slider_caption '), captionVisible = false; $ (' slider_bar '). : 100, start: funcția (e, ui) $ ('# slider_caption') fadeIn (' captionVisible == false) $ ('# slider_caption') .css ('left', ui.handle.css (fontSize: ui.value * 15/100 + 8) (textul de la stânga)) text (Math.round (ui.value * 15/100 + 8) ) fadeOut ('fast', function () captionVisible = false;); slide: functie (e, ui) $ (' css ('left', ui.handle.css ('stânga')) text (Math.round (ui.value * 15/100 + 8)); $ ("div # text p"). css (fontSize: ui.value * 15/100 + 8) fadeIn ("lent");); Unele idei cheie:
$ (('slider_caption'). () slider_caption '), hârtie (var. : FadeIn ('fast', function () calloutVisible = true;); $ ('# font_indicator') fadeIn (' );, stop: functie (e, ui) if (calloutVisible == false) $ (' font_indicator ') fadeIn (' lent '); $ (' # slider_caption ') css (' left ', ui.handle.css +)); $ ('# Font_indicator b'); text (Math.round (ui.value * 15/100 + 8)); $ ("div # text p") animate (fontSize: ui.value * FadeOut ('fast', function () calloutVisible = false;); $ ('# font_indicator'). fadeOut ('lent');, slide: funcția (e, ui) $ ('# slider_caption') css ('left', ui.handle.css ui.value * 15/100 + 8)); $ ('# font_indicator b') text (Math.round (ui. valoare * 15/100 + 8)); $ (div "text p") css (fontSize: ui.value * 15/100 + 8) fadeIn ("lent"); );
Idei cheie despre #font_indicator
Acest lucru nu ar fi un design funcțional, dacă nu am da semnele plus și minus acțiuni la clic. Acest cod ar putea fi un pic neglijent și nu este perfect eficient, dar își face treaba. Acest proiect a necesitat o sumă surprinzătoare de matematică, ceea ce explică unele dintre numerele nebunești care ajung să fie folosite.
Fără alte cuvinte, iată restul javascript-ului, o să explic mai târziu:
$ ('. add') faceți clic pe (funcția () var actualFontSize = $ ('# text p'). 1; dacă (newFontSize < 24) $('#text p').css('font-size', newFontSize); $('#slider_caption').css('left', newFontSize*19.75 - 158).fadeIn('fast').text(Math.round(newFontSize )).fadeOut(); $('.slider_handle').css('left', newFontSize*19.75 - 158); $('#font_indicator').fadeIn('slow'); $('#font_indicator b').text(Math.round(newFontSize )); $('#font_indicator').fadeOut('slow'); else $('#font_indicator').fadeIn('slow'); $('#font_indicator b').text("Isn't 23 big enough?"); $('#font_indicator').fadeOut('slow'); return false; ); $(".minus").click(function() var currentFontSize = $('#text p').css('font-size'); var currentFontSizeNum = parseFloat(currentFontSize, 10); var newFontSize = currentFontSizeNum-1; if (newFontSize > 8) $ ('# text p'). Css ('font-size', newFontSize); $ ('# slider_caption') .css ('stânga', newFontSize * 19.75 - 158) .fadeIn ('rapid') text (Math.round (newFontSize)). $ ('. slider_handle'). css ('left', newFontSize * 19.75 - 158); $ ( '# Font_indicator') fadeIn ( 'lent').; $ ('# font_indicator b'). text (Math.round (newFontSize)); $ ( '# Font_indicator') fadeOut ( 'lent').; altfel $ ('# font_indicator') fadeIn ('slow'); $ ('# font_indicator b'). text ("Nu este suficient de mic?"); $ ( '# Font_indicator') fadeOut ( 'lent').; return false; ); Unele note cheie:
Math Time
Ajustarea mânerului și a legendei pentru a reacționa la clicurile plus și minus a fost o adevărată provocare. Ceea ce am terminat, a fost imaginarea lățimii barei (316 pixeli) și împărțirea acesteia între cele 16 dimensiuni posibile (8-23) pentru a afla cât spațiu a ocupat fiecare increment.
316/16 =
Pentru a fi în siguranță, trebuie să-mi dau seama de locul inițial pentru dimensiunea fontului. Știam că acest lucru nu a fost exact 12, pentru că l-am modificat ușor cu 15/100 + 8. Așa că am luat valoarea de pornire a mânerului (26) și l-am înmulțit cu aceasta:
26 * 15/100 + 8 =
Mi-am dat seama că, din moment ce era rotunjită, oricum ar fi fost doisprezece.
Așa că m-am gândit că mânerul va fi [dimensiunea fontului * 19.75 - 158 (Primele 8 dimensiuni)] px.
Doar m-am gândit că vă voi da o privire în matematica mea ciudată și complicată;). Probabil că sunt mult mai ușor de făcut, dar cred că aceasta este logica mea.
Pentru tratarea cookie-urilor am folosit plugin-ul excelent de cookie al lui Klaus Hartl. Puteți vedea sintaxa de bază a pluginului în linkul pe care l-am furnizat. Provocarea a fost găsirea unui loc care să stabilească în mod fiabil cookie-ul. Am terminat setarea când browserul revigorează sau modifică pagina. În acest fel, o face doar atunci când este necesar și realist. Mai întâi adăugăm codul în partea de sus a fișierului javascript pentru a citi fișierul cookie:
var startSize = $ .cookie ('fontSize'); var startSize = parseFloat (startSize, 12); $ ('# text p') .css ('font-size', startSize); După cum am menționat mai sus, trebuie să setăm cookie-ul când pagina este iesită. Facem acest lucru folosind următorul cod:
window.onbeforeunload = leaveCookie; funcția leaveCookie () var FontSize = $ ('# text p') css ('font-size'); var IntFontSize = ParseFloat (FontSize, 10); $ .cookie ('fontSize', IntFontSize); Ce am facut:
Sper că ați găsit acest tutorial util! Vă rog să-mi scuzați logica de programare, nu cred întotdeauna atât de eficient: P. Dacă aveți întrebări sau comentarii, vă rugăm să spuneți-mi în comentariile!
