AJAX, acronimo di Asynchronous JavaScript and XML, è più di un linguaggio di programmazione. A differenza dei tradizionali linguaggi di programmazione quali Java e PHP, AJAX è in grado di scambiare dati con un server e aggiornare parti di una pagina Web senza ricaricare l'intera pagina. Lo spazio è molto importante, così è possibile utilizzare AJAX per visualizzare una pagina di sovrapposizione nella pagina Web esistente facendo clic su un link piccolo. La pagina sovrapposta può visualizzare qualsiasi cosa, da un form di login ad un annuncio.

Istruzioni

1

Aprire un editor di testo come blocco note o WordPad e inserire questo codice:

var dropdowncontent = {
disableanchorlink: vero, il //when utente fa clic sul link di ancoraggio, deve essere disattivato il collegamento stesso (sempre true se sopra "revealbehavior" impostato su "fare clic su")
hidedivmouseout: [true, 200], //Set nascondendo il comportamento all'interno di goccia giù DIV stesso: [hide_div_onmouseover?, miliseconds_before_hiding]
ajaxloadingmsg: "caricamento di contenuto. Si prega di attendere... ", //HTML per mostrare mentre pagina AJAX viene feched, se applicabile
ajaxbustcache: true, //Bust cache durante il recupero di pagine AJAX?

getposOffset:function(what, offsettype) () {
ritorno (what.offsetParent)? What[OffsetType]+this.getposOffset (what.offsetParent, offsettype): ciò che [offsettype]
},
isContained:function(m, e) () {
var e=window.event | | e
var c=e.relatedTarget | | ((e.Type=="MouseOver")? e.fromElement: e.toElement)
mentre (c & & c! = m) try {c=c.parentNode} catch {c = m}
Se (c = = m)
restituire true
altro
restituire false
},
Visualizza: function(anchorobj, subobj, e) () {
Se (! this.isContained (anchorobj, e) | | (e & & e.type=="click")) {
var e=window.event | | e
Se (e.type=="click" & & subobj.style.visibility=="visible") {
subobj.Style.Visibility="hidden"
ritorno
}
horizontaloffset=(subobj.dropposition[0]=="left") var? -(subobj.offsetWidth-anchorobj.offsetWidth): 0 //calculate utente aggiunto offset orizzontale
verticaloffset=(subobj.dropposition[1]=="top") var? -subobj.offsetHeight: anchorobj.offsetHeight //calculate utente aggiunto offset verticale
subobj.Style.Left=this.getposOffset (anchorobj, "offsetLeft") + horizontaloffset + "px"
subobj.Style.Top=this.getposOffset (anchorobj, "offsetTop") + verticaloffset + "px"
subobj.Style.clip=(subobj.dropposition[1]=="Top")? "rect (auto auto auto 0)": "rect (auto 0 0 0)" //hide a discesa inizialmente tramite ritaglio
subobj.Style.Visibility="Visible"
subobj.startTime=new Date().getTime()
subobj.ContentHeight=parseInt(subobj.offsetHeight)
Se (typeof finestra ["hidetimer" + subobj.id]!="undefined") //clear timer che nasconde la casella a discesa?
clearTimeout (finestra ["hidetimer" + subobj.id])
This.slideengine (subobj, (subobj.dropposition[1]=="top")? "fino": "giù")
}
},
curveincrement:function(percent) () {
ritorno (1-Math.cos(percent*Math.PI)) / 2 //return cos curva base valore da una percentuale di input
},
{dropdowncontent.hide (subobj, subobj, e)}
Se anchorobj.onclick=function() (this.disableanchorlink) {return false}
}
altro
anchorobj.OnClick=function(e) {dropdowncontent.show (questo, subobj, e); return false}
Se (this.hidedivmouseout[0]==true) //hide discesa DIV quando mouse rotola fuori di esso?
subobj.onmouseout=function(e) {dropdowncontent.hide (questo, subobj, e)}
}
}

2

Aggiungere questo codice al documento:

