Este artigo descreve o método de implementação de janelas flutuantes que podem ser dimensionadas, arrastadas, fechadas e minimizadas por JS. Compartilhe para sua referência. O método de implementação específico é o seguinte:
Copie o código da seguinte forma: <! Doctype html public "-// w3c // dtd xhtml 1.0 transitória // pt" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<título> js implementa janelas flutuantes que podem ser escaladas, arrastadas, fechadas e minimizadas </title>
</head>
<style type = "text/css">
.divwindow {word-wrap: word-word; posição: absoluto; Overflow: Hidden;}
.divbar {borda:#000000 1px sólido; posição: absoluto; fundo da borda:#000000 1px sólido; largura: 100%; altura: 20px; cor de fundo:#0099ff; cursor: mão; altura da linha: 20px;}
.DivChange {Posição: Absolute; Right: 25px; font-size: 10pt;}
.divclose {posição: absoluto; direita: 5px; font-size: 11pt;}
.Divtitle {Posição: Absolute; esquerda: 5px; font-size: 10pt; espaço branco: Nowrap; Text-overflow: elipsis; -O-text-overflow: elipsis; Overflow: Hidden;}
.DivContent {Border:#000000 1px Solid; Border-top:#000000 0px Solid; Posição: Absolute; Em cima: 20px; largura: 100%; Background-Color: #fffff; transbordamento-y: automático;
ScrollBar-Base-Color: #fffff; scrollbar-marrow-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 {altura: 7px; Largura: 7px; estouro: oculto; Background-Color:#0000FF; Posição: Absoluto; Inferior: 6px; Direita: 6px; Cursor: NW-RESIZE}
.diviframe {altura: 100%; largura: 100%;}
</style>
<Script Language = "JavaScript">
var zindex = 0 // variáveis globais
função dragclass (nome, título, conteúdo, esquerda, topo, largura, altura) {
var isMouseDown = false;
var maximum = false;
var offx = 0; // Defina a coordenada x do ponto de garagem
var offy = 0; // Defina a coordenada y do ponto de apoio
var Oldleft; // salvar as coordenadas X no estado normal
var Oldtop; // salvar as coordenadas y no estado normal
this.Mousedown = function () {// Pressione o ponto de arrasto
Bar.setCapture (); // defina rastreamento
offx = parseint (event.clientx) -parseint (window.style.left);
OFFY = parseint (event.clienty) -parseint (window.style.top);
ismousedown = true;
if (window.style.zindex <= zindex) {
zindex ++;
Window.style.zindex = zindex;
}
}
this.MousEMove = function () {// arraste a janela
if (ismouDown &&! 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 () {// Libere o botão
Bar.releaseCapture (); // Cancele rastejando
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 () {// clique duas vezes para minimizar
if (! máximo) {
Oldleft = window.style.left; // salvar as coordenadas X no estado normal
Oldtop = window.style.top; // salvar as coordenadas y no estado normal
Window.style.left = '0px';
Window.style.top = '0px';
Window.style.width = document.body.clientWidth; // A área visível da página da web é ampla
Title.style.width = (document.body.clientwidth-40)+'px'; // Defina o comprimento do título
Redize.style.display = 'nenhum';
if (alterar.innerText == '-') {
Window.style.Height = '100%';
Content.style.Height = document.body.clientHeight-20; // Largura da área visível da página da web - altura do título
}outro{
Window.style.Height = '20px';
}
máximo = true;
}outro{
Window.style.left = Oldleft;
Window.style.top = Oldtop;
Window.style.width = width+'px';
Title.style.width = (Width-40)+'PX';
Redize.style.display = '';
if (alterar.innerText == '-') {
Window.style.Height = altura+'px';
Content.style.Height = parseint (altura-20)+'px';
}outro{
Window.style.Height = '20px';
}
máximo = false;
}
if (window.style.zindex <= zindex) {
zindex ++;
Window.style.zindex = zindex;
}
}
this.changewindow = function () {// encolher a janela
event.cancelbubble = true;
if (alterar.innerText == '-') {
Window.style.Height = '20px';
Alteração.innerText = '□';
Content.style.display = 'nenhum';
Redize.style.display = 'nenhum';
}outro{
if (máximo) {
Window.style.Height = '100%';
Content.style.display = '';
Redize.style.display = '';
Content.style.Height = document.body.clientHeight-20; // Largura da área visível da página da web - altura do título
}outro{
Window.style.Height = altura+'px';
Content.style.display = '';
Redize.style.display = '';
Content.style.Height = parseint (altura-20)+'px';
}
Alteração.innerText = '-';
}
}
var window = document.createElement ("div");
Window.id = "divWindow"+ nome;
Window.className = "DivWindow";
Window.style.left = esquerda+'px';
Window.style.top = top+'px';
Window.style.width = width+'px';
Window.style.Height = altura+'px';
Window.OnClick = function () {
if (parseint (window.style.zindex) <= zindex) {
zindex ++;
Window.style.zindex = zindex;
}
}
this.window = janela;
// atributos públicos, que podem ser operados fora da classe; Se você deseja operar fora da classe, pode alterar o elemento para atributos públicos
var bar = document.createElement ("div");
Bar.id = "divbar"+nome;
Bar.Onselectstart = "Return false";
Bar.className = "divbar";
Bar.onmousedown = this.mousedown;
Bar.ondblClick = this.dblClick;
Bar.onMousEmove = this.mouseMove;
Bar.onmouseup = this.mouseup;
Window.appendChild (bar);
var title = document.createElement ("span");
Title.id = "divtitle"+ nome;
Title.className = "Divtitle";
Title.style.width = (Width-40)+'PX'; // comprimento de título adaptativo
Title.innerText = title;
Bar.appendchild (título);
var alteração = document.createElement ("span");
Alteração.id = "Divchange"+ nome;
Alteração.className = "Divchange";
Alteração.innerText = "-";
Alteração.ondblClick = this.changewindow;
Change.OnClick = this.ChangeWindow;
Bar.appendchild (alteração);
var close = document.createElement ("span");
Close.id = "divclose"+ nome;
Close.OnClick = function () {
Window.style.display = 'nenhum';
}
Close.className = "divclose";
Close.innerText = "×";
Bar.appendChild (perto);
var content = document.createElement ("div");
Content.id = "divcontent"+ nome;
Content.className = "Divcontent"
Content.innerhtml = content;
Content.style.Height = parseint (altura-20)+'px';
Window.appendChild (conteúdo);
var ressek = document.createElement ("div");
Redize.className = "divResize";
RECEDIMENTO.ONMOUSEDOWN = function () {
if (window.style.zindex <= zindex) {
zindex ++;
Window.style.zindex = zindex;
}
Redize.setcapture ();
ismousedown = true;
}
RECENDIMENTO.ONMOUSEMOVE = function () {
if (ismoudown &&!
{
largura = parseint (event.clientx) -parseint (window.style.left) +5;
altura = parseint (event.clienty) -parseint (window.style.top) +5;
if (largura> 100) {// Defina a largura mínima
Window.style.width = width+'px';
Title.style.width = (Width-40)+'PX';
}
if (altura> 100) {// Defina a altura mínima
Window.style.Height = altura+'px';
Content.style.Height = parseint (altura-20)+'px';
}
}
}
RECEDIMENTE.ONMOUSEUP = function () {
RECEDIMENTO.RELEASECAPTURA ();
ismousedown = false;
}
Window.appendChild (redimensionamento);
var iframe = document.createElement ("iframe"); // Adicione um iframe, bloqueie o <select> Controle sob o IE6.0
Iframe.className = "Diviframe";
Window.appendChild (iframe);
document.body.appendChild (janela);
}
</script>
<Body>
<Cript>
// dragclass (id, título da janela, conteúdo, coordenada x, coordenada y, largura, comprimento)
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 = new 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 = new DragClass ('Win2', 'Drag Window 2', C2.350.150.300.300);
var objwin3;
função 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 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 window
objwin3 = new DragClass ('Win3', C3, C3.700.150.300.300);
}outro{
if (objwin3.window.style.display == 'nenhum') {
objwin3.window.style.display = '';
}
}
}
</script>
<input type = "button" value = "pop -up [janela 3]" onclick = "OpenWin ()" />
</body>
</html>
Espero que este artigo seja útil para a programação JavaScript de todos.