Cet article décrit la méthode d'implémentation de fenêtres flottantes qui peuvent être mises à l'échelle, traînées, fermées et minimisées par JS. Partagez-le pour votre référence. La méthode de mise en œuvre spécifique est la suivante:
Copiez le code comme suit: <! 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">
<adal>
<meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" />
<Title> JS implémente des fenêtres flottantes qui peuvent être mises à l'échelle, glissées, fermées et minimisées </TITAL>
</ head>
<style type = "text / css">
.DivWindow {Word-Wrap: Break-Word; Position: Absolute; débordement: caché;}
.Divbar {Border: # 000000 1px solide; Position: Absolute; Border-Bottom: # 000000 1px solide; largeur: 100%; hauteur: 20px; fond-couleur: # 0099ff; curseur: main; ligne-hauteur: 20px;}
.DivChange {position: absolu; à droite: 25px; taille de police: 10pt;}
.DivClose {Position: Absolute; droite: 5px; taille de police: 11pt;}
.DivTitle {position: Absolute; Left: 5px; Font-Size: 10pt; White-Space: Nowrap; Text-Overflow: EllipSis; -o-text-overflow: ellipsis; Overflow: Hidden;}
.DivContent {Border: # 000000 1px solide; border-top: # 000000 0px solide; position: absolue; en haut: 20px; largeur: 100%; Color d'arrière-plan: #FFFFF; débordement-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: #cccccc;}
.DivResize {hauteur: 7px; Largeur: 7px; débordement: caché; Color en arrière-plan: # 0000FF; Position: absolue; En bas: 6px; À droite: 6px; curseur: NW-Resize}
.diviframe {hauteur: 100%; largeur: 100%;}
</ style>
<script linguisse = "javascript">
var zindex = 0 // variables globales
fonction dragclass (nom, titre, contenu, gauche, haut, largeur, hauteur) {
var ismousedown = false;
var maximum = false;
var offx = 0; // Définit la coordonnée X du point de saisie
var offy = 0; // Définit la coordonnée y du point de saisie
var oldleft; // enregistre les coordonnées x à l'état normal
var oldtop; // enregistre les coordonnées Y à l'état normal
this.mousedown = function () {// appuyez sur le point de glisser
Bar.setCapture (); // Définit la rampe
offx = parseInt (event.clientx) -ParseInt (window.style.left);
offy = paSeInt (event.clienty) -ParseInt (window.style.top);
Ismousedown = true;
if (window.style.zindex <= zindex) {
zindex ++;
Window.style.zindex = zindex;
}
}
this.mousmove = function () {// faites glisser la fenêtre
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 () {// relâchez le bouton
Bar.releasecapture (); // annuler la rampe
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 () {// double-cliquez pour minimiser
if (! maximum) {
oldleft = window.style.left; // enregistre les coordonnées x à l'état normal
oldtop = window.style.top; // enregistre les coordonnées Y à l'état normal
Window.style.left = '0px';
Window.style.top = '0px';
Window.style.width = document.body.clientwidth; // La zone visible de la page Web est large
Title.style.width = (document.body.clientwidth-40) + 'px'; // définir la longueur du titre
Resize.style.display = 'Aucun';
if (change.innertext == '-') {
Window.style.height = '100%';
Content.style.height = document.body.clientHeight-20; // La largeur de zone visible de la page Web - hauteur de titre
}autre{
Window.style.height = '20px';
}
Maximum = true;
}autre{
Window.style.left = oldLeft;
Window.style.top = oldTop;
Window.style.width = width + 'px';
Title.style.width = (width-40) + 'px';
Resize.style.display = '';
if (change.innertext == '-') {
Window.style.height = height + 'px';
Content.style.height = parseInt (height-20) + 'px';
}autre{
Window.style.height = '20px';
}
maximum = false;
}
if (window.style.zindex <= zindex) {
zindex ++;
Window.style.zindex = zindex;
}
}
this.changewindow = function () {// rétrécir la fenêtre
event.cancelbubble = true;
if (change.innertext == '-') {
Window.style.height = '20px';
Change.innertext = '□';
Content.style.display = 'Aucun';
Resize.style.display = 'Aucun';
}autre{
if (maximum) {
Window.style.height = '100%';
Content.style.display = '';
Resize.style.display = '';
Content.style.height = document.body.clientHeight-20; // La largeur de zone visible de la page Web - hauteur de titre
}autre{
Window.style.height = height + 'px';
Content.style.display = '';
Resize.style.display = '';
Content.style.height = parseInt (height-20) + 'px';
}
Change.innertext = '-';
}
}
var window = document.CreateElement ("div");
Window.id = "divwindow" + name;
Window.classname = "divwindow";
Window.style.left = gauche + 'px';
Window.style.top = top + 'px';
Window.style.width = width + 'px';
Window.style.height = height + 'px';
Window.onclick = function () {
if (parseInt (window.style.zindex) <= zindex) {
zindex ++;
Window.style.zindex = zindex;
}
}
this.window = window;
// Attributs publics, qui peuvent être exploités en dehors de la classe; Si vous souhaitez opérer en dehors de la classe, vous pouvez changer l'élément en attributs publics
var bar = document.CreateElement ("div");
Bar.id = "divbar" + nom;
Bar.onselectstart = "return false";
Bar.classname = "divbar";
Bar.onmousedown = this.mousedown;
Bar.ondblclick = this.dblclick;
Bar.onMouseMove = this.mousmove;
Bar.onMouseUp = this.mouseup;
Window.ApendChild (bar);
var title = document.CreateElement ("Span");
Title.id = "divtitle" + name;
Title.classname = "divtitle";
Title.style.width = (width-40) + 'px'; // Longueur d'adaptation du titre
Title.innerText = title;
Bar.ApendChild (titre);
var change = document.CreateElement ("Span");
Change.id = "divchange" + name;
Change.classname = "divchange";
Change.innertext = "-";
Change.ondblclick = this.changewindow;
Change.OnClick = this.changewindow;
Bar.ApendChild (changement);
var close = document.CreateElement ("Span");
Close.id = "divclose" + nom;
Close.onclick = function () {
Window.style.display = 'Aucun';
}
Close.classname = "divclose";
Close.innertext = "×";
Bar.ApendChild (Close);
var contenu = document.CreateElement ("div");
Contenu.id = "divcontent" + name;
Content.classname = "DivContent"
Contenu.innerhtml = contenu;
Content.style.height = parseInt (height-20) + 'px';
Window.ApendChild (contenu);
var resize = document.CreateElement ("div");
Resize.classname = "divresize";
Resize.onmousedown = function () {
if (window.style.zindex <= zindex) {
zindex ++;
Window.style.zindex = zindex;
}
Resize.setCapture ();
Ismousedown = true;
}
Resize.onmousemove = function () {
if (Ismousedown &&! Maximum)
{
width = paSeInt (event.clientx) -ParseInt (window.style.left) +5;
height = paSeInt (event.clienty) -ParseInt (window.style.top) +5;
if (largeur> 100) {// définir la largeur minimale
Window.style.width = width + 'px';
Title.style.width = (width-40) + 'px';
}
if (hauteur> 100) {// définir la hauteur minimale
Window.style.height = height + 'px';
Content.style.height = parseInt (height-20) + 'px';
}
}
}
Resize.onmouseup = function () {
Redimensit.releSeaCapture ();
ismousedown = false;
}
Window.ApendChild (redimensionner);
var iframe = document.createElement ("iframe"); // Ajoutez un iframe, bloquez le contrôle <lect> sous IE6.0
Iframe.classname = "diviframe";
Window.ApendChild (iframe);
document.body.appendChild (fenêtre);
}
</cript>
<body>
<cript>
// dragclass (id, titre de fenêtre, contenu, coordonnée x, coordonnée y, largeur, longueur)
var c1 = "fenêtre 1 fenêtre 1 fenêtre 1 fenêtre 1 fenêtre 1 fenêtre 1 fenêtre 1 fenêtre 1 fenêtre 1 fenêtre 1 fenêtre 1 fenêtre 1 fenêtre 1 fenêtre 1 fenêtre 1 fenêtre 1 fenêtre 1 fenêtre 1 fenêtre 1 fenêtre 1 fenêtre 1 fenêtre 1 fenêtre 1 fenêtre 1 fenêtre 1 fenêtre 1 fenêtre 1 fenêtre 1 fenêtre 1 fenêtre 1 fenêtre 1 fenêtre 1 fenêtre 1 fenêtre 1 fenêtre 1 fenêtre 1 fenêtre 1";
objwin1 = new DragClass ('Win1', 'Drag Window 1', C1,0,150,300,300);
var C2 = "fenêtre 2 fenêtre 2 fenêtre 2 fenêtre 2 fenêtre 2 fenêtre 2 fenêtre 2 fenêtre 2 fenêtre 2 fenêtre 2 fenêtre 2 fenêtre 2 fenêtre 2 fenêtre 2 fenêtre 2 fenêtre 2 fenêtre 2 fenêtre 2 fenêtre 2 fenêtre 2 fenêtre 2 fenêtre 2 fenêtre 2 fenêtre 2 fenêtre 2 fenêtre 2 fenêtre 2 fenêtre 2 fenêtre 2 fenêtre 2 fenêtre 2 fenêtre 2 fenêtre 2 fenêtre 2 fenêtre 2 fenêtre 2 fenêtre 2 fenêtre 2 fenêtre 2 fenêtre 2";
objwin2 = new DragClass ('Win2', 'Drag Window 2', C2,350,150,300,300);
var objwin3;
fonction openwin () {
if (objwin3 == null) {
var C3 = "123 fenêtre 3 fenêtre 3 fenêtre 3 fenêtre 3 fenêtre 3 fenêtre 3 fenêtre 3 fenêtre 3 fenêtre 3 fenêtre 3 fenêtre 3 fenêtre 3 fenêtre 3 fenêtre 3 fenêtre 3 fenêtre 3 fenêtre 3 fenêtre 3 fenêtre 3 fenêtre 3 fenêtre 3 fenêtre 3 fenêtre 3 fenêtre 3 fenêtre 3 fenêtre 3 fenêtre 3 fenêtre 3 fenêtre 3 fenêtre 3 fenêtre 3 fenêtre 3 fenêtre 3 fenêtre 3 fenêtre 3 3 Fenêtre 3 Fenêtre 3 Fenêtre 3 Fenêtre 3 Fenêtre 3 Fenêtre 3 Fenêtre 3 Fenêtre 3 Fenêtre 3 Fenêtre 3 Fenêtre 3 Fenêtre 3 3 Fenêtre 3 3 Fenêtre 3 3 Fenêtre 3 de fenêtre 3 Fenêtre 3 Fenêtre 3 Fenêtre 3 Fenêtre 3 Fenêtre 3 Fenêtre 3 Fenêtre 3 Fenêtre 3 Fenêtre 3 Fenêtre 3 Fenêtre 3 Fenêtre 3 Fenêtre 3 Fenêtre 3 Fenêtre 3 Fenêtre 3 Fenêtre 3 Fenêtre 3 Fenêtre 3 Fenêtre 3 Fenêtre 3 Fenêtre 3 Fenêtre 3 Fenêtre 3 Fenêtre 3 Fenêtre 3 Fenêtre 3 Fenêtre 3 Fenêtre 3 Fenêtre 3 Fenêtre 3 Fenêtre 3 Fenêtre 3 Fenêtre 3 Fenêtre 3 Fenêtre 3 Fenêtre 3 Fenêtre 3 Fenêtre 3 Fenêtre 3 Fenêtre 3 Fenêtre 3 Fenêtre 3 Fenêtre 3 Fenêtre 3 Fenêtre 3 Fenêtre 3 Fenêtre 3 Fenêtre 3 Fenêtre 3 Fenêtre 3 Fenêtre 3 Fenêtre 3 FENSE 3 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 3 Windows Windows 3 Windows 3 Windows 3 3 3 Windows Windows 3 Windows 3 Windows 3 3 3 Windows 3 Windows 3 Windows 3 Windows 3 Window Windows 3 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 3 3 Windows Windows 3 Windows 3 Windows 3 3 3 Windows Windows 3 Windows 3 Windows 3 3 3 Windows Windows 3 Windows 3 Windows 3 3 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3
objwin3 = new DragClass ('win3', C3, C3,700,150,300,300);
}autre{
if (objwin3.window.style.display == 'None') {
objwin3.window.style.display = '';
}
}
}
</cript>
<input type = "bouton" value = "pop up [fenêtre 3]" onclick = "openwin ()" />
</docy>
</html>
J'espère que cet article sera utile à la programmation JavaScript de tous.