Tutorial på Overlappende sider med AJAX

Tutorial på Overlappende sider med AJAX


AJAX, en forkortelse for Asynchronous Javascript og XML, er mer enn et programmeringsspråk. I motsetning til tradisjonelle programmeringsspråk som Java og PHP, er AJAX kunne utveksle data med serveren og oppdatere deler av en nettside uten å laste hele siden. Space er svært viktig, slik at du kan bruke AJAX til å vise et overlappende side på eksisterende nettside ved å klikke på en liten link. Overlapp side kan vise alt fra en login form til en annonse.

Bruksanvisning

1 Åpne et tekstredigeringsprogram, for eksempel Notisblokk eller WordPad, og sette inn denne koden:

Var dropdowncontent = {
disableanchorlink: true, // når brukeren klikker på anker link, bør knytte seg deaktiveres (alltid sant hvis "revealbehavior" ovenfor satt til "klikk")
hidedivmouseout: [true, 200], // Set gjemmer oppførsel innen Drop Down DIV selv: [hide_div_onmouseover ?, miliseconds_before_hiding]
ajaxloadingmsg: "Legge til innhold Vennligst vent ....", // HTML vise mens AJAX siden blir feched, hvis det er aktuelt
ajaxbustcache: true, // Bust cache ved henting av AJAX sider?

getposOffset: funksjon (hva, offsettype) {
tilbake (what.offsetParent)? hva [offsettype] + this.getposOffset (what.offsetParent, offsettype): hva [offsettype]
}
isContained: function (m, e) {
Var e = window.event || e
Var c = e.relatedTarget || ((E.type == "mouse") e.fromElement: e.toElement)
while (c && c! = m) try {c = c.parentNode} catch (e) {c = m}
if (c == m)
return true
ellers
return false
}
show: funksjon (anchorobj, subobj, e) {
if (! this.isContained (anchorobj, e) || (e && e.type == "klikk")) {
Var e = window.event || e
if (e.type == "klikk" && subobj.style.visibility == "synlig") {
subobj.style.visibility = "skjult"
komme tilbake
}
Var horizontaloffset = (subobj.dropposition [0] == "venstre")? - (Subobj.offsetWidth-anchorobj.offsetWidth): 0 // beregne bruker lagt vannrett forskyvning
Var verticaloffset = (subobj.dropposition [1] == "top")? -subobj.offsetHeight: anchorobj.offsetHeight // beregne bruker lagt vertikal forskyvning
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 (0 auto 0 0)" // skjule rullegardin utgangspunktet via klipping
subobj.style.visibility = "synlig"
subobj.startTime = new Date (). getTime ()
subobj.contentheight = parseInt (subobj.offsetHeight)
if (typeof vindu [

"hidetimer" + subobj.id]! = "udefinert") // klart tidtaker som skjuler drop down box?
cleartimeout (vinduet [ "hidetimer" + subobj.id])
this.slideengine (subobj, (subobj.dropposition [1] == "top") "opp": "ned")
}
}
curveincrement: function (prosent) {
avkastning (en-Math.cos (prosent * Math.PI)) / 2 // retur cos kurve basert verdi fra en prosentandel inngang
}
{Dropdowncontent.hide (subobj, subobj, e)}
if (this.disableanchorlink) anchorobj.onclick = function () {return false}
}
ellers
anchorobj.onclick = function (e) {dropdowncontent.show (dette, subobj, e); return false}
if (this.hidedivmouseout [0] == true) // skjule rullegardin DIV når musen beveges ut av det?
subobj.onmouseout = function (e) {dropdowncontent.hide (dette, subobj, e)}
}
}

2 Tilføy denne koden til dokumentet:

