Dieser Artikel beschreibt die Methode zur Implementierung von schwebenden Fenstern, die von JS skaliert, gezogen, geschlossen und minimiert werden können. Teilen Sie es für Ihre Referenz. Die spezifische Implementierungsmethode lautet wie folgt:
Kopieren Sie den Code wie folgt: <! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<kopf>
<meta http-äquiv = "content-type" content = "text /html; charset = utf-8" />
<titels> js implementiert schwimmende Fenster, die skaliert, geschleppt, geschlossen und minimiert werden können </title>
</head>
<style type = "text/css">
.divWindow {Word-Wrap: Break-Wort; Position: absolut; Überlauf: versteckt;}
.Divbar {Grenze:#000000 1px durchgezogen; Position: absolut; Grenzboot:#000000 1px durchgeführt; Breite: 100%; Höhe: 20px; Hintergrundfarbe:#0099ff; Cursor: Hand; Line-Height: 20px;}
.divChange {Position: absolut; rechts: 25px; Schriftgröße: 10PT;}
.divclose {Position: absolut; rechts: 5px; Schriftgröße: 11pt;}
.divtitle {Position: Absolute; links: 5px; Schriftgröße: 10PT; Weißraum: nowrap; text-overflow: ellipsis; -O-text-overflow: ellipsis; Überfluss: versteckt;}
.DivContent {Border:#000000 1PX Solid; Border-Top:#000000 0px Solid; Position: absolut; Top: 20px; Breite: 100%; Hintergrundfarbe: #fffff; Überlauf-y: Auto;
ScrollBar-Base-Color: #fffff; Scrollbar-Arrow-Color: #999999; Scrollbar-Face-Color: #eeeee; Scrollbar-Highlight-Color: #eeeee;
ScrollBar-Shadow-Color: #eeeee; ScrollBar-3Dlight-Color: #fffff; Scrollbar-Track-Color: #fffff; ScrollBar-Darkshadow-Color: #ccccc;}
.divresize {Höhe: 7px; Breite: 7px; Überlauf: versteckt; Hintergrundfarbe:#0000ff; Position: absolut; unten: 6px; Rechts: 6PX; Cursor: NW-RESIZE}
.Diviframe {Höhe: 100%; Breite: 100%;}
</style>
<script Language = "JavaScript">
var zindex = 0 // globale Variablen
Funktion DragClass (Name, Titel, Inhalt, links, oben, Breite, Höhe) {
var ismouseDown = false;
var maximum = false;
var offx = 0; // Setzen Sie die X -Koordinate des Grabpunktes
var Offy = 0; // Setzen Sie die Y -Koordinate des Grabpunktes
var oldleft; // Speichern Sie die X -Koordinaten im normalen Zustand
var Oldtop; // Speichern Sie die Y -Koordinaten im normalen Zustand
this.mouseDown = function () {// Drücken Sie den Drag -Punkt
Bar.setCapture (); // Crawl einstellen
Offx = ParseInt (Event.ClientX) -ParseInt (Window.Style.Left);
Offy = ParseInt (Event.Clienty) -ParseInt (window.style.top);
ismouseDown = wahr;
if (window.style.zindex <= zindex) {
Zindex ++;
Window.style.zindex = zindex;
}
}
this.mousemove = function () {// Ziehen Sie das Fenster
if (ismouseDown &&! Maximum) {
Bar.style.cursor = 'move' '
Window.style.left = event.clientX-offx;
Window.style.top = event.clienty-offy;
if (window.style.zindex <= zindex) {
Zindex ++;
Window.style.zindex = zindex;
}
}
}
this.mouseUp = function () {// Die Schaltfläche loslassen
Bar.releasecapture (); // Crawling abbrechen
Bar.style.cursor = 'Hand';
if (parseInt (window.style.top) <0) {
Window.style.top = '0px';
}
if (parseInt (window.style.left) <0) {
Window.style.left = '0px';
}
ismouseDown = false;
}
this.dblclick = function () {// Doppelklick, um zu minimieren, um zu minimieren
if (! Maximum) {
oldleft = window.style.left; // Speichern Sie die X -Koordinaten im normalen Zustand
oldTop = window.style.top; // Speichern Sie die Y -Koordinaten im normalen Zustand
Window.style.left = '0px';
Window.style.top = '0px';
Window.style.width = document.body.clientwidth; // Der sichtbare Bereich der Webseite ist breit
Title.style.width = (document.body.clientwidth-40)+'px'; // Setzen Sie die Titellänge
Resize.style.display = 'none';
if (Änderung.Innertext == '-') {
Fenster.Style.Height = '100%';
Content.style.height = document.body.clientHeight-20; // sichtbare Flächenbreite der Webseite - Titelhöhe
}anders{
Window.style.height = '20px';
}
Maximum = wahr;
}anders{
Window.style.left = Oldleft;
Window.Style.top = OldTop;
Window.style.width = width+'px';
Title.style.width = (width-40)+'px';
Größen Sie die Größe.Style.Display = '';
if (Änderung.Innertext == '-') {
Window.style.height = Höhe+'px';
Content.Style.Height = ParseInT (Höhe-20)+'PX';
}anders{
Window.style.height = '20px';
}
maximal = falsch;
}
if (window.style.zindex <= zindex) {
Zindex ++;
Window.style.zindex = zindex;
}
}
this.changeWindow = function () {// Verkleinern Sie das Fenster
event.cancelBubble = true;
if (Änderung.Innertext == '-') {
Window.style.height = '20px';
Änderung.Innertext = '□';
Content.style.display = 'none';
Resize.style.display = 'none';
}anders{
if (maximal) {
Fenster.Style.Height = '100%';
Content.style.display = '';
Größen Sie die Größe.Style.Display = '';
Content.style.height = document.body.clientHeight-20; // sichtbare Flächenbreite der Webseite - Titelhöhe
}anders{
Window.style.height = Höhe+'px';
Content.style.display = '';
Größen Sie die Größe.Style.Display = '';
Content.Style.Height = ParseInT (Höhe-20)+'PX';
}
Änderung.Innertext = '-';
}
}
var window = document.createelement ("div");
Window.id = "divwindow"+ name;
Window.className = "divwindow";
Window.style.left = links+'px';
Window.style.top = top+'px';
Window.style.width = width+'px';
Window.style.height = Höhe+'px';
Window.onclick = function () {
if (parseInt (window.style.zindex) <= zindex) {
Zindex ++;
Window.style.zindex = zindex;
}
}
this.Window = Fenster;
// öffentliche Attribute, die außerhalb der Klasse betrieben werden können; Wenn Sie außerhalb der Klasse arbeiten möchten, können Sie das Element in öffentliche Attribute ändern
var bar = document.createelement ("div");
Bar.id = "divbar"+name;
Bar.onSelectStart = "return false";
Bar.classname = "divbar";
Bar.onmousedown = this.mouseDown;
Bar.ondblclick = this.dblclick;
Bar.onmousemove = this.mousemove;
Bar.onmouseUp = this.mouseUp;
Fenster.AppendChild (Bar);
var title = document.createelement ("span");
Title.id = "Divtitle"+ Name;
Title.classname = "divtitle";
Title.style.width = (width-40)+'px'; // Adaptive Titellänge
Title.inNertext = title;
Bar.AppendChild (Titel);
var change = document.createelement ("span");
Änderung.id = "Divchange"+ Name;
Change.className = "Divchange";
Änderung.Innertext = "-";
Änderung.ondblclick = this.changeWindow;
Änderung.onclick = this.changeWindow;
Bar.AppendChild (Änderung);
var close = document.createelement ("span");
Close.id = "divclose"+ name;
Close.onclick = function () {
Window.style.display = 'none';
}
Close.className = "divclose";
Close.inNertext = "×";
Bar.Appendchild (schließen);
var content = document.createelement ("div");
Content.id = "Divcontent"+ Name;
Content.className = "Divcontent"
Content.innerhtml = content;
Content.Style.Height = ParseInT (Höhe-20)+'PX';
Window.AppendChild (Inhalt);
var resize = document.createelement ("div");
Resize.classname = "divesize";
Gröze.onmousedown = function () {
if (window.style.zindex <= zindex) {
Zindex ++;
Window.style.zindex = zindex;
}
Größen Sie Größen.SetCapture ();
ismouseDown = wahr;
}
Resize.onmousemove = function () {
if (ismouseDown &&! Maximum)
{
width = parseInt (event.clientX) -ParseInt (Fenster.Style.Left) +5;
Höhe = ParseInt (Event.Clienty) -ParseInt (Fenster.Style.top) +5;
if (width> 100) {// Setzen Sie die minimale Breite
Window.style.width = width+'px';
Title.style.width = (width-40)+'px';
}
if (Höhe> 100) {// Setzen Sie die minimale Höhe
Window.style.height = Höhe+'px';
Content.Style.Height = ParseInT (Höhe-20)+'PX';
}
}
}
Resize.onmouseUp = function () {
Größen Sie die Größe. Releascapture ();
ismouseDown = false;
}
Window.AppendChild (Größenänderung);
var iframe = document.createelement ("iframe"); // Fügen Sie einen Iframe hinzu, blockieren Sie die <E -Select> -Kontrolle unter IE6.0
Iframe.className = "diviframe";
Window.AppendChild (iframe);
document.body.Appendchild (Fenster);
}
</script>
<body>
<Script>
// DragClass (ID, Fenstertitel, Inhalt, X -Koordinate, Y -Koordinate, Breite, Länge)
var c1="Window 1 window 1 window 1 window 1 window 1 window 1 window 1 window 1 window 1 window 1 window 1 window 1 window 1 window 1 window 1 window 1 window 1 window 1 window 1 window 1 window 1 window 1 window 1 window 1 window 1 window 1 window 1 window 1 window 1 window 1 window 1 window 1 window 1 window 1 window 1 window 1 window 1 window 1 window 1 window 1 window 1 window 1 window 1 window 1 window 1 window 1 window 1 window 1";
objwin1 = neuer DragClass ('Win1', 'Drag Window 1', C1,0,150,300,300);
var c2="Window 2 window 2 window 2 window 2 window 2 window 2 window 2 window 2 window 2 window 2 window 2 window 2 window 2 window 2 window 2 window 2 window 2 window 2 window 2 window 2 window 2 window 2 window 2 window 2 window 2 window 2 window 2 window 2 window 2 window 2 window 2 window 2 window 2 window 2 window 2 window 2 window 2 window 2 window 2 window 2 window 2";
objwin2 = neuer DragClass ('Win2', 'Drag Window 2', C2,350,150,300.300);
var objwin3;
Funktion openWin () {
if (objwin3 == null) {
var c3="123 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 window Window 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 window Window 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 window
objwin3 = neuer DragClass ('Win3', C3, C3.700.150.300.300);
}anders{
if (objwin3.window.style.display == 'none') {
Objwin3.Window.Style.Display = '';
}
}
}
</script>
<Eingabe type = "button" value = "Pop Up [Fenster 3]" onclick = "openWin ()" />
</body>
</html>
Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.