[jQuery] Impostare elemento attivo

kwb · 09-08-2013, 19:59

Ciao a tutti!
Ho una struttura html come questa nella mia pagina:

Codice HTML:

<body>
	<div id="Pers1">testo vario</div>
	<div id="Pers2">testo vario</div>
	<div id="Pers3">testo vario</div>
	<div id="Pers4">testo vario</div>
	<div id="Pers5">testo vario</div>
</body>

E ho fatto uno script in JS ( principalmente scritto con jQuery ) per spostarmi da un elemento all'altro alla pressione dei tasti J e K ( come succede(va) con Google Reader, 9GAG, e molti altri lettori RSS ).
Lo script funziona, ma ritengo che si possa migliorare, tuttavia non so come eseguire l'implementazione.

La mia implementazione attuale sfrutta tutto un sistema di id personalizzati e indici che trovo macchinosa e non ottimale.

In buona sostanza utilizzo l'evento jQuery keydown sul body:

Codice:

$('body').keydown(function(e){//Istruzioni});

Per spostarmi da un elemento all'altro. Tuttavia vorrei cambiare il focus e spostarlo dal body sull'elemento corrente, in partenza sul div con id Pers1.
Questo perchè, una volta fatto così, posso scrivere una funzione che al keydown, utilizza solo .prev() e .next() per trovare l'elemento precedente/successivo al quale andare.

Ho provato a cambiare il focus ma senza successo. Ho tentato un:

Codice:

document.activeElement = $('div#Pers1');

e anche

Codice:

$('div#Pers1').focus();

Ma senza successo. Il focus rimane sempre sul body.

Soluzioni?

OoZic · 09-08-2013, 20:59

non so se è quello che devi fare ma la prima cosa che mi è venuta in mente è:
js:

Codice:

$(document).keypress(function(e){
    // vai avanti
    if(e.which == 107) { 
        var a1 = $(".active");
        var s1 = $(".active").next();
        a1.removeClass("active");
        s1.addClass("active");
    }
    // torna indietro
    else if (e.which == 106) {
        var a2 = $(".active");
        var s2 = $(".active").prev();
        a2.removeClass("active");
        s2.addClass("active");         
    }
});

css:

Codice:

.active {
    color:#E01B5D;
}

html:

Codice:

<div class="pippo active" id="Pers1">testo vario</div>
<div class="pippo" id="Pers2">testo vario</div>
<div class="pippo" id="Pers3">testo vario</div>
<div class="pippo" id="Pers4">testo vario</div>
<div class="pippo" id="Pers5">testo vario</div>

http://jsfiddle.net/EycWW/

non premere subito J perchè si blocca

dovresti fare una condizione se è il primo o l'ultimo elemento per evitarlo.

kwb · 13-08-2013, 22:17

Perfetto grazie!

09-08-2013, 19:59	#1
kwb Senior Member Iscritto dal: Jul 2003 Città: Alessandria Messaggi: 10167	[jQuery] Impostare elemento attivo Ciao a tutti! Ho una struttura html come questa nella mia pagina: Codice HTML: <body> <div id="Pers1">testo vario</div> <div id="Pers2">testo vario</div> <div id="Pers3">testo vario</div> <div id="Pers4">testo vario</div> <div id="Pers5">testo vario</div> </body> E ho fatto uno script in JS ( principalmente scritto con jQuery ) per spostarmi da un elemento all'altro alla pressione dei tasti J e K ( come succede(va) con Google Reader, 9GAG, e molti altri lettori RSS ). Lo script funziona, ma ritengo che si possa migliorare, tuttavia non so come eseguire l'implementazione. La mia implementazione attuale sfrutta tutto un sistema di id personalizzati e indici che trovo macchinosa e non ottimale. In buona sostanza utilizzo l'evento jQuery keydown sul body: Codice: $('body').keydown(function(e){//Istruzioni}); Per spostarmi da un elemento all'altro. Tuttavia vorrei cambiare il focus e spostarlo dal body sull'elemento corrente, in partenza sul div con id Pers1. Questo perchè, una volta fatto così, posso scrivere una funzione che al keydown, utilizza solo .prev() e .next() per trovare l'elemento precedente/successivo al quale andare. Ho provato a cambiare il focus ma senza successo. Ho tentato un: Codice: document.activeElement = $('div#Pers1'); e anche Codice: $('div#Pers1').focus(); Ma senza successo. Il focus rimane sempre sul body. Soluzioni? __________________ Dell XPS 13 (9350) :: i5-2500K - HD6870 - AsRock Z68 Pro3 - Corsair Vengeance 8GB (4x2) DDR3 :: Samsung Galaxy S4 GT-i9505

13-08-2013, 22:17	#3
kwb Senior Member Iscritto dal: Jul 2003 Città: Alessandria Messaggi: 10167	Perfetto grazie! __________________ Dell XPS 13 (9350) :: i5-2500K - HD6870 - AsRock Z68 Pro3 - Corsair Vengeance 8GB (4x2) DDR3 :: Samsung Galaxy S4 GT-i9505

Strumenti
Mostra una versione stampabile Invia questa pagina per email