slideengine:function(obj, Direction) () {
trascorsi var = new Date () () .getTime-obj.startTime //get tempo di animazione ha eseguito
Se (trascorso < obj.glidetime) {//if esecuzione è minore di lunghezza specificata
distancepercent=(direction=="down") var? This.curveincrement(Elapsed/obj.glidetime): 1-this.curveincrement(elapsed/obj.glidetime)
var currentclip = (distancepercent*obj.contentheight) + "px"
obj.Style.clip=(Direction=="Down")? "rect (0 auto"+ currentclip +"0)": "rect ("+ currentclip +"auto auto 0)"
finestra ["glidetimer" +obj.id] = setTimeout (function () {dropdowncontent.slideengine (obj, direzione)}, 10)
}
else {//if animazione finito
obj.Style.clip="Rect (0 auto auto 0)"
}
},
Nascondi: function(activeobj, subobj, e) () {
Se (! dropdowncontent.isContained (activeobj, e)) {
finestra ["hidetimer" + subobj.id]=setTimeout(function() () {
subobj.Style.Visibility="hidden"
subobj.Style.Left=subobj.Style.top=0
clearTimeout(window["glidetimer_"+subobj.id])
}, dropdowncontent.hidedivmouseout[1])
}
},
hidediv:function(subobjid) () {
Document. getElementById (subobjid).style.visibility = "hidden"
},
ajaxconnect:function(PageUrl, divid) () {
var page_request = false
var bustcacheparameter = ""
Se (finestra. XMLHttpRequest) / / se Mozilla, IE7, Safari ecc
page_request = new XMLHttpRequest)
ElseIf (finestra. ActiveXObject) {/ / if IE6 o qui sotto
try {
page_request = nuovo ActiveXObject("Msxml2.XMLHTTP")
}
catch (e) {
try {
page_request = nuovo ActiveXObject
}
catch (e) {}
}
}
altro
restituire false
Document. getElementById (divId). InnerHtml = questo //Display .ajaxloadingmsg "il recupero messaggio di pagina"
page_request.onreadystatechange=function() {dropdowncontent.loadpage (page_request, divId)}
Se (this.ajaxbustcache) //if busto memorizzazione nella cache della pagina esterna
bustcacheparameter=(PageUrl.IndexOf("?")! =-1)? "&" + nuovo Date().getTime(): "?" + Date().getTime() nuovo
page_request.Open ('GET', pageurl + bustcacheparameter, true)
page_request.Send(null)
},
LoadPage:function(page_request, divid) () {
Se (page_request.readyState = = 4 & & (page_request.status==200 | | window.location.href.indexOf("http")==-1)) {
Document. getElementById (divId). InnerHtml = page_request.responseText
}
},
init:function(AnchorID, POS, glidetime, revealbehavior) () {
var anchorobj=document.getElementById(anchorid)
Se (anchorobj)
var subobj=document.getElementById(anchorobj.getAttribute("rel"))
Se (! anchorobj | |! subobj)
ritorno
var subobjsource=anchorobj.getAttribute("rev")
Se (subobjsource! = null & & subobjsource! = "")
This.ajaxconnect (subobjsource, anchorobj.getAttribute("rel"))
subobj.dropposition=pos.Split("-")
subobj.glidetime=glidetime | | 1000
subobj.Style.Left=subobj.Style.top=0
Se (typeof revealbehavior = = "undefined" | | revealbehavior = = "mouseover") {
anchorobj.onmouseover=function(e) {dropdowncontent.show (questo, subobj, e)}
anchorobj.onmouseout=function(e)

3

Salvare il documento all'interno della cartella che contiene la pagina Web che si desidera visualizzare la pagina sovrapposta su. Digitare "overlapping.js" come nome del file per modificarne il tipo di JavaScript.

4

Aprire la pagina Web in un editor HTML o un editor di testo. Inserire il codice tra la "testa >" e "< / head >" tag per inserire lo script:

< script type = "text/javascript" src="overlapping.js" >
< / script >

5

Inserire questo codice tra "< corpo >" e "< / body >" tag per inserire il link che attiva la pagina sovrapposta:

< p align = "right" stile = "margin-top: 400px" > sovrapposizione pagina: < un href = "il www.example.com" id = "contentlink" rel = "subcontent2" > Click link per visualizzare < /a >< / p >

< DIV id = "subcontent2" style = "position: absolute; visibilità: nascosto; confine: 9px nero a tinta unita; background-color: giallo-chiaro; Larghezza: 350px; Altezza: 120px; padding: 4px; " >

Inserire qui il codice pagina sovrapposti

< / DIV >

< script type = "text/javascript" >
dropdowncontent.init ("contentlink", "superiore sinistro", 300, "click")
< / script >

Sostituire "400px" con la dimensione della tua pagina sovrapposto. Sostituire "il www.example.com" con un link alla tua pagina sovrapposto.

6

Sostituire il segnaposto "//Insert sovrapposizione codice pagina qui" con il codice HTML utilizzato per formattare la pagina sovrapposta. Salvare la pagina Web e caricarlo nel tuo browser per testare la nuova pagina di sovrapposizione di AJAX.