บทความนี้อธิบายวิธีการใช้หน้าต่างลอยน้ำที่สามารถปรับขนาดลากปิดและย่อขนาดโดย JS แบ่งปันสำหรับการอ้างอิงของคุณ วิธีการใช้งานเฉพาะมีดังนี้:
คัดลอกรหัสดังนี้: <! 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">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> js ใช้หน้าต่างลอยตัวที่สามารถปรับขนาดลากปิดและย่อให้เล็กสุด </title>
</head>
<style type = "text/css">
.DivWindow {Word-wrap: break-word; ตำแหน่ง: สัมบูรณ์; ล้น: ซ่อน;}
.divbar {ชายแดน:#000000 1px Solid; ตำแหน่ง: Absolute; Border-Bottom:#000000 1px Solid; ความกว้าง: 100%; ความสูง: 20px; พื้นหลังสี:#0099ff; เคอร์เซอร์: มือ;
.DIVCHANGE {ตำแหน่ง: Absolute; Right: 25PX; FONT-SIZE: 10PT;}
.DivClose {ตำแหน่ง: Absolute; Right: 5PX; FONT-SIZE: 11PT;}
.divtitle {ตำแหน่ง: สัมบูรณ์; ซ้าย: 5px; ขนาดตัวอักษร: 10pt; พื้นที่สีขาว: NowRap; Text-Overflow: Ellipsis; -o-text-overflow: Ellipsis; overflow: ซ่อน;}}
.DivContent {Border:#000000 1px Solid; Border-Top:#000000 0PX Solid; ตำแหน่ง: Absolute; ด้านบน: 20px; ความกว้าง: 100%; พื้นหลังสี: #FFFFF; Overflow-y: อัตโนมัติ;
Scrollbar-base-color: #FFFFF; Scrollbar-arrow-Color: #999999; Scrollbar-face-color: #eeeee; Scrollbar-High-Color: #EEEEE;
Scrollbar-shadow-color: #eeeee; scrollbar-3dlight-color: #fffff; scrollbar-track-color: #fffff; scrollbar-darkshadow-color: #cccccc;}
.divresize {ความสูง: 7px; ความกว้าง: 7px; ล้น: ซ่อน; พื้นหลังสี:#0000ff; ตำแหน่ง: สัมบูรณ์; ด้านล่าง: 6px; ขวา: 6px; เคอร์เซอร์: NW-Resize}
.diviframe {ความสูง: 100%; ความกว้าง: 100%;}
</style>
<ภาษาสคริปต์ = "JavaScript">
var zindex = 0 // ตัวแปรทั่วโลก
ฟังก์ชั่น dragclass (ชื่อ, ชื่อ, เนื้อหา, ซ้าย, บน, ความกว้าง, ความสูง) {
var ismousedown = false;
var maximum = false;
var offx = 0; // ตั้งค่าพิกัด x ของจุดคว้า
var offy = 0; // ตั้งค่าพิกัด y ของจุดคว้า
var oldleft; // บันทึกพิกัด X ในสถานะปกติ
var oldtop; // บันทึกพิกัด y ในสถานะปกติ
this.mousedown = function () {// กดจุดลาก
bar.setCapture (); // ตั้งค่าการรวบรวมข้อมูล
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 () {// ลากหน้าต่าง
if (ismousedown &&! สูงสุด) {
bar.style.cursor = 'ย้าย'
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 () {// ปล่อยปุ่ม
bar.releasecapture (); // ยกเลิกการคลาน
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 () {// ดับเบิลคลิกเพื่อย่อให้น้อยที่สุด
ถ้า (! สูงสุด) {
oldleft = window.style.left; // บันทึกพิกัด X ในสถานะปกติ
oldtop = window.style.top; // บันทึกพิกัด y ในสถานะปกติ
window.style.left = '0px';
window.style.top = '0px';
window.style.width = document.body.clientwidth; // พื้นที่ที่มองเห็นได้ของหน้าเว็บกว้าง
title.style.width = (document.body.clientwidth-40)+'px'; // ตั้งค่าความยาวชื่อ
resize.style.display = 'ไม่มี';
if (change.innerText == '-') {
window.style.height = '100%';
content.style.height = document.body.clientheight-20; // ความกว้างของพื้นที่ที่มองเห็นได้ของหน้าเว็บ - ความสูงของชื่อ
}อื่น{
window.style.height = '20px';
-
สูงสุด = จริง;
}อื่น{
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 = ความสูง+'px';
content.style.height = parseInt (ความสูง -20)+'px';
}อื่น{
window.style.height = '20px';
-
สูงสุด = false;
-
if (window.style.zindex <= zindex) {
Zindex ++;
window.style.zindex = zindex;
-
-
this.changeWindow = function () {// หดหน้าต่าง
Event.cancelBubble = true;
if (change.innerText == '-') {
window.style.height = '20px';
Change.innerText = '□';
content.style.display = 'ไม่มี';
resize.style.display = 'ไม่มี';
}อื่น{
ถ้า (สูงสุด) {
window.style.height = '100%';
content.style.display = '';
Resize.style.display = '';
content.style.height = document.body.clientheight-20; // ความกว้างของพื้นที่ที่มองเห็นได้ของหน้าเว็บ - ความสูงของชื่อ
}อื่น{
window.style.height = ความสูง+'px';
content.style.display = '';
Resize.style.display = '';
content.style.height = parseInt (ความสูง -20)+'px';
-
Change.innerText = '-';
-
-
var window = document.createElement ("div");
window.id = "divwindow"+ ชื่อ;
window.className = "DivWindow";
window.style.left = ซ้าย+'px';
window.style.top = top+'px';
window.style.width = width+'px';
window.style.height = ความสูง+'px';
window.onclick = function () {
if (parseint (window.style.zindex) <= zindex) {
Zindex ++;
window.style.zindex = zindex;
-
-
this.window = หน้าต่าง;
// คุณลักษณะสาธารณะซึ่งสามารถดำเนินการนอกชั้นเรียนได้ หากคุณต้องการใช้งานนอกชั้นเรียนคุณสามารถเปลี่ยนองค์ประกอบเป็นคุณลักษณะสาธารณะ
var bar = document.createElement ("div");
bar.id = "divbar"+ชื่อ;
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 (บาร์);
var title = document.createElement ("Span");
title.id = "divtitle"+ ชื่อ;
title.className = "divtitle";
title.style.width = (width-40)+'px'; // ความยาวชื่อเรื่องแบบปรับตัว
title.innerText = title;
bar.appendchild (ชื่อ);
var change = document.createElement ("span");
Change.id = "Divchange"+ ชื่อ;
Change.className = "DivChange";
Change.innerText = "-";
Change.ondblClick = this.changeWindow;
Change.onclick = this.changeWindow;
bar.appendchild (เปลี่ยน);
var close = document.createElement ("Span");
close.id = "divclose"+ ชื่อ;
close.onclick = function () {
window.style.display = 'ไม่มี';
-
Close.className = "DivClose";
Close.innerText = "×";
bar.appendchild (ปิด);
var content = document.createElement ("div");
content.id = "divcontent"+ ชื่อ;
content.className = "divcontent"
content.innerhtml = เนื้อหา;
content.style.height = parseInt (ความสูง -20)+'px';
window.appendchild (เนื้อหา);
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 &&! สูงสุด)
-
WIDTH = PARSEINT (Event.Clientx) -ParseInt (window.style.left) +5;
ความสูง = parseInt (Event.Clienty) -ParseInt (window.style.top) +5;
if (width> 100) {// ตั้งค่าความกว้างขั้นต่ำ
window.style.width = width+'px';
title.style.width = (width-40)+'px';
-
if (ความสูง> 100) {// ตั้งค่าความสูงต่ำสุด
window.style.height = ความสูง+'px';
content.style.height = parseInt (ความสูง -20)+'px';
-
-
-
Resize.onMouseup = function () {
Resize.releasecapture ();
ismousedown = false;
-
window.appendchild (ปรับขนาด);
var iframe = document.createElement ("iframe"); // เพิ่ม iframe บล็อก <elect> ตัวควบคุมภายใต้ IE6.0
iframe.className = "diviframe";
window.appendchild (iframe);
document.body.appendchild (หน้าต่าง);
-
</script>
<body>
<script>
// dragclass (ID, ชื่อหน้าต่าง, เนื้อหา, X พิกัด, พิกัด y, ความกว้าง, ความยาว)
var c1 = "หน้าต่าง 1 หน้าต่าง 1 หน้าต่าง 1 หน้าต่าง 1 หน้าต่าง 1 หน้าต่าง 1 หน้าต่าง 1 หน้าต่าง 1 หน้าต่าง 1 หน้าต่าง 1 หน้าต่าง 1 หน้าต่าง 1 หน้าต่าง 1 หน้าต่าง 1 หน้าต่าง 1 หน้าต่าง 1 หน้าต่าง 1 หน้าต่าง 1 หน้าต่าง 1 หน้าต่าง 1 หน้าต่าง 1 หน้าต่าง 1 หน้าต่าง 1 หน้าต่าง 1 หน้าต่าง 1 หน้าต่าง 1 หน้าต่าง 1 หน้าต่าง 1 หน้าต่าง 1 หน้าต่าง 1 หน้าต่าง 1 หน้าต่าง 1 หน้าต่าง 1 หน้าต่าง 1 หน้าต่าง 1 หน้าต่าง
objwin1 = ใหม่ dragclass ('win1', 'drag window 1', c1,0,150,300,300);
var c2 = "หน้าต่าง 2 หน้าต่าง 2 หน้าต่าง 2 หน้าต่าง 2 หน้าต่าง 2 หน้าต่าง 2 หน้าต่าง 2 หน้าต่าง 2 หน้าต่าง 2 หน้าต่าง 2 หน้าต่าง 2 หน้าต่าง 2 หน้าต่าง 2 หน้าต่าง 2 หน้าต่าง 2 หน้าต่าง 2 หน้าต่าง 2 หน้าต่าง 2 หน้าต่าง 2 หน้าต่าง 2 หน้าต่าง 2 หน้าต่าง 2 หน้าต่าง 2 หน้าต่าง 2 หน้าต่าง 2 หน้าต่าง 2 หน้าต่าง 2 หน้าต่าง 2 หน้าต่าง 2 หน้าต่าง 2 หน้าต่าง 2 หน้าต่าง 2 หน้าต่าง 2 หน้าต่าง 2 หน้าต่าง 2 หน้าต่าง 2 หน้าต่าง 2 หน้าต่าง 2 หน้าต่าง 2 หน้าต่าง 2 หน้าต่าง 2 หน้าต่าง 2 หน้าต่าง 2 หน้าต่าง 2 หน้าต่าง 2 หน้าต่าง 2 หน้าต่าง 2 หน้าต่าง
objwin2 = ใหม่ dragclass ('win2', 'Drag Window 2', C2,350,150,300,300);
var objwin3;
ฟังก์ชั่น openwin () {
if (objwin3 == null) {
var c3 = "123 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่างหน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่างหน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่างหน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่างหน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 3 หน้าต่าง 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 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 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 หน้าต่างหน้าต่าง 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 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 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 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 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 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 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 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
objwin3 = ใหม่ dragclass ('win3', c3, c3,700,150,300,300);
}อื่น{
if (objwin3.window.style.display == 'ไม่มี') {
objwin3.window.style.display = '';
-
-
-
</script>
<อินพุต type = "button" value = "โผล่ขึ้น [หน้าต่าง 3]" onclick = "openwin ()" />
</body>
</html>
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน