Salve a tutti vorrei effettuare un semplice effetto con javascript che nasconde una tabella come nei forum tramite un immagine che cambia in base se è nascosta o no la tabella
tipo si presenta un - , si clicca , si nasconde la tabella e l'immagine diventa + e viceversa...
Questo effetto vorrei applicarlo appunto ad un mio forum in creazione grazie a tutti
ciao... ti posso offrire una soluzione fatta in Jquery, come dico a tutti e come mi è stato suggerito includere una libreria non è sempre il massimo sopratutto per animazioni così semplici, in ogni caso se nessuno ti offrisse una soluzione più "snella" questa rimane MOLTO VALIDA.
Includi la libreria nella <head>.
ed ecco lo script assieme all'HTML (lo script lo puoi anche mettere nella <head> SOTTO L'INCLUSIONE DELLA LIBRERIA)codice:<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.5.min.js"></script>
(ricordati i impostare una dimensioni in larghezza per le colonne perché altrimenti quando fai lo slide la riga della thead si ridimensiona in larghezza, riadattandosi al solo contenuto dell'head).codice:<table> <thead class="hider"> <tr> <th class="simbol">-</th> <th colspan="3">Head</th> <th></th> <th></th> </tr> </thead> <tbody class="toggle"> <tr> <td>contenuto</td> <td>contenuto</td> <td>contenuto</td> <td>contenuto</td> </tr> </tbody> </table> <script> $(function(){ $(".hider").css("cursor","pointer"); $(".hider").toggle(function(){ $(this).next(".toggle").slideUp(500); $(".simbol").text("+"); }, function(){ $(this).next(".toggle").slideDown(500); $(".simbol").text("-"); }); }); </script>
PS. non se non ti va bene il formato della tabella, passami il tuo che ti faccio lo script adattato, in ogni caso basta che metti una THEAD(class=hider) e il TBODY(class=toggle) e nella THEAD metti una cella con class="simbol".
FUNZIONA SU TUTTE LE TABELLE CHE PRESENTANO QUESTA FORMATTAZIONE (ovviamente funziona solo sulla tabella che clicchi anche se hai un solo script nella head)
Aiuto perché mi piace, mi diverte, e mi allena.
Non sono esperto, offro opportunità non obblighi.
Uso un mio modo di fare le cose, che se risultasse poco gradito basta ignorarlo.
il succo della cosa ècodice:- <table id="foo" style="border:#000000 1px solid;"><tr><td>ciao</td></tr></table>
var f=document.getElementById('foo'); if(f.style.display=='none'){f.style.display='block '; this.childNodes[0].nodeValue='-';}else{f.style.display='none'; this.childNodes[0].nodeValue='+';};
il resto è grafica per rendere funzionale il test.
Occhio che funziona solo se dentro il tag <a non inserisci altri tag ma solo testo (siccome vuoi un segno + o -, è inutile andare a cercare gif per farlo quando abbiamo la tastiera)
vi ringrazio tanto per i vostri esempio...pero rispondendo a TrueLies nn si potrebbero aggiungere delle immagini al posto del + e del - fatte con la tastiera? io lo vorrei cosi....
sì cherto che si puo.
A patto che incapsulato dentro il tag <a> ci sia solo una immagine (e niente prima, nemmeno uno spazio bianco o un ritorno a capo: niente significa niente), basta cambiare
this.childNodes[0].nodeValue
in
this.childNodes[0].src='nomeimmagine1.jpg'
e cambi il nome della immagine a seconda di quella che vuoi
Ottimo! Adoro Javascript dovrò studiarlo *.* grazie mille TrueLies
Lo script funziona ma nn visualizza le due immagini:
Già, non funziona... e l'immagine ndo sta?Originariamente inviato da TrueLies
(...)
A patto che incapsulato dentro il tag <a> ci sia solo una immagine (...)
Tu hai
<a href=" eccetera></a>
E la immagine?
<a href=eccetera>[img]minus.png[/img]</a>
ps: senza la immagine presente già in partenza la esprressione
childNodes[0]
che significa prendi il primo nodo html dentro questo tag (i linguaggi di programmazione cominciano i conteggi da 0 e non da 1), non trova nulla da acchiappare
scusami...non ci aveva badato..(nn capendo nulla di javascript mi sembra ovvio) ho risolto graz
Permessi di invio
Rispondi quotando