Visualizzazione risultati 1 fino 8 di 8

Discussione: Tabella????

  1. #1
    AnimeHeaveen non è connesso Neofita
    Data registrazione
    23-10-2013
    Messaggi
    18

    Predefinito Tabella????

    Ciao vorrei creare sul mio sito una tabella come questa
    http://anidb.net/perl-bin/animedb.pl...nime&aid=10110
    quella a sinistra dove cliccando su title o my data ect non si apre un altra pag ma semplicemente gira come posso fare?

  2. #2
    Guest

    Predefinito

    Dipende dal tuo livello di conoscenza dei vari linguaggi, in questo caso servono CSS e javascript, io l'ho fatto nel mio sito usando le librerie JQuery, ma puoi farlo anche senza scomodare quest'ultimo, a te la decisione.

  3. #3
    L'avatar di alemoppo
    alemoppo non è connesso Staff AV
    Data registrazione
    24-08-2008
    Residenza
    PU / BO
    Messaggi
    22,067

    Predefinito

    Dove vedi il contenuto cambiare, hanno semplicemente posizionato più div nello stesso punto, e sono tutti nascosti tranne uno. Per nasconderli o mostrarli, hanno usato la proprietà css visibility.
    Si può comunque fare in molti altri modi, ad esempio modificando le dimensioni, o la z-index. Oppure, si potrebbe mettere un solo div e cambiare il contenuto tramite javascript (comunque i modi più leggeri penso siano quelli con visibility o z-index).

    EDIT: sorry, anticipato :D

    Ciao!

  4. #4
    AnimeHeaveen non è connesso Neofita
    Data registrazione
    23-10-2013
    Messaggi
    18

    Predefinito

    Citazione Originalmente inviato da alemoppo Visualizza messaggio
    Dove vedi il contenuto cambiare, hanno semplicemente posizionato più div nello stesso punto, e sono tutti nascosti tranne uno. Per nasconderli o mostrarli, hanno usato la proprietà css visibility.
    Si può comunque fare in molti altri modi, ad esempio modificando le dimensioni, o la z-index. Oppure, si potrebbe mettere un solo div e cambiare il contenuto tramite javascript (comunque i modi più leggeri penso siano quelli con visibility o z-index).

    EDIT: sorry, anticipato :D

    Ciao!
    Si grazie per avermi risposto ,volevo sapere come fare però per realizzarla se è una cosa complicata o no

  5. #5
    L'avatar di alemoppo
    alemoppo non è connesso Staff AV
    Data registrazione
    24-08-2008
    Residenza
    PU / BO
    Messaggi
    22,067

    Predefinito

    Come si fa tel'ho detto prima. Vale il discorso di australiafever.

    Ciao!

  6. #6
    L'avatar di radiodelmomento
    radiodelmomento non è connesso AlterGuru
    Data registrazione
    09-09-2010
    Messaggi
    1,075

    Predefinito

    Per farti capire grossomodo la struttura ecco un abbozzo di codice...
    Codice HTML:
    <a href="javascript:Mostra(1)">Mostra 1</a> - <a href="javascript:Mostra(2)">Mostra 2</a> - <a href="javascript:Mostra(3)">Mostra 3</a>
    <br />
    <div id="Contenuto1">contenuto1</div>
    <div id="Contenuto2">contenuto2</div>
    <div id="Contenuto3">contenuto3</div>
    <script>
    $("#Contenuto2, #Contenuto3").hide();
    function Mostra(id){
    	$("#Contenuto1, #Contenuto2, #Contenuto3").hide();
    	$("#Contenuto"+id).show();
    }
    </script>
    Nel codice ho utilizzato jQuery, quindi per funzionare occorre includerlo.
    Al design e all'ottimizzazione penserà il diretto interessato. Buon lavoro"

  7. #7
    AnimeHeaveen non è connesso Neofita
    Data registrazione
    23-10-2013
    Messaggi
    18

    Predefinito

    Citazione Originalmente inviato da radiodelmomento Visualizza messaggio
    Per farti capire grossomodo la struttura ecco un abbozzo di codice...
    Codice HTML:
    <a href="javascript:Mostra(1)">Mostra 1</a> - <a href="javascript:Mostra(2)">Mostra 2</a> - <a href="javascript:Mostra(3)">Mostra 3</a>
    <br />
    <div id="Contenuto1">contenuto1</div>
    <div id="Contenuto2">contenuto2</div>
    <div id="Contenuto3">contenuto3</div>
    <script>
    $("#Contenuto2, #Contenuto3").hide();
    function Mostra(id){
    	$("#Contenuto1, #Contenuto2, #Contenuto3").hide();
    	$("#Contenuto"+id).show();
    }
    </script>
    Nel codice ho utilizzato jQuery, quindi per funzionare occorre includerlo.
    Al design e all'ottimizzazione penserà il diretto interessato. Buon lavoro"
    Grazie mille ho capito :))

  8. #8
    L'avatar di alemoppo
    alemoppo non è connesso Staff AV
    Data registrazione
    24-08-2008
    Residenza
    PU / BO
    Messaggi
    22,067

    Predefinito

    Lo stesso codice di radiodelmomento senza jquery:

    Codice HTML:
    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>prova</title>
    <style type="text/css">
    [id^=Contenuto]
    {
    	visibility: hidden;
    	position: absolute;
    	top: 30px;
    	left: 10px;
    }
    </style>
    </head>
    <body>
    
    <a href="javascript:Mostra(1)">Mostra 1</a> - <a href="javascript:Mostra(2)">Mostra 2</a> - <a href="javascript:Mostra(3)">Mostra 3</a>
    <br />
    <div id="Contenuto1">contenuto1</div>
    <div id="Contenuto2">contenuto2</div>
    <div id="Contenuto3">contenuto3</div>
    
    <script type="text/javascript">
    window.onload = function()
    {
    	document.getElementById('Contenuto1').style.visibility = 'visible';
    }
    function Mostra(id)
    {
    	var div;
    	for(var i=1;div = document.getElementById('Contenuto'+i);i++)
    		if(i == id)
    			div.style.visibility = 'visible';
    		else
    			div.style.visibility = 'hidden';
    }
    </script>
    
    </body>
    </html>
    Ciao!
    Ultima modifica di alemoppo : 02-01-2014 alle ore 22.30.02

Regole di scrittura

  • Non puoi creare nuove discussioni
  • Non puoi rispondere ai messaggi
  • Non puoi inserire allegati.
  • Non puoi modificare i tuoi messaggi
  •