Artikel ini menjelaskan metode menerapkan jendela mengambang yang dapat ditingkatkan, diseret, ditutup dan diminimalkan oleh JS. Bagikan untuk referensi Anda. Metode implementasi spesifik adalah sebagai berikut:
Salin kode sebagai berikut: <! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "konten tipe" content = "text /html; charset = utf-8" />
<title> JS mengimplementasikan jendela mengambang yang dapat ditingkatkan, diseret, tertutup dan diminimalkan </iteme>
</head>
<type style = "text/css">
.divWindow {word-wrap: break-word; position: absolute; meluap: tersembunyi;}
.divbar {border:#000000 1px solid; Posisi: absolute; border-bottom:#000000 1px padat; lebar: 100%; tinggi: 20px; latar belakang-warna:#0099ff; kursor: tangan; line-height: 20px;}
.divchange {position: absolute; kanan: 25px; font-size: 10pt;}
.divclose {position: absolute; kanan: 5px; font-size: 11pt;}
.divTitle {position: absolute; kiri: 5px; font-size: 10pt; space putih: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden;}
.divContent {border:#000000 1px solid; border-top:#000000 0px padat; posisi: absolute; Atas: 20px; Lebar: 100%; Latar Belakang-Color: #FFFFF; overflow-y: otomatis;
Scrollbar-base-color: #fffff; scrollbar-arrow-color: #999999; scrollbar-face-color: #eeeee; scrollbar-highlight-color: #eeeeee;
Scrollbar-shadow-color: #eeeeee; scrollbar-3dlight-color: #fffff; scrollbar-track-color: #fffff; scrollbar-darkshadow-color: #cccccc;}
.divresize {height: 7px; Lebar: 7px; meluap: tersembunyi; Latar Belakang-Color:#0000FF; Posisi: Absolute; Bawah: 6px; Kanan: 6px; Kursor: NW-Ressize}
.diviframe {tinggi: 100%; lebar: 100%;}
</tyle>
<bahasa skrip = "javascript">
var zindex = 0 // variabel global
function dragclass (nama, judul, konten, kiri, atas, lebar, tinggi) {
var ismousedown = false;
var maksimum = false;
var offx = 0; // Atur koordinat x dari titik ambil
var offy = 0; // Atur koordinat y dari titik ambil
var oldleft; // Simpan koordinat x dalam keadaan normal
var oldtop; // Simpan koordinat y dalam keadaan normal
this.mousedown = function () {// tekan titik seret
Bar.setCapture (); // Atur Crawl
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 () {// seret jendela
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 () {// Lepaskan tombol
Bar.releasecapture (); // Batalkan merangkak
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 () {// Klik dua kali untuk meminimalkan
if (! Maximum) {
oldleft = window.style.left; // Simpan koordinat x dalam keadaan normal
oldtop = window.style.top; // Simpan koordinat y dalam keadaan normal
Window.style.left = '0px';
Window.style.top = '0px';
Window.style.width = document.body.clientwidth; // Area yang terlihat dari halaman web luas
Title.style.width = (document.body.clientwidth-40)+'px'; // Atur panjang judul
Ubah Ulang.Style.Display = 'None';
if (ubah.innertext == '-') {
Window.style.height = '100%';
Content.style.height = document.body.clientHeight-20; // Lebar area yang terlihat dari halaman web - Tinggi judul
}kalau tidak{
Window.style.height = '20px';
}
maksimum = true;
}kalau tidak{
Window.style.left = oldleft;
Window.style.top = oldtop;
Window.style.width = lebar+'px';
Title.style.width = (lebar-40)+'px';
Ubah Ulang.Style.Display = '';
if (ubah.innertext == '-') {
Window.style.height = height+'px';
Content.style.height = parseInt (height-20)+'px';
}kalau tidak{
Window.style.height = '20px';
}
maksimum = false;
}
if (window.style.zindex <= zindex) {
Zindex ++;
Window.style.zindex = zindex;
}
}
this.changeWindow = function () {// Kecilkan jendela
event.cancelbubble = true;
if (ubah.innertext == '-') {
Window.style.height = '20px';
Ubah.innerText = '□';
Content.style.display = 'none';
Ubah Ulang.Style.Display = 'None';
}kalau tidak{
if (maksimum) {
Window.style.height = '100%';
Content.style.display = '';
Ubah Ulang.Style.Display = '';
Content.style.height = document.body.clientHeight-20; // Lebar area yang terlihat dari halaman web - Tinggi judul
}kalau tidak{
Window.style.height = height+'px';
Content.style.display = '';
Ubah Ulang.Style.Display = '';
Content.style.height = parseInt (height-20)+'px';
}
Ubah.innerText = '-';
}
}
var window = document.createElement ("div");
Window.id = "DivWindow"+ nama;
Window.classname = "divwindow";
Window.style.left = kiri+'px';
Window.style.top = top+'px';
Window.style.width = lebar+'px';
Window.style.height = height+'px';
Window.onClick = function () {
if (parseInt (window.style.zindex) <= zindex) {
Zindex ++;
Window.style.zindex = zindex;
}
}
this.window = window;
// atribut publik, yang dapat dioperasikan di luar kelas; Jika Anda ingin beroperasi di luar kelas, Anda dapat mengubah elemen menjadi atribut publik
var bar = document.createElement ("div");
Bar.id = "Divbar"+Nama;
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"+ nama;
Title.className = "DivTitle";
Title.style.width = (lebar-40)+'px'; // Panjang judul adaptif
Title.innerText = title;
Bar.AppendChild (judul);
var change = document.createElement ("span");
Ubah.id = "divchange"+ nama;
Change.className = "Divchange";
Ubah.innerText = "-";
Ubah.ondblClick = this.changewindow;
Change.onClick = this.changewindow;
Bar.AppendChild (Ubah);
var close = document.createElement ("span");
Close.id = "DivClose"+ nama;
Close.onClick = function () {
Window.style.display = 'none';
}
Close.classname = "DivClose";
Close.innertext = "×";
Bar.AppendChild (Tutup);
var content = document.createElement ("div");
Content.id = "divcontent"+ nama;
Content.className = "DivContent"
Content.innerHtml = konten;
Content.style.height = parseInt (height-20)+'px';
Window.AppendChild (konten);
var ubahze = document.createElement ("div");
Ubah Ulang.className = "Divresize";
Ubah Ulang.onmousedown = function () {
if (window.style.zindex <= zindex) {
Zindex ++;
Window.style.zindex = zindex;
}
Ubah Ulang.setCapture ();
ismousedown = true;
}
Ubahze.onMouseMove = function () {
if (ismousedown &&! Maximum)
{
width = parseInt (event.clientx) -parseint (window.style.left) +5;
tinggi = parseInt (event.clienty) -parseint (window.style.top) +5;
if (lebar> 100) {// atur lebar minimum
Window.style.width = lebar+'px';
Title.style.width = (lebar-40)+'px';
}
if (tinggi> 100) {// atur ketinggian minimum
Window.style.height = height+'px';
Content.style.height = parseInt (height-20)+'px';
}
}
}
Ubah Ulang.onMouseUp = function () {
Ubah Ulang.Releasecapture ();
ismousedown = false;
}
Window.AppendChild (mengubah ukuran);
var iframe = document.createElement ("iframe"); // Tambahkan IFRAME, blokir Kontrol <CILTER> di bawah IE6.0
Iframe.className = "diviframe";
Window.AppendChild (iframe);
document.body.appendChild (window);
}
</script>
<body>
<script>
// dragclass (id, judul jendela, konten, koordinat x, koordinat y, lebar, panjang)
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 = dragclass baru ('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 = dragclass baru ('win2', 'drag window 2', c2.350.150.300.300);
var objwin3;
fungsi 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 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 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 = dragclass baru ('Win3', C3, C3.700.150.300.300);
}kalau tidak{
if (objwin3.window.style.display == 'none') {
objwin3.window.style.display = '';
}
}
}
</script>
<input type = "tombol" value = "Pop up [window 3]" onclick = "openwin ()" />
</body>
</html>
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.