slideengine: function (obj, retning) {
Var gått = new Date () getTime () -. obj.startTime // få tid animasjon har kjørt
if (medgått <obj.glidetime) {// hvis tiden går er mindre enn spesifisert lengde
Var distancepercent = (retning == "ned")? this.curveincrement (medgått / obj.glidetime): 1-this.curveincrement (forløpt / obj.glidetime)
Var currentclip = (distancepercent * obj.contentheight) + "px"
obj.style.clip = (retning == "ned")? "Rect (0 auto" + currentclip + "0)": "rect (" + currentclip + "auto auto 0)"
vinduet [

"glidetimer" + obj.id] = setTimeout (function () {dropdowncontent.slideengine (obj, retning)}, 10)
}
else {// hvis animasjon ferdig
obj.style.clip = "rect (0 auto auto 0)"
}
}
skjul: function (activeobj, subobj, e) {
if (! dropdowncontent.isContained (activeobj, e)) {
vinduet [ "hidetimer" + subobj.id] = setTimeout (function () {
subobj.style.visibility = "skjult"
subobj.style.left = subobj.style.top = 0
cleartimeout (vinduet [ "glidetimer _" + subobj.id])
}, Dropdowncontent.hidedivmouseout [1])
}
}
hidediv: function (subobjid) {
document.getElementById (subobjid) .style.visibility = "skjult"
}
ajaxconnect: function (PAGEURL, divId) {
Var page_request = false
Var bustcacheparameter = ""
if (window.XMLHttpRequest) // hvis Mozilla, IE7, Safari etc
page_request = new XMLHttpRequest ()
else if (window.ActiveXObject) {// hvis IE6 eller under
try {
page_request = new ActiveXObject ( "Msxml2.XMLHTTP")
}
catch (e) {
prøve{
page_request = new ActiveXObject ( "Microsoft.XMLHTTP")
}
catch (e) {}
}
}
ellers
return false
document.getElementById (divId) .innerHTML = this.ajaxloadingmsg // Display "henter side melding"
page_request.onreadystatechange = function () {dropdowncontent.loadpage (page_request, divId)}
if (this.ajaxbustcache) // hvis bust caching av ekstern side
bustcacheparameter = (pageurl.indexOf () = "?" - 1)? "&" + Nye Date () getTime (). "?". + Nye Date () getTime ()
page_request.open ( 'GET', PAGEURL + bustcacheparameter, true)
page_request.send (null)
}
loadpage: function (page_request, divId) {
if (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)
if (anchorobj)
Var subobj = document.getElementById (anchorobj.getAttribute ( "rel"))
if (! anchorobj ||! subobj)
komme tilbake
Var subobjsource = anchorobj.getAttribute ( "rev")
if (subobjsource! = null && subobjsource! = "")
this.ajaxconnect (subobjsource, anchorobj.getAttribute ( "rel"))
subobj.dropposition = pos.split ( "-")
subobj.glidetime = glidetime || 1000
subobj.style.left = subobj.style.top = 0
if (typeof revealbehavior == "udefinert" || revealbehavior == "mouse") {
anchorobj.onmouseover = function (e) {dropdowncontent.show (dette, subobj, e)}
anchorobj.onmouseout = function (e)

3 Lagre dokumentet i mappen som inneholder den nettsiden du vil vise overlappende side på. Skriv "overlapping.js" som navnet på filen for å endre type til Javascript.

4 Åpne websiden i en HTML-editor eller en teksteditor. Sett inn denne koden mellom "head>" og "</ head>" koder for å sette inn skriptet:

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

5 Sett inn denne koden mellom "<body>" og "</ body>" koder for å plassere den koblingen som utløser den overlappende side:

<P align = "right" style = "margin-top: 400px"> Overlappende side: <a href="www.example.com" id="contentlink" rel="subcontent2"> Klikk koblingen for å vise </a> </ p>

<Div id = "subcontent2" style = "position: absolute; visibility: hidden; border: 9px solid black; background-color: lysegult, bredde: 350 piksler; height: 120px; padding: 4px;">

// Sett overlapp side kode her

</ Div>

<Script type = "text / javascript">
dropdowncontent.init ( "contentlink", "venstre-top", 300, "klikk")
</ Script>

Erstatt "400px" med størrelsen på overlappende side. Erstatt "www.example.com" med en link til overlappende side.

6 Bytt ut "// Sett overlapp siden koden her" plassholder med HTML-koden som brukes for å formatere den overlappende side. Lagre nettsiden og legger det i nettleseren din for å teste den nye AJAX overlappende side.