slide con prototype

**stellina81** · 21-02-2008, 10:21

ciao a tutti,
ho l'esigenza di riprodurre con prototype un esempio simile a questo:
http://www.marcolecce.com/blog/Esemp.../esempio1.html
che utilizza la libreria jquery
che funzione posso utlizzare???

grazie

**stellina81** · 03-03-2008, 17:54

ho trovato un esempio che fa al acaso mio qui:
http://www.bibeault.org/psia/psia.chap5.zip

Il tutto funziona:

Ho incluso nella mia pagina le librerie:
<script src="http://test/includes/js/global.js" type="text/javascript"></script>
<script src="http://test/includes/js/prototype.js" type="text/javascript"></script>
<script src="http://test/includes/js/scriptaculous.js" type="text/javascript"></script>
<script src="http://test/includes/js/TogglePane.js" type="text/javascript"></script>

......
this.legend.onclick = function() {
$A(fieldsetElement.childNodes).each(
function(child) {
if (child.nodeType == Node.ELEMENT_NODE &&
child.tagName != 'LEGEND') {
Effect.toggle(child);
}
}
);
}
...........

e ho creato un foglio di stile ad hoc.

<div class="sub_title"><div class="subtitle">TESTO</div></div>

<fieldset id="testFieldset">
<legend>Leggi tutto</legend>
<div class="text ext_content" id="content1" style="display:none">
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>
</fieldset>

Al primo click si apre la tendina con il testo. In questo caso dovrebbe cambiare la scritta leggi tutto e comparire la scritta "chiudi" e cambiare l'immagine di sfondo.

Al secondo click la tendina si chiude e la scritta dovrebbe essere di nuovo "leggi tutto"....
mi dareste qualche indicazione in merito ....

grazie

**fcaldera** · 03-03-2008, 22:38

xhtml

codice:

<fieldset id="testFieldset">
<legend>Leggi tutto</legend>
<div class="text ext_content" id="content1" style="display:none">
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>
</fieldset>

js

codice:

$$('legend a').each(function(link) {
    link.status = false; // variabile di stato (ipotizzo tutti i div chiusi)
    link.onclick = function() {
        var divrelated = this.rel; //uso l'attributo rel del link per sapere l'id del div da aprire/chiudere
        if ($(divrelated)) {
            if (this.status) { 
               // this è il link cliccato. Puoi cambiare classe al link (this.className) al legend
               // che lo contiene (this.parentNode.className), etc etc.
               $(divrelated).style.display = 'none';  
            }
            else {
               $(divrelated).style.display = 'block';  
            }
            this.status = !this.status;
        }
        return false;
    }
});

prendilo come un tentativo che non ho provato...

**fcaldera** · 03-03-2008, 23:38

per intero

codice:

<html>
  <head>
    <title>Toggle Pane Test</title>
    <script type="text/javascript" src="scripts/prototype.js"></script>
	<script>
	
    function da_chiamare_allonload() {
        $$('legend a').each(function(link) {
            link.status = false;
            link.className = 'linkchiuso';
            link.onclick = function() {

                var divrelated = this.rel; //uso l'attributo rel del link per sapere l'id del div da aprire/chiudere

                if ($(divrelated)) {
                    if (this.status) { 
                       // this è il link cliccato. Puoi cambiare classe al link (this.className) al legend
                       // che lo contiene (this.parentNode.className), etc etc.
                       $(divrelated).style.display = 'none';  
			           this.className = 'linkchiuso'; 
                    }
                    else {
                       $(divrelated).style.display = 'block';  
                       this.className = 'linkaperto';
                    }
                    this.status = !this.status;
                }
                return false;
            }
        });
    }
    	
    window.onload = function() {
        da_chiamare_allonload(); 
    }
    </script>

	

    <style type="text/css">
      body {
        font-family: Verdana,sans-serif;
        font-size: 9pt;
        padding: 16px;
      }

      fieldset {
        border: 0;
        padding: 4px 12px;
	background-color:#FFFFCC
      }

      .readmore {
		background-color: #00FF00;
		color: #000
      }

   </style>
 </head>

 <body>

    <fieldset id="testFieldset">
        <legend>Leggi tutto</legend>
        <div class="text ext_content" id="content1" style="display:none">
            Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor 
            incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
            ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit 
            in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat 
            cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
        </div>

    </fieldset>

  
    <fieldset id="testFieldset">
        <legend>Leggi tutto</legend>
        <div class="text ext_content" id="content2" style="display:none">
            Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor 
            incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
            ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit 
            in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat 
            cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
        </div>

    </fieldset>

 </body>
</html>

Discussione: slide con prototype

Strumenti discussione

Ricerca discussione

Visualizza

slide con prototype

Permessi di invio