Hur Collapse objekt i JavaScript

March 21

Inklusive en JavaScript kollaps alternativ i din webbsida kan du infoga en kod i din sida som orsakar innehåll att kollapsa och sedan dyka upp igen. Med en sådan funktion finns på din webbsida kan vara till nytta om du har specifikt innehåll som du vill lyfta fram, men också har en del sekundär, kompletterande information som du vill inkludera. Du kan inkludera ytterligare information i en hopfällbar del av sidan.

Instruktioner

1 Logga in på din webbserver, och klicka för att öppna HTML-sidan där du kommer att skapa en hopfällbar avsnitt.

2 Klicka i avsnittet "<head>" på sidan.

3 Sätt följande JavaScript kollaps kod:

<Script type = "text / javascript">

Var collapseDivs, collapseLinks;

Funktionen createDocumentStructure (tagname) {

if (document.getElementsByTagName) {

var elements = document.getElementsByTagName(tagName);

collapseDivs = new Array (elements.length);

collapseLinks = new Array (elements.length);

for (var i = 0; i & lt; elements.length, jag ++) {

var element = element [i];

var siblingContainer;

if (document.createElement &&

(SiblingContainer = document.createElement (div)) &&

siblingContainer.style)

{

var nextSibling = element.nextSibling;

element.parentNode.insertBefore (siblingContainer, nextSibling);

var nextElement = element [i + 1];

while (nextSibling! = nextElement && nextSibling! = null) {

var tomove = nextSibling;

nextSibling = nextSibling.nextSibling;

siblingContainer.appendChild (tomove);

}

siblingContainer.style.display = 'none';

collapseDivs [i] = siblingContainer;

createCollapseLink (element, siblingContainer, i);

}

else {

// Ingen dynamisk skapelse av element möjliga

lämna tillbaka;

}

}

createCollapseExpandAll (element [0]);

}

}

Funktionen createCollapseLink (element, siblingContainer, index) {

var span;

if (document.createElement && (span = document.createElement (span))) {

span.appendChild(document.createTextNode(String.fromCharCode(160)));

var link = document.createElement ( "a");

link.collapseDiv = siblingContainer;

link.href = "#";

link.appendChild (document.createTextNode (expandera));

link.onclick = collapseExpandLink;

collapseLinks [index] = länk;

span.appendChild (länk);

element.appendChild (spännvidd);

}

}

Funktionen collapseExpandLink (evt) {

if (this.collapseDiv.style.display == '') {

this.parentNode.parentNode.nextSibling.style.display = 'none';

this.firstChild.nodeValue = 'expandera';

}

else {

this.parentNode.parentNode.nextSibling.style.display = '';

this.firstChild.nodeValue = kollaps ';

}

if (evt && evt.preventDefault) {

evt.preventDefault();

}

return false;

}

Funktionen createCollapseExpandAll (firstElement) {

var div;

if (document.createElement && (div = document.createElement (div))) {

var link = document.createElement('a');

link.href = "#";

link.appendChild (document.createTextNode (expandera alla "));

link.onclick = expandAll;

div.appendChild (länk);

div.appendChild (document.createTextNode ( ''));

link = document.createElement ( "a");

link.href = "#";

link.appendChild (document.createTextNode (kollapsa alla "));

link.onclick = collapseAll;

div.appendChild (länk);

firstElement.parentNode.insertBefore (div, firstElement);

}

}

Funktionen expandAll (evt) {

for (var i = 0; i <collapseDivs.length, i ++) {

collapseDivs[i].style.display = '';

collapseLinks [i] .firstChild.nodeValue = 'kollaps';

}

if (evt && evt.preventDefault) {

evt.preventDefault();

}

return false;

}

Funktionen collapseAll (evt) {

for (var i = 0; i <collapseDivs.length, i ++) {

collapseDivs[i].style.display = 'none';

collapseLinks [i] .firstChild.nodeValue = 'expandera';

}

if (evt && evt.preventDefault) {

evt.preventDefault();

}

return false;

}

</ Script>

<Script type = "text / javascript">

window.onload = function (evt) {

createDocumentStructure ( "h1");

}

</ Script>

4 Infoga följande kod i avsnittet "<body>" på sidan:

<Center> <h1> Hopfällbar avsnitt Header </ h1> <p> Hopfällbar informationen går här.

Ersätt "Hopfällbar Avsnitt Header" med rubriken för det avsnitt du vill att kollapsa. Ersätt "Hopfällbar informationen går här" med den faktiska informationen du vill att kollapsa.

5 Publicera sidan.


        

Välkommen till dig för att skicka en kommentar:

            
            
            
            

© 2021 Astrixsoft.com | Contact us: webmaster# astrixsoft.com