CSS | ||
TABLE.wi_ { BACKGROUND:#D0D0D0;BORDER:1px solid;BORDER-COLOR:#FFFFFF #808080 #808080 #FFFFFF; } TD.wi_ti { WIDTH:100%;COLOR:#FFFFFF;FONT:12px verdana,arial,helvetica,sans-serif; } |
||
Einzubindende Module | ||
dom.js | DOM-Hilfsfunktionen | |
w_evmo.js | Maus-Events | |
Grafik-Ressourcen | ||
img/b14Ws1.gif | Minimieren-Button (für minimierbare Fenster) | |
img/b14Ws2.gif | Normal-Button (für minimierbare Fenster) | |
img/b14Wcl.gif | Schließen-Button (für schließbare Fenster) | |
img/i10Grip.gif | Gripper (für größenänderbare Fenster) |
var w = new W_Window();Dabei können bis zu 6 optionale Parameter angegeben werden:
var w = new W_Window(FLAGS, TITEL, INNENBREITE, INNENHÖHE, XPOS, YPOS);
Parameter | Typ | Bedeutung |
FLAGS | Integer | Bit 0 (+1): Fenster ist verschiebbar Bit 1 (+2): Fenstergröße ist änderbar (erzeugt Statuszeile mit Gripper) Bit 2 (+4): Arbeitsbereich mit automatischen Scrollbars (nur bei größenänderbarem Fenster) Bit 3 (+8): Fenster schließbar (erzeugt Schließen-Button in Titelleiste) Bit 4 (+16): (reserviert) Bit 5 (+32): Fenster minimierbar (erzeugt Minimieren/Normal-Button in Titelleiste) Bit 6 (+64): (reserviert) Bit 7 (+128): Fenster besitzt Toolbar-Bereich (über Arbeitsbereich) |
TITEL | String | Beschriftung der Titelleiste. |
INNENBREITE | Integer | Breite des Arbeitsbereichs (wird geclippt, so dass sie mindestens 64 Pixel beträgt). Falls nicht angegeben, wird eine Standardbreite von 200 Pixeln eingestellt. |
INNENHÖHE | Integer | Höhe des Arbeitsbereichs (wird geclippt, so dass sie mindestens 32 Pixel beträgt). Falls nicht angegeben, wird eine Standardhöhe von 120 Pixeln eingestellt. |
XPOS | Integer | X-Position des Fensters (bezogen auf den linken Rand des Dokuments). Falls nicht angegeben, wird das Fenster horizontal zentriert. |
YPOS | Integer | Y-Position des Fensters (bezogen auf den oberen Rand des Dokuments). Falls nicht angegeben, wird das Fenster vertikal zentriert. |
var w = new W_Window(1, 'Ergebnisse 2007'); // verschiebbar w.Icon('img/Page.gif', 16); // Icon definieren w.Embed(tabelle); // Tabelle einbetten
function ObjIsOrIn(o,op) { if (!o||!op) return false; do { if (o==op) return true; } while (o=o.parentNode); return false; } function DocMoDn(evt) { if (!aWins) return true; evt=evt||window.event; var i,o=evt.target||evt.srcElement; for (i=0;i<4;i++) if (aWin[i]) if (ObjIsOrIn(o,aWin[i].Obj())) { document.body.appendChild(aWin[i].Obj()); break; } return true; } document.onmousedown=DocMoDn;
Eigenschaften | Beschreibung |
Inner() | Liefert den Arbeitsbereich des Fensters. |
InnerX() | Liefert die absolute X-Position des Arbeitsbereichs (bezogen auf den linken Rand des Dokuments). |
InnerXeff() | Liefert die absolute X-Position des Inhalts des Arbeitsbereichs (bezogen auf den linken Rand des Dokuments) unter Berücksichtigung der Arbeitsbereichs-Scrollposition. |
InnerY() | Liefert die absolute Y-Position des Arbeitsbereichs (bezogen auf den oberen Rand des Dokuments). |
InnerYeff() | Liefert die absolute Y-Position des Inhalts des Arbeitsbereichs (bezogen auf den oberen Rand des Dokuments) unter Berücksichtigung der Arbeitsbereichs-Scrollposition. |
Obj() | Liefert das HTML-Basisobjekt (eine Tabelle) des Fensters. |
OuterH() | Liefert die Höhe des Fensters. |
OuterW() | Liefert die Breite des Fensters. |
Methoden | |
CBClose() | Definiert eine Callback-Funktion, die beim Schließen des Fensters aufgerufen wird. Dies betrifft lediglich schließbare Fenster. Parameter:
|
CBSized() | Definiert eine Callback-Funktion, die bei Größenänderung des Fensters aufgerufen wird. Dies betrifft lediglich größenänderbare Fenster. Parameter:
|
Center() | Zentriert das Fenster auf dem Bildschirm. |
Embed() | Bettet ein Element in den Arbeitsbereich ein und liefert es zurück. Parameter:
|
EmbedTb() | Bettet eine (horizontale) Toolbar ein und liefert diese zurück. Parameter:
|
Icon() | Liefert Icon-Image. Parameter:
|
InnerBg() | Liefert das Hintergrundbild (src) des Arbeitsbereichs. Parameter:
|
InnerCol() | Liefert die Hintergrundfarbe des Arbeitsbereichs. Parameter:
|
InnerH() | Liefert die Höhe des Arbeitsbereichs. Parameter:
|
InnerW() | Liefert die Breite des Arbeitsbereichs. Parameter:
|
Kill() | Entfernt das Fenster (respektive dessen HTML-Basiselement, eine Tabelle) aus dem Dokument und liefert das HTML-Basiselement zurück. |
OuterX() | Liefert die X-Position des Fensters (bezogen auf den linken Rand des Dokuments). Parameter:
|
OuterY() | Liefert die Y-Position des Fensters (bezogen auf den oberen Rand des Dokuments). Parameter:
|
Title() | Liefert den Fenstertitel. Parameter:
|
TitleB() | Liefert Bool'schen Wert für Fettschrift des Fenstertitels. Parameter:
|
TitleBg() | Liefert das Hintergrundbild (src) des Fenstertitels. Parameter:
|
TitleBgCol() | Liefert die Hintergrundfarbe des Fenstertitels. Parameter:
|
TitleTxCol() | Liefert die Textfarbe des Fenstertitels. Parameter:
|
Visible() | Liefert Bool'schen Wert für Sichtbarkeit des Fensters. Parameter:
|
W_Window = function(Of,Oti,CAw,CAh,Ox,Oy) { var CAwmin=64,CAhmin=32; Of=Of||0; Oti=Oti||''; CAw=Math.max(CAw||200,CAwmin); CAh=Math.max(CAh||120,CAhmin); switch (undefined) { case Ox: Ox=((document.all?document.body.offsetWidth:window.innerWidth)-CAw-8)>>1; case Oy: Oy=((document.all?document.body.offsetHeight:window.innerHeight)-CAh-32)>>1; } var oMain=null,imIc=null,imWs=null,imCl=null,taTi=null,dvTi=null,trCA=null,dvTb=null,dvCA=null,trSb=null,bVis=true; var cbSized=null,cbClose=null,wIc=0,dTi=4,self=this; //---- move function movMoDn(evt) { if (!GetDownPos(evt)) return true; DragFuMv=movMoMv; DragFuUp=movMoUp; return false; } function movMoMv(evt) { var a=DocMoDg(evt); if (!a||a[0]<0||a[1]<0) return true; oMain.style.left=Ox+(a[0]-DownX); oMain.style.top=Oy+(a[1]-DownY); return false; } function movMoUp() { Ox=parseInt(oMain.style.left); Oy=parseInt(oMain.style.top); } var w0,h0; //---- size function sizMoDn(evt) { if (!GetDownPos(evt)) return true; DragFuMv=sizMoMv; w0=CAw; h0=CAh; return false; } function sizMoMv(evt) { var a=DocMoDg(evt); if (!a) return true; var w,h,b; if ((w=Math.max(w0+(a[0]-DownX),CAwmin))!=CAw) { dvTi.style.width=w-dTi; if (dvTb) dvTb.style.width=w; dvCA.style.width=CAw=w; b=true; } if ((h=Math.max(h0+(a[1]-DownY),CAhmin))!=CAh) { dvCA.style.height=CAh=h; b=true; } if (b&&cbSized) cbSized(CAw,CAh); return false; } //---- btn function togWsiz() { var i=((Of^=0x18)>>3)&3; imWs.src='img/b14Ws'+(i^3)+'.gif'; imWs.title=(i&2)?' Minimieren ':' Normalgröße '; trCA.style.display=(i&2)?'':'none'; if (trSb) trSb.style.display=(i&2)?'':'none'; } function close() { if (cbClose) cbClose(self); else Kill(); } //---- init function create() { oMain=$A(null,['table.wi_',{'cellSpacing':1,'cellPadding':0}]); var o=oMain.style; o.position='absolute'; o.left=Ox; o.top=Oy; var tb=$A(oMain,['tbody']); var tr=$A(tb,['tr']); var td=$A(tr,['td']); if (Of&1) { td.style.cursor='move'; td.onmousedown=movMoDn; } var tb2=$A(taTi=$A(td,['table',{'bgColor':'#9932CC','cellSpacing':0,'cellPadding':1}]),['tbody']); (imIc=$A($A(tr=$A(tb2,['tr']),['td']),['img'])).style.display='none'; (dvTi=$A($A(tr,['td.wi_ti']),['div', Oti.replace(/(\s+)/g,'\xa0')])).style.overflow='hidden'; if (Of&32) { dTi+=16; imWs=$A($A(tr,['td']),['img']); imWs.src='img/b14Ws1.gif'; imWs.style.cursor='pointer'; imWs.title=' Minimieren '; imWs.onclick=togWsiz; } if (Of&8) { dTi+=16; imCl=$A($A(tr,['td']),['img']); imCl.src='img/b14Wcl.gif'; imCl.style.cursor='pointer'; imCl.title=' Schließen '; imCl.onclick=close; } td=$A(trCA=$A(tb,['tr']),['td']); if (Of&128) { dvTb=$A(td,['div']); o=dvTb.style; o.width=CAw; o.overflow='hidden'; } if (Of&2) { dvCA=$A(td,['div']); o=dvCA.style; o.width=CAw; o.height=CAh; o.overflow=(Of&4)?'auto':'hidden'; o=$A(td=$A(trSb=$A(tb,['tr']),['td',{'align':'right'}]),['img',{'src':'img/i10Grip.gif'}]); o.style.cursor='se-resize'; o.onmousedown=sizMoDn; } else dvCA=td; dvTi.style.width=CAw-dTi; } //---- Public this.Obj = function() { return oMain; } this.Visible = function(b) { if (b!=undefined) oMain.style.display=(bVis=!!b)?'':'none'; return bVis; } this.Icon = function(s,w) { if (s!=undefined) { if (CAwmin-(dTi=dTi-wIc+(w=w?w:wIc))<1) dTi=CAwmin-1; wIc=w; dvTi.style.width=CAw-dTi; imIc.src=s; imIc.style.display=s?'':'none'; } return imIc; } this.Title = function(t) { if (t!=undefined) dvTi.firstChild.data=(t+'').replace(/(\s+)/g,'\xa0'); return dvTi.firstChild.data; } this.TitleB = function(b) { if (b!=undefined) dvTi.style.fontWeight=b?'bold':''; return dvTi.style.fontWeight; } this.TitleTxCol = function(c) { if (c!=undefined) dvTi.style.color=c; return dvTi.style.color; } this.TitleBgCol = function(c) { if (c!=undefined) taTi.style.backgroundColor=c; return taTi.style.backgroundColor; } this.TitleBg = function(s) { if (s!=undefined) taTi.style.background='url('+s+')'; return taTi.style.background; } this.EmbedTb = function(tb) { if (dvTb&&tb) dvTb.appendChild(tb); return tb; } this.Embed = function(e) { if (e) dvCA.appendChild(e); return e; } this.Inner = function() { return dvCA; } this.InnerX = function() { return Ox+dvCA.offsetParent.offsetLeft; } this.InnerY = function() { return Oy+dvCA.offsetParent.offsetTop; } this.InnerXeff = function() { return Ox+dvCA.offsetParent.offsetLeft-dvCA.scrollLeft; } this.InnerYeff = function() { return Oy+dvCA.offsetParent.offsetTop+dvCA.offsetTop-dvCA.scrollTop; } this.InnerW = function(w) { if (w!=undefined&&(w=Math.max(w,64))!=CAw) { dvTi.style.width=w-dTi; if (dvTb) dvTb.style.width=w; dvCA.style.width=CAw=w; } return CAw; } this.InnerH = function(h) { if (h!=undefined&&(h=Math.max(h,32))!=CAh) dvCA.style.height=CAh=h; return CAh; } this.InnerCol = function(c) { if (c!=undefined) dvCA.style.backgroundColor=c; return dvCA.style.backgroundColor; } this.InnerBg = function(s) { if (s!=undefined) dvCA.style.background='url('+s+')'; return dvCA.style.background; } this.OuterX = function(x) { if (x!=undefined) oMain.style.left=Ox=x; return Ox; } this.OuterY = function(y) { if (y!=undefined) oMain.style.top=Oy=y; return Oy; } this.OuterW = function() { return parseInt(oMain.offsetWidth); } this.OuterH = function() { return parseInt(oMain.offsetHeight); } this.Center = function() { oMain.style.left=(Ox=((document.all?document.body.offsetWidth:window.innerWidth)-this.OuterW())>>1); oMain.style.top=(Oy=((document.all?document.body.offsetHeight:window.innerHeight)-this.OuterH())>>1); } this.Kill = function() { return $D(oMain); } this.CBSized = function(fu,b) { if ((cbSized=fu||null)&&b) cbSized(CAw,CAh); } this.CBClose = function(fu) { cbClose=fu||null; } create(); }
template |