ugrás a tartalomhoz

jQuery navigáció rel paraméterrel

marosics · 2010. Jún. 8. (K), 12.37
Sziasztok!

Néhány napja kezdtem el ismerkedni a jQuery-vel az effekteken túl, és egy aktuális projectem "termékek" oldalára szeretnék írni egy egyszerű navigációt. A lényeg, hogy egy #left divben vannak a linkek, amiknek rel="valami" módon adom meg, hogy melyik oldalra mutatnak. Azt szeretném megoldani, hogy a #right divbe betöltődjön a tartalom frissítés nélkül. Favágó módon már megoldottam a dolgot (minden linknek külön class, és display:none/block a contentre), de mivel sok termékről van szó, szeretném sokkal kevesebb kóddal, automazitálva letudni a dolgot.

Azt már kinyomoztam, hogy az attr() függvény lesz a barátom ebben, amivel kiszedem a linkekből a "rel" paramétert, és a #right divben az ezzel megegyező nevű fájl töltődik be, de a konkrét megvalósításnál előjöttek az alapvető programozási hiányosságaim, és elakadtam.

Minden ötletet és útmutatást megköszönök!

Üdv,
Csabi
‹ LI vízszintes listaelemben egy sorba... Szellem DIV ›
 ■
1

Kód

Poetro · 2010. Jún. 8. (K), 12.57
Hol akadtál el, meddig jutottál? Meg tudod mutatni meddig jutottál? Azt mondjuk elárulhatnád hogy miért a rel attribútumban van a hivatkozás és miért nem a href-ben.
De kb így nézne ki:
$('#left a').click(function () {
  $('#right').load(this.rel);
});
2

selected

marosics · 2010. Jún. 8. (K), 13.37
Hmm, köszi, a sok tutorial összekavart, és nem gondoltam rá, hogy ennyire egyszerű a betöltés része. :) Két problémám van még igazából.

Az egyik, hogy a #left divben szeretném az éppen aktív link hátterét megváltoztatni. Ezt eddig úgy oldottam meg, hogy removeClass/addClass függvénnyel leszedtem a .selected classt az előzőről és rátettem a következőre, de ezzel a load megoldással ugyebár az összesre ráteszi, ha az "a" elemre hivatkozok.

A másik, hogy a load(this.rel)-hez hogyan fűzöm hozzá, hogy mindig kiegészítse .php-ra a végét?

Szerk.: a rel paraméter azért kell, mert nem szeretném, hogy linkelhetőek legyenek a termékinfók, a jobbklikk is le van tiltva a megrendelő kérésére. Elegánsabb megoldást egyelőre nem találtam.
3

Specifikusabb

Poetro · 2010. Jún. 8. (K), 14.17
A linkek selected állításánál legyél specifikusabb, azaz csak azokat változtasd amiket kell, mondjuk megfelelő CSS selectorral.
Például:
$('#left a').click(function () {  
  $('#left a').not(this).removeClass('selected');
  $(this).addClass('selected')
  $('#right').load(this.rel + '.php');  
});
De persze ez a trükk senkit se fog visszatartani attól, hogy ténylegesen megnézze a termékek információit. A jobb gomb letiltása meg inkább szánalmas, és ráadásul könnyen kikerülhető, és csökkenti az oldal használhatóságát az olyanok számára, akik valamilyen korlátozással élnek.
4

köszi

marosics · 2010. Jún. 8. (K), 14.19
Nagyon szépen köszönöm a segítséget, pont így gondoltam! :)

Sajnos a jobbgomb tiltásról nem tudtam lebeszélni az illetőt, és ha meglátja a címsávban a közvetlen linket, szintén húzza a száját, úgyhogy kénytelen vagyok így csinálni.
5

SEO

Poetro · 2010. Jún. 8. (K), 16.03
Még azt is hozzá kell tenni, hogy a keresőmotorok így nem fogják a fenti tartalmat beindexelni, ezért valószínűleg csökken azon felhasználók száma, akik keresőkből érkeznek az oldalra