Dodavanje jQuery biblioteka čini stranicu mnogo atraktivnijom i poboljšava upotrebljivost.

Drupal 7 trenutno uključuje popularnu jQuery UI biblioteku unaprijed

U ovom primeru ću vam pokazati kako možete koristiti JQuery da dobijete tabove-kartice na redovnoj stranici sajta bez povezivanja dodatnih modula, filtera, itd.

Tabovi će izgledati otprilike ovako, kliknite na sliku da odete na demo stranicu:

Prvo, u tipu sadržaja, omogućite PHP filter da omogući PHP obrađivač koda u tekstu na stranici. Zatim učitajte JQuery biblioteke koristeći PHP:

1 2 3

Sada dodajte JQuery kartice koje će sadržavati JQuery UI. Da izvršite JavaScript, koristite funkciju drupal_add_js():

1 2 3 4 5 6

Sada kreirajmo tabove u HTML-u. U ovom primjeru, napravit ću tri kartice, svaka sa tekstom i slikom, i jedinstvenim naslovom.

Prvo, hajde da definišemo tri kartice (ovaj isečak koda sadrži otvoreni div, zatvoriće se u nastavku koda):

1 2 3 4 5 6
  • Originalni histogram
  • Ispravljen histogram
  • Spremna slika

Sada popunimo tabove sadržajem, svaki od njih će biti u zasebnom kontejneru div sa istim ID-om kao gore u hiperlinkovima (ovde je div otvoren u prvom fragmentu zatvoren).

1 2 3 4 5 6 7 8 9 10 11 12 13
Tekst, tekst, tekst.Tekst, tekst, tekst.Tekst, tekst, tekst.

A evo punog koda:

PHP kod za postavljanje na vrh stranice:

1 2 3 4

HTML kod sa tabovima i korisnim tekstom koji se postavlja na pravo mjesto na stranici:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
  • Originalni histogram
  • Ispravljen histogram
  • Spremna slika
Tekst, tekst, tekst.Tekst, tekst, tekst.Tekst, tekst, tekst.

Koristio sam ove kartice za kreiranje minijaturnih foto galerija, uklonio ono što sam mislio da su neprikladne ivice i pozadinu iz zadanih stilova kartica i zalijepio naslove kartica na sliku.Uklonio sam pozadinu i obrub tako što sam CSS stil postavio na glavni div, a da bih tabove zalijepio na gornju ivicu fotografije, stavio sam listu s nabrajanjem sa hiperlinkovima u div za koji sam postavio odgovarajuće stilove, konkretno negativnu vrijednost na dnu margine. Na demo stranici možete vidjeti i primjer galerije fotografija, a primjer praktične upotrebe u članku "Kako koristiti krivulje (Krive) u Photoshopu" .

Kategorija: