NEXT PREV buttons jquery+xml

[evan75]

ciao a tutti.
qualcuno è in grado di indirizzarmi verso la creazione di 2 pulsanti prev e next che navighino un menu creato in xml?

next leggi la riga seguente
prev leggi la riga precedente.


se potete postare un esempio di sintassi sarebbe perfetto.
i comandi next() e prev() li conosco, ma non sono stato in grado di applicarli ad un file xml.


ho usato un metodo molto stupido per capire in quale pagina mi trovo:
se il contenuto del title tag è uguale al titolo del topic dell'xml, allora addClass all' ultimo elemnto a. (a:last)

però da qui in poi, i comandi next e prev non funzionano...

potete aiutarmi?

grazie.
E75

[Senamion]

Dovresti postare la porzione di xml, così è un po' ardua...

[evan75]

a me servirebbe solo una funzione che si muova di una riga in su o in giu rispetto all'xml

<?xml version="1.0" encoding="utf-8"?>
<chapter>
  <topic link="#">this is a topic
    <subTopic link="#">this is a sub topic</subTopic>
    <subTopic link="#">this is a sub topic</subTopic>
    <subTopic link="#">this is a sub topic</subTopic>
  </topic>
  <topic link="#">this is a topic</topic>
  <subTopic link="#">this is a sub topic</subTopic>
  <subTopic link="#">this is a sub topic</subTopic>
  <subTopic link="#">this is a sub topic</subTopic>
  <topic link="#">this is a topic</topic>
  <subTopic link="#">this is a sub topic</subTopic>
  <subTopic link="#">this is a sub topic</subTopic>
  <subTopic link="#">this is a sub topic</subTopic>
  <topic link="#">this is a topic</topic>
  <subTopic link="#">this is a sub topic</subTopic>
  <subTopic link="#">this is a sub topic</subTopic>
  <subTopic link="#">this is a sub topic</subTopic>
  <topic link="#">
    <subTopic link="#">this is a sub topic</subTopic>
    <subTopic link="#">this is a sub topic</subTopic>
    <subTopic link="#">this is a sub topic</subTopic>
  </topic>
  <topic link="#">this is a topic</topic>
  <subTopic link="#">this is a sub topic</subTopic>
  <subTopic link="#">this is a sub topic</subTopic>
  <subTopic link="#">this is a sub topic</subTopic>
</chapter>

next và alla riga successiva, prev và a quella precedente.

grazie per l'interessamento Senamion.

E75

[evan75]

up.

[Senamion]

