Blocuri universale jQuery-script cu file (file)

intrare

Deoarece ultimii 2 ani, am adunat ceva experiență în lucrul cu jQuery, și script-ul de mai sus sa transformat într-un complet nou scenariu. Am scris complet de la zero. Înainte de aceasta, a existat o altă versiune a scenariului, pe care am folosit, probabil, un an. Despre el nu am scris, iar acum nu are sens să o facă, pentru că a pierdut relevanța.

De ce eu numesc un nou script pentru jQuery-tab-uri universale:

  • vă permite să creați un număr nelimitat de file într-o singură unitate, fără a fi nevoie pentru a enumera filele folosind CSS-clase, așa cum sa făcut în versiunea veche;
  • Puteți crea orice număr de astfel de blocuri cu filele din nou, fără a fi nevoie pentru a enumera aceste blocuri prin CSS-clase;
  • conținutul jQuery-script. implementează fila rămâne neschimbat (total 0,3 Kbytes), adică Nu crește în funcție de numărul de blocuri sau file, așa cum a fost în versiunea veche, noua versiune a dimensiunii script-ul nu mai mult decât dimensiunea de script-ul pentru o unitate cu urechile de versiunea veche.

Ei bine, uscat suficient, trecerea la punctul.

blocuri de cod jQuery-script pentru comutarea cu filele

Nu uitați să conectați mai întâi cadrul jQuery în sine (în cazul în care nu este conectat la site-ul dvs.), de exemplu, după cum urmează (inserat între etichetele și ):

Eu prefer „să ia“ acestuia de la Google, pentru că, în primul rând. este probabil ca vizitatorul, care va merge la site-ul, jQuery este deja în cache în browser-ul (ceea ce înseamnă încărcare mai rapidă), și pe de altă parte. accelera serverele Google stabil și rapid, al treilea. Google îl trimite într-o formă comprimată (gzip), și, de exemplu, versiunea 1.4.2 dimensiunea este de numai 24 de kilobytes, în comparație cu fișierul necomprimat (70 KB).

Aici la mine o astfel script-ul:

HTML-cod pentru a folosi script-

Rețineți că structura HTML-cod este strict legat de script-ul, așa că, dacă doriți să schimbați numele utilizat de clasele, nu uitați să le schimbe în scenariu.

Necesare CSS-stiluri pentru codul HTML de mai sus

Dacă, de exemplu, impune ca în mod implicit, a doua unitate, atunci ai nevoie pentru a muta clasa .active doua div.tabs__content unitate. și pentru a muta clasa .active în al doilea element din lista de file.

  • Primul exemplu.
  • Doilea exemplu. în care urechea activă stocată după reîncărcarea paginii (folosind cookie).
  • Al treilea exemplu. în care urechea activă stocată după reîncărcarea paginii (folosind localStorage, mai mică decât codul cookie).
  • Patrulea exemplu. care, atunci când faceți clic pe link-ul cu ancora, indicând numărul de fila, activați fila corespunzătoare.

P.S. Am tweeted o dată a spus că am fost „reinventeze roata“, că acest script este deja în jQuery UI. Așa că lăsați-l să fie, să am „inventat roata“, principalul lucru este că am mare placere de la proces și, în același timp îmbunătăți experiența lor în jQuery. E așa de rău? =)

de dezvoltare necesită un catalog tipărit de produse sau servicii? Creați un director în studio „Verstaem.ru“ este cea mai bună soluție!

Am implementat codul, Dimox, pe site-ul său, cu câteva modificări. Întreaga captură este că trebuie să fie toate div.box obtyanut un alt div și să definească o înălțime fixă ​​pentru el!

Deoarece conținutul pe care l Tabakh pe site-ul este în continuă schimbare, conectat mecanism Math.max.apply de calcul înălțimea maximă posibilă a .box Diva încorporat. Înălțimea și diva externă ..

Pentru a efectua aspectul utilizat în loc de spectacol () anima () cu opțiuni clare:

Și de fapt HTML:

verificate în IE7> și browsere normale - pare a fi de lucru.

în schimb:
$ ( 'Ul.tabs') delegat ( 'li: nu (.current)', termenul 'clic', funcția ().

Locul:
$ ( 'Ul.tabs li: nu (.current)') trăiesc ( 'clic', funcția ().

Problema primul membru care comunică în mod corespunzător evenimentele prin metoda delegat la numărarea prin ajax de încărcare cu tab-uri. A doua versiune funcționează bine + 1 timp facem o probă, în loc de 2

Pagina de sărituri problemă atunci când comutați filele în faptul că, la momentul de comutare prima ascunde conținutul tuturor filele, și apoi afișează conținutul filei active. La un moment în care conținutul tuturor filele ascunse - conținut de pe pagină devin mai mici și browser-ul pagina se derulează în sus. Când apare o nouă filă - pentru a derula rămâne pe aceeași pagină.

Solutia - nu pentru a ascunde toate filele, dar numai inutile: