Autore Topic: [AGGIORNATO]Menu dinamico JQuery  (Letto 6252 volte)

Offline simonepozzobon

  • Nuovo arrivato
  • *
  • Post: 28
    • Mostra profilo
[AGGIORNATO]Menu dinamico JQuery
« il: 30 Mag 2010, 14:50:23 »
Salve a tutti,
sar˛ diretto anzi direttissimo volevo creare un menu dinamico nel quale facendo click sulle varie voci mi si aprano i contenuti con l'effetto della libreria JQuery slideDown()...rendendo, poi, il tutto pubblico e free.
Esiste un modo per farlo? devo creare un modulo un componente modificare qualche file?!?!
Carneade!!!!
Grazie a tutti
« Ultima modifica: 04 Giu 2010, 17:49:17 da simonepozzobon »

Offline simonepozzobon

  • Nuovo arrivato
  • *
  • Post: 28
    • Mostra profilo
Re:Menu dinamico JQuery
« Risposta #1 il: 30 Mag 2010, 19:06:40 »
ecco qual'Ŕ la mia idea! l'ho realizzata con l'API di jQuery .load() e gli indirizzi ai contenuti del mio sito joomla! ora vorrei inserirla in joomla!!
HTML
Codice: [Seleziona]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simone Pozzobon</title>
<link href="stile.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="templates/<?php echo $this->template ?>/js/jquery-1.4.1.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

$('div#contatti').hide();
$('div#podcast').hide();
$('div#eventi').hide();
$('div#blog').hide();
$('a#chiudi1').hide();
$('a#chiudi2').hide();
$('a#chiudi3').hide();
$('a#chiudi4').hide();

$('a#menu1').click(function(){
$('p#uno').fadeTo('slow',0.2);
$('div#contatti').load('/joomla/contatti/contatti.html #content', function(){
$('div#contatti').slideDown('slow')
});
$('a#chiudi1').fadeIn();
});

$('a#menu2').click(function(){
$('p#due').fadeTo('slow',0.2);
$('div#podcast').load('/joomla/podcast/2.html #content', function(){
$('div#podcast').slideDown('slow')
});
$('a#chiudi2').fadeIn();
});

$('a#menu3').click(function(){
$('p#tre').fadeTo('slow',0.2);
$('div#eventi').load('/joomla/eventi2/eventlist #content', function(){
$('div#eventi').slideDown('slow')
});
$('a#chiudi3').fadeIn();
});

$('a#menu4').click(function(){
$('p#quattro').fadeTo('slow',0.2);
$('div#blog').load('/joomla/blog/3.html #content', function(){
$('div#blog').slideDown('slow')
});
$('a#chiudi4').fadeIn();
});

$('a#chiudi1').click(function(){
$('a#chiudi1').fadeOut();
$('p#uno').fadeTo('slow',1);
$('div#contatti').hide('slow');
});
$('a#chiudi2').click(function(){
$('a#chiudi2').fadeOut();
$('p#due').fadeTo('slow',1);
$('div#podcast').hide('slow');
});
$('a#chiudi3').click(function(){
$('a#chiudi3').fadeOut();
$('p#tre').fadeTo('slow',1);
$('div#eventi').hide('slow');
});
$('a#chiudi4').click(function(){
$('a#chiudi4').fadeOut();
$('p#quattro').fadeTo('slow',1);
$('div#blog').hide('slow');
});
});
</script>

</head>

<body>
<div id="layout">
<div id="menu">
        <a href="#" id="menu1">Contatti</a>
        <a href="#" id="menu2">Podcast</a>
        <a href="#" id="menu3">Eventi</a>
        <a href="#" id="menu4">Blog</a>
    </div>
<div id="content">
<p id="uno" align="right"></p>
        <div id="contatti"></div>