Beh, l'xml che hai postato non mi sembra molto corretto.
Come mai il primo topic finisce dopo i subtopic e gli altri topic no?
La struttura corretta dovrebbe essere quella del primo topic. In questo caso il next è il topic successivo e non il subtopic (questo proprio per come è definito un xml.
Quando sei un topic (per come è formattato il primo, dovresti prendere i children e lavorare su questi
Se invece vuoi proprio fare per riga, l'xml dovrebbe essere diverso, ti faccio un esempio:

<?xml version="1.0" encoding="utf-8"?>
<chapter>
  <topic link="#" level="1">this is a topic</topic>
  <topic link="#" level="2">this is a sub topic</Topic>
  <topic link="#" level="1">this is a topic with 2 subtopic</topic>
  <topic link="#" level="2">this is a sub topic (1)</Topic>
  <topic link="#" level="2">this is a sub topic (2)</Topic>
</chapter>

Dove il level indica il livello topic, subtopic, subsubtopic...
In questo caso next() e prev() funzionano correttamente.

[evan75]

avevo usato un nesting perché il menu potrebbe avere delle funzionalità di expand/collapse, ma è un'altra storia ..


tornando al discorso: come scriverei il codice per il next prev button?

Posso chiederti di postare un esempio funzionante? (non con xml dom)

Poi io posso adattarlo per farlo funzionare correttamente su IE7 (visto che al lavoro usiamo ancora quello schifo nella nostra intranet)

ti ringrazio ancora per la tua disponibilità.
-E75

[Senamion]

Nel primo esempio che fai c'è un mix, qual'è l'xml vero?
Hai già una porzione di codice su cui adattarlo?

[evan75]

ciao Senamion,

Diciamo con l'esempio che hai postato tu..
(anche se continuo a non capire cosa ci sia di sbagliato nell'usare il nesting in un linguaggio per definizine "estendibile")
nel mio menu, alcuni sub topic sarebbero visibili e altri (quelli inseriti tra i tag topic) sarebbero visibili solo al click sul topic name.
cmq, vorrei chiederti, se ne hai voglia, di postare un esempio funzionante di pulsanti next e prev. Io penso di essere riuscito a farne uno, ma il codice e' moolto sporco e secondo me anche inutile..

Grazie mille ancora.
(ps non posso postare il codice in quanto fatto al lavoro.)

[Senamion]

Il problema non è il nesting, che è corretto, il problema è la prima parte:

  <topic link="#">this is a topic
    <subTopic link="#">this is a sub topic</subTopic>
    <subTopic link="#">this is a sub topic</subTopic>
    <subTopic link="#">this is a sub topic</subTopic>
  </topic>

è formalmente corretta, la seconda no:

  <topic link="#">this is a topic</topic>
  <subTopic link="#">this is a sub topic</subTopic>
  <subTopic link="#">this is a sub topic</subTopic>
  <subTopic link="#">this is a sub topic</subTopic>
  <topic link="#">this is a topic</topic>
  <subTopic link="#">this is a sub topic</subTopic>
  <subTopic link="#">this is a sub topic</subTopic>
  <subTopic link="#">this is a sub topic</subTopic>
  <topic link="#">this is a topic</topic>
  <subTopic link="#">this is a sub topic</subTopic>
  <subTopic link="#">this is a sub topic</subTopic>
  <subTopic link="#">this is a sub topic</subTopic>
  <topic link="#">
    <subTopic link="#">this is a sub topic</subTopic>
    <subTopic link="#">this is a sub topic</subTopic>
    <subTopic link="#">this is a sub topic</subTopic>
  </topic>
  <topic link="#">this is a topic</topic>
  <subTopic link="#">this is a sub topic</subTopic>
  <subTopic link="#">this is a sub topic</subTopic>
  <subTopic link="#">this is a sub topic</subTopic>

Il problema è che non capisco cosa fai di questo xml, per questo ti chiedevo di postare del codice, anche minimo.

Provo a farti un esempio usando html, supponi che ho una pagina con una lista:

<ul id='miaLista'>[*]Elemento n.1 [*]Elemento n.2 [*]Elemento n.3 [*]Elemento n.4 [*]Elemento n.5 [*]Elemento n.6 [*]Elemento n.7 [*]Elemento n.8 [/list]

Cosa farei nel document ready?
Innanzitutto aggiungerei una classe al primo elemento (per identificarlo in qualche modo visto che non abbiamo nulla, almeno nel tuo esempio:

$('#miaLista li').eq(9).addClass('selezionato');

A questo punto aggiungerei (diciamo prima del ul) i bottoni opportuni:

$('#miaLista').before('Prossimo - Precedente');

A questo punto sui bottoni creati metto l'evento click:

[/code]
$('.bNext').click(function() {
$('.selezionato').removeClass('selezionato').next( ).addClass('selezionato');
return false;
});
$('.bPrev').click(function() {
$('.selezionato').removeClass('selezionato').prev( ).addClass('selezionato');
return false;
});
[code]

In pratica prendo l'elemento con classe selezionato, gliela tolgo, passo al successivo (o precedente) a cui aggiungo la classe selezionato).

Chiaramente a queto devi aggiungere qualche controllo se esistono o meno (se sei al primo e fai precedente o se sei all'ultimo e fai successivo). Ma l'idea è questa.

[Senamion]

Chiaramente se nel css la classe selezionato ha qualcosa di evidente (tipo un border o un background) dovresti vedere l'effetto che fa!