تصف هذه المقالة طريقة تنفيذ النوافذ العائمة التي يمكن تحجيمها وسحبها وإغلاقها وتقليلها بواسطة JS. شاركه للرجوع إليه. طريقة التنفيذ المحددة هي كما يلي:
انسخ الرمز على النحو التالي: <! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html ؛ charset = utf-8" />
<title> يطبق JS النوافذ العائمة التي يمكن تحجيمها وسحبها وإغلاقها وتقليلها </title>
</head>
<type type = "text/css">
.divwindow {word-wrap: break-word ؛ الموضع: مطلق ؛ الفائض: مخفي ؛}
.divbar {border:#000000 1px solid ؛ الموضع: المطلق ؛ bourd-bottom:#000000 1px الصلبة ؛ العرض: 100 ٪ ؛ الارتفاع: 20px ؛ خلفية اللون:#0099ff ؛ المؤشر: اليد ؛ خط الارتفاع: 20px ؛}
.divChange {الموضع: مطلق ؛ اليمين: 25px ؛ حجم الخط: 10pt ؛}
.divclose {الموضع: مطلق ؛ اليمين: 5px ؛ الحجم الخط: 11pt ؛}
.divtitle {الموضع: مطلق ؛ اليسار: 5px ؛ حجم الخط: 10pt ؛ الفضاء الأبيض: nowrap ؛ text-overflow: ellipsis ؛ -o-text-overflow: elipsis ؛ overflow: hidden ؛}
.divContent {border:#000000 1px Solid ؛ Top-Top:#000000 0px Solid ؛ الموضع: Absolute ؛ أعلى: 20 بكسل ؛ العرض: 100 ٪ ؛ خلفية اللون: #fffff ؛ فائض y: Auto ؛
scrollbar-base-color: #fffff ؛ scrollbar-arrow-color: #999999 ؛ scrollbar-face-color: #EEEE ؛
scrollbar-shadow-color: #EEEE ؛ Scrollbar-3Dlight-color: #fffff ؛ scrollbar-track-color: #fffff ؛ scrollbar-darkshadow-color: #cccccc ؛}
. العرض: 7px ؛ الفائض: مخفي. خلفية اللون:#0000FF ؛ الموقف: مطلق ؛ أسفل: 6px ؛ اليمين: 6px ؛ المؤشر: NW-RESIVE}
.diviframe {الارتفاع: 100 ٪ ؛ العرض: 100 ٪ ؛}
</style>
<script language = "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 = صحيح ؛
if (window.style.zindex <= zindex) {
Zindex ++ ؛
window.style.zindex = zindex ؛
}
}
this.mousemove = function () {// اسحب النافذة
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 () {// حرر الزر
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' ؛ // اضبط طول العنوان
تغيير حجم. style.display = 'none' ؛
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' ؛
تغيير حجم. style.display = '' ؛
if (change.innertext == '-') {
window.style.height = الارتفاع+'px' ؛
content.style.height = parseint (height-20)+'px' ؛
}آخر{
window.style.height = '20px' ؛
}
الحد الأقصى = خطأ ؛
}
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 = 'none' ؛
تغيير حجم. style.display = 'none' ؛
}آخر{
إذا (الحد الأقصى) {
window.style.Height = '100 ٪' ؛
content.style.display = '' ؛
تغيير حجم. style.display = '' ؛
content.style.height = document.body.clientheight-20 ؛ // عرض المنطقة المرئية لصفحة الويب - ارتفاع العنوان
}آخر{
window.style.height = الارتفاع+'px' ؛
content.style.display = '' ؛
تغيير حجم. 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 = 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"+name ؛
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"+ name ؛
title.className = "DivTitle" ؛
title.style.width = (width-40)+'px' ؛ // طول العنوان التكيفي
title.innertext = title ؛
Bar.AppendChild (العنوان) ؛
var change = document.createElement ("span") ؛
Change.id = "divchange"+ name ؛
Change.className = "DivChange" ؛
change.innertext = "-" ؛
change.ondblclick = this.ChangeWindow ؛
change.onclick = this.ChangeWindow ؛
Bar.AppendChild (تغيير) ؛
var close = document.createElement ("span") ؛
close.id = "divclose"+ name ؛
close.onclick = function () {
window.style.display = 'none' ؛
}
close.className = "divclose" ؛
close.innertext = "×" ؛
Bar.AppendChild (Close) ؛
var content = document.createElement ("div") ؛
content.id = "divcontent"+ name ؛
content.classname = "DivContent"
content.innerhtml = content ؛
content.style.height = parseint (height-20)+'px' ؛
Window.AppendChild (المحتوى) ؛
var reasize = document.createElement ("div") ؛
تغيير حجمها.
تغيير حجمها.
if (window.style.zindex <= zindex) {
Zindex ++ ؛
window.style.zindex = zindex ؛
}
تغيير حجمها.
Ismousedown = صحيح ؛
}
تغيير حجم. onmousemove = function () {
إذا (Ismousedown &&! الحد الأقصى)
{
العرض = parseint (event.clientx) -Parseint (window.style.left) +5 ؛
الارتفاع = parseint (event.clienty) -Parseint (window.style.top) +5 ؛
إذا (العرض> 100) {// اضبط الحد الأدنى للعرض
window.style.width = width+'px' ؛
title.style.width = (width-40)+'px' ؛
}
إذا (الارتفاع> 100) {// اضبط الحد الأدنى
window.style.height = الارتفاع+'px' ؛
content.style.height = parseint (height-20)+'px' ؛
}
}
}
dize.onmouseup = function () {
تغيير الحجم. releasecapture () ؛
ismousedown = false ؛
}
window.appendchild (تغيير الحجم) ؛
var iframe = document.createElement ("iframe") ؛ // أضف iframe ، حظر التحكم <select> تحت IE6.0
iframe.className = "diviframe" ؛
window.appendChild (iframe) ؛
document.body.appendChild (window) ؛
}
</script>
<body>
<script>
// DragClass (معرف ، عنوان النافذة ، المحتوى ، 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 نافذة 1 نافذة 1 نافذة 1 نافذة 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"
OBJWIN2 = New DragClass ('Win2' ، 'Drag Window 2' ، C2،350،150،300،300) ؛
var objwin3 ؛
وظيفة 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 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 Windows 3 Windows Windows 3 Windows Windows 3 Windows Windows 3 Windows Windows 3 Windows Windows 3 Windows 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 Windows 3 Windows Windows 3 Windows Windows 3 Windows Windows 3 Windows Windows 3 Windows Windows 3 Windows Windows 3 Windows 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 Windows 3 Windows Windows 3 Windows Windows 3 Windows Windows 3 Windows Windows 3 Windows Windows 3 Windows Windows 3 Windows Windows 3 Windows Windows 3 Windows 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 Windows 3 Windows Windows 3 Windows Windows 3 Windows Windows 3 Windows Windows 3 Windows Windows 3 Windows 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 Windows 3 Windows Windows 3 Windows Windows 3 Windows Windows 3 Windows Windows 3 Windows Windows 3 Windows 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 Windows 3 Windows Windows 3 Windows Windows 3 Windows Windows 3 Windows Windows 3 Windows Windows 3 Windows 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 Windows 3 Windows Windows 3 Windows Windows 3 Windows Windows 3 Windows Windows 3 Windows Windows 3 Windows 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 Windows 3 Windows Windows 3 Windows Windows 3 Windows Windows 3 Windows Windows 3 Windows Windows 3 Windows 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 Windows 3 Windows Windows 3 Windows Windows 3 Windows Windows 3 Windows Windows 3 Windows Windows 3 Windows 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 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 Windows 3 Windows Windows 3 Windows Windows 3 Windows Windows 3 Windows Windows 3 Windows Windows 3 Windows 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 Windows 3 Windows Windows 3 Windows Windows 3 Windows Windows 3 Windows Windows 3 Windows Windows 3 Windows 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 Windows 3 Windows Windows 3 Windows Windows 3 Windows Windows 3 Windows Windows 3 Windows 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 Windows 3 Windows Windows 3 Windows Windows 3 Windows Windows 3 Windows Windows 3 Windows Windows 3 Windows Windows 3 Windows Windows 3 Windows.
OBJWIN3 = New DragClass ('Win3' ، C3 ، C3،700،150،300،300) ؛
}آخر{
if (objwin3.window.style.display == 'none') {
objwin3.window.style.display = '' ؛
}
}
}
</script>
<type type = "button" value = "pop up [window 3]" onClick = "OpenWin ()" />
</body>
</html>
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.