<p align="right"><a href="#" id="chiudi1">Chiudi</a></p>
        <p id="due" align="right"></p>
        <div id="podcast"></div>
        <p align="right"><a href="#" id="chiudi2">Chiudi</a></p>
        <p id="tre" align="right"></p>
        <div id="eventi"></div>
        <p align="right"><a href="#" id="chiudi3">Chiudi</a></p>
        <p id="quattro" align="right"></p>
        <div id="blog"></div>
        <p align="right"><a href="#" id="chiudi4">Chiudi</a></p>
    </div>
</div>
</body>
</html>

e il link per vederlo in funzione
www.simonepozzobon.com/test.html

qualche aiuto/consiglio/collaboratore!?!?

Offline tonicopi

  • Global Moderator
  • Instancabile
  • ********
  • Post: 12756
  • Sesso: Maschio
    • Mostra profilo
    • tonicopi su google
Re:Menu dinamico JQuery
« Risposta #2 il: 31 Mag 2010, 00:15:40 »
Interessante, ma credo che sia meglio spostare nella sezione sviluppo...  :)

mau_develop

  • Visitatore
Re:Menu dinamico JQuery
« Risposta #3 il: 31 Mag 2010, 11:27:14 »
a me da' qualche problemino di script con ffox, looppa qualcosa...

cmq, se vuoi usarlo in joomla basta che fai un modulo ricalcando quello di un semplice men¨ che va in override a quello principale (quasi tutti, scegline uno facile).

M.

Offline simonepozzobon

  • Nuovo arrivato
  • *
  • Post: 28
    • Mostra profilo
Re:Menu dinamico JQuery
« Risposta #4 il: 31 Mag 2010, 13:39:35 »
Citazione
Interessante, ma credo che sia meglio spostare nella sezione sviluppo... 
non avresti tutti i torti :) pardon!  ;D

Citazione
cmq, se vuoi usarlo in joomla basta che fai un modulo ricalcando quello di un semplice men¨ che va in override a quello principale (quasi tutti, scegline uno facile).
vediamo se ho capito dovrei scaricare un modulo di un menu e adattarlo in modo che al click del mouse carichi lo script!?!? perchŔ anche io avevo pensato ad una cosa del genere ma poi non saprei come fagli aprire i vari contenuti sulla stessa pagina senza doverla cambiare ogni volta!! sempre con la funzione .load() ??

Offline simonepozzobon

  • Nuovo arrivato
  • *
  • Post: 28
    • Mostra profilo
Re:Menu dinamico JQuery
« Risposta #5 il: 31 Mag 2010, 16:01:51 »
Allora ci sono in parte riuscito:
(per vedere il risultato momentaneo www.simonepozzobon.com/joomla/

ho creato un modulo html personalizzato con il seguente codice

Codice: [Seleziona]
<div id="menu">
<p align="center"><a id="menu1" href="#">Home</a><a id="menu2" href="#">Contatti</a><a id="menu3" href="#">Podcast</a><a id="menu4" href="#">Eventi</a><a id="menu5" href="#">Blog</a></p>
</div>

poi ho modificato l'index.php del mio tema disattivando prima mootools e caption con il seguente codice:

Codice: [Seleziona]
<?php
$user 
=& JFactory::getUser();
if (
$user->get('guest') == 1) {
$headerstuff $this->getHeadData();
$headerstuff['scripts'] = array();
$this->setHeadData($headerstuff); }
?>

<jdoc:include type="head" />

poi inserendo Jquery che avevo precedentemente salvato nella cartella templates/miotemplate/js
e lo stile personalizzato per le strisce colorate precedentemente salvato nella cartella templates/miotemplate/css

Codice: [Seleziona]
<script type="text/javascript" src="templates/<?php echo $this->template ?>/js/jquery-1.4.1.js"></script>
Codice: [Seleziona]
<link href="templates/<?php echo $this->template ?>/css/menu.css" rel="stylesheet" type="text/css" />

e infine ho scritto direttamente lo script nel file, anche se avrei potuto richiamarlo e salvarlo nella cartella js, ma non avevo voglia  :P:

Codice: [Seleziona]
<script type="text/javascript">
$(document).ready(function(){

        $('div#content').hide();
$('div#contatti').hide();
$('div#podcast').hide();
$('div#eventi').hide();
$('div#blog').hide();
$('a#chiudi1').hide();
$('a#chiudi2').hide();
$('a#chiudi3').hide();
$('a#chiudi4').hide();
        $('a#chiudi5').hide();

$('a#menu1').click(function(){
$('p#uno').fadeTo('slow',0.2);
$('div#content').slideDown('slow');
$('a#chiudi1').fadeIn();
});

$('a#menu2').click(function(){
$('p#due').fadeTo('slow',0.2);
$('div#contatti').load('contatti/contatti.html #content', function(){
$('div#contatti').slideDown('slow')
});
$('a#chiudi2').fadeIn();
});

$('a#menu3').click(function(){
$('p#tre').fadeTo('slow',0.2);
$('div#podcast').load('podcast/2.html #content', function(){
$('div#podcast').slideDown('slow')
});
$('a#chiudi3').fadeIn();
});

$('a#menu4').click(function(){
$('p#quattro').fadeTo('slow',0.2);
$('div#eventi').load('eventi2/eventlist #content', function(){
$('div#eventi').slideDown('slow')
});
$('a#chiudi4').fadeIn();
});

        $('a#menu5').click(function(){
$('p#cinque').fadeTo('slow',0.2);
$('div#blog').load('blog/3.html #content', function(){
$('div#blog').slideDown('slow')
});
$('a#chiudi4').fadeIn();
});

$('a#chiudi1').click(function(){
$('a#chiudi1').fadeOut();
$('p#uno').fadeTo('slow',1);
$('div#content').hide('slow');
});
$('a#chiudi2').click(function(){
$('a#chiudi2').fadeOut();
$('p#due').fadeTo('slow',1);
$('div#contatti').hide('slow');
});
$('a#chiudi3').click(function(){
$('a#chiudi3').fadeOut();
$('p#tre').fadeTo('slow',1);
$('div#podcast').hide('slow');
});
$('a#chiudi4').click(function(){
$('a#chiudi4').fadeOut();
$('p#quattro').fadeTo('slow',1);
$('div#eventi').hide('slow');
});

        $('a#chiudi5').click(function(){
$('a#chiudi5').fadeOut();
$('p#cinque').fadeTo('slow',1);
$('div#blog').hide('slow');
});
});
</script>


Il tutto inserito tra i tag <head> e </head>
Poi ho posizionato all'interno dei tag <body> e </body> le "strice colorate" con il seguente codice:
Codice: [Seleziona]
<p id="uno"></p>
    <div id="content"><jdoc:include type="component" style="XHTML" /></div>
                <p align="right"><a href="#" id="chiudi1">Chiudi</a></p>

        <p id="due"></p>
        <div id="contatti"></div>
<p align="right"><a href="#" id="chiudi2">Chiudi</a></p>
       
        <p id="tre"></p>
        <div id="podcast"></div>
                <p align="right"><a href="#" id="chiudi3">Chiudi</a></p>

        <p id="quattro" align="right"></p>
        <div id="eventi"></div>
                <p align="right"><a href="#" id="chiudi4">Chiudi</a></p>

        <p id="cinque" align="right"></p>
        <div id="blog"></div>
                <p align="right"><a href="#" id="chiudi5">Chiudi</a></p>


ora il problema che sorge è il seguente:
Quando apro una sezione per esempio blog poi ho la possibilità di cliccare sul titolo di ogni post per leggere il testo esteso..... e qui crolla tutto  :( .....perchè riapre la stessa pagina e ricomincia da capo!! :( :( :( ....come posso risolvere questo problema?!!?
« Ultima modifica: 31 Mag 2010, 16:04:55 da simonepozzobon »

Offline simonepozzobon

  • Nuovo arrivato
  • *
  • Post: 28
    • Mostra profilo
Re:Menu dinamico JQuery
« Risposta #6 il: 01 Giu 2010, 01:59:31 »
ho quasi finito! non avendo ricevuto molti consigli sono andato avanti come potevo
il risultato lo potete vedere qui:
http://www.simonepozzobon.com/joomla/

adesso voglio riuscire ad assegnare alle classi .contentheading e .componentheading un colore di sfondo diverso in modo che i titoli degli articoli abbiano uno sfondo diverso per ogni sezione! consigli?

Offline simonepozzobon

  • Nuovo arrivato
  • *
  • Post: 28
    • Mostra profilo
Re:Menu dinamico JQuery
« Risposta #7 il: 03 Giu 2010, 13:41:22 »
mmmm utile insomma questo forum! troppi consigli troppe soluzioni!

Offline simonepozzobon

  • Nuovo arrivato
  • *
  • Post: 28
    • Mostra profilo
Re:[AGGIORNATO]Menu dinamico JQuery
« Risposta #8 il: 04 Giu 2010, 17:59:40 »
sto procendendo ho rinunciato a cambiare il .componentheading perchŔ ho optato per un'altra soluzione grafica! (consigli non me ne date)!!!

ora per evitare che cliccando sul link leggi tutto si ricarichi la pagina mandando tutto ko

vorrei far visualizzare gli articoli in un lightbox cliccando sul titolo degli stessi (identificabili con la classe .contentpagetitle)

mau_develop

  • Visitatore
Re:[AGGIORNATO]Menu dinamico JQuery
« Risposta #9 il: 04 Giu 2010, 18:21:51 »
che Ŕ un monologo?

scusa ma se nessuno ha o vuole proporti idee che fai stalking? :):)

M.

Offline simonepozzobon

  • Nuovo arrivato
  • *
  • Post: 28
    • Mostra profilo
Re:[AGGIORNATO]Menu dinamico JQuery
« Risposta #10 il: 05 Giu 2010, 01:46:46 »
che Ŕ un monologo?

scusa ma se nessuno ha o vuole proporti idee che fai stalking? :):)

M.
sto semplicemente pubblicando i progressi  ;)
metti che un domani serva a qualcuno!?!?!?
trovo giusto che come posso trovare io aiuto tra i tutorial online possano farlo anche gli altri!
non Ŕ stalking era solo il cercare un "feedback"! mi bastava anche un "mi piace" o un "mi fa schifo"!
non Ŕ questa la filosofia opensource!?!??!
ho avuto un idea la sto sviluppando chi vuole contribuire constribuisca io pubblico i progressi!
e in caso possa servire a qualcuno Ŕ qui...ma se da fastidio cancello i post e lo pubblicher˛ da qualche altra parte!
p.s.: 109 visite se ognuno avesse lasciato il suo parere, che non deve assolutamente essere per forza positivo, magari ora avrei risolto il problema e magari qualcuno avrebbe potuto trarne vantaggio!!!
p.s.: non interpretare male ci˛ che ho scritto nulla contro di te :)
PEACE ;) anzi sono pro alle critiche se ne hai sentiti libero di farmene!
« Ultima modifica: 05 Giu 2010, 01:51:15 da simonepozzobon »

mau_develop

  • Visitatore
Re:[AGGIORNATO]Menu dinamico JQuery
« Risposta #11 il: 05 Giu 2010, 14:40:09 »
..e si che ho messo gli smileys per prevenire imbruttimenti... non era un rimprovero, non capivo cosa tu stessi facendo.

Critiche... mah! ... che critiche ... Jquery Ŕ giÓ bell'e pronto da usare... credo che la differenza da altri simili le potrai fare sulla picevolezza dei setup parametri e nell'uso dei css, non sul codice... se a un sasso gli applichi la classe gestita dagli script fai un menu coi sassi :)

M.

Offline Pasquale84

  • Nuovo arrivato
  • *
  • Post: 10
    • Mostra profilo
Re:[AGGIORNATO]Menu dinamico JQuery
« Risposta #12 il: 06 Dic 2012, 14:22:17 »
Hai fatto bene a pubblicare aggiornamenti! Sto cercando di fare una cosa molto simile alla tua e seguire il tuo discorso mi Ŕ stato utilissimo! ma poi ce l'hai fatta?

 

Host

Torna su