يصف مثال المقالة كيفية تنفيذ مربع المطالبة في الزاوية اليمنى السفلى من JS. شاركه للرجوع إليه. طريقة التنفيذ المحددة هي كما يلي:
قم بتنفيذ المكون الإضافي jQuery (popup.js) في مربع المطالبة في الزاوية اليمنى السفلى
انسخ الرمز كما يلي: //en.fixed رمز متوافق مع IE6
// jQuery (function ($ j) {
// $ j ('#pop'). positionfixed ()
//})
(وظيفة ($ j) {
$ j.positionfixed = function (el) {
$ j (el) .each (function () {
ثابت جديد (هذا)
})
إرجاع EL ؛
}
$ j.fn.positionfixed = function () {
إرجاع $ j.positionfixed (هذا)
}
var lexted = $ j.positionfixed.impl = function (el) {
var o = هذا ؛
O.STS = {
الهدف: $ J (EL) .CSS ("الموضع" ، "ثابت") ،
الحاوية: $ J (نافذة)
}
O.Sts.CurrentCSS = {
أعلى: O.Sts.Target.css ('top') ،
اليمين: O.Sts.Target.css ('right') ،
أسفل: O.Sts.Target.css ('أسفل') ،
اليسار: O.Sts.Target.css ('اليسار')
}
إذا (! O.IE6) العودة ؛
O.Bindevent () ؛
}
$ j.extend (exped.prototype ، {
IE6: $ .browser.msie && $ .browser.version <7.0 ،
bindevent: function () {
var o = هذا ؛
O.Sts.Target.css ("الموضع" ، "المطلق")
O.Overrelative (). initbasepos () ؛
O.Sts.Target.css (O.Sts.basepos)
O.Sts.Container.Scroll (O.Scrollevent ()). تغيير حجم (O.Resizeevent ()) ؛
O.SetPos () ؛
} ،
المفرط: وظيفة () {
var o = هذا ؛
var repative = o.sts.target.parents (). filter (function () {
إذا ($ j (this) .css ('position') == 'النسبية') إرجاع هذا ؛
})
if (relistr
العودة س ؛
} ،
initbasepos: function () {
var o = هذا ؛
O.Sts.basepos = {
TOP: O.Sts.Target.Offset (). TOP - (O.Sts.CurrentCSS.TOP == 'Auto'؟ O.Sts.Container.Scrolltop (): 0) ،
اليسار: O.Sts.Target.offset (). اليسار - (O.Sts.CurrentCss.Left == 'Auto'؟ O.Sts.Container.Scrollleft (): 0)
}
العودة س ؛
} ،
setpos: function () {
var o = هذا ؛
O.Sts.Target.css ({
أعلى: O.Sts.Container.scrolltop () + O.Sts.basepos.top ،
اليسار: O.Sts.Container.scrollleft () + O.Sts.basepos.left
})
} ،
نقيد: وظيفة () {
var o = هذا ؛
وظيفة الإرجاع () {
O.SetPos () ؛
}
} ،
Resizeevent: function () {
var o = هذا ؛
وظيفة الإرجاع () {
setTimeout (function () {
O.Sts.Target.css (O.Sts.CurrentCSS)
O.Initbasepos () ؛
O.SetPos ()
} ، 1)
}
}
})
}) (jQuery)
jQuery (وظيفة ($ j) {
$ j ('#footer'). positionfixed ()
})
// وظيفة المنبثقة البوب في الزاوية اليمنى السفلى من البوب
وظيفة البوب (العنوان ، URL ، مقدمة) {
this.title = title ؛
this.url = url ؛
this.intro = مقدمة ؛
this.apeartime = 1000 ؛
this.hidetime = 500 ؛
this.delay = 10000 ؛
// إضافة معلومات
this.addinfo () ؛
//يعرض
this.showdiv () ؛
//إنهاء
this.closediv () ؛
}
pop.prototype = {
addInfo: function () {
$ ("#poptitle a"). attr ('href' ، this.url) .html (this.title) ؛
$ ("#popintro"). html (this.intro) ؛
$ ("#popmore a"). attr ('href' ، this.url) ؛
} ،
showdiv: function (time) {
if (! ($. browser.msie && ($ .browser.version == "6.0") &&! $. support.style)) {
$ ('#pop'). slidedown (this.apeartime) .Delay (this.delay) .Fadeout (400) ؛؛
} آخر {// call jquery.fixed.js ، حل المشكلة التي لا يمكن أن تستخدم IE6 ثابتة
$ ('#pop'). show () ؛
jQuery (وظيفة ($ j) {
$ j ('#pop'). positionfixed ()
})
}
} ،
مغلق: وظيفة () {
$ ("#popclose"). انقر فوق (function () {
$ ('#pop'). Hide () ؛
}
) ؛
}
}
مثال على مربع المطالبة في الزاوية اليمنى السفلى
انسخ الرمز كما يلي: <! doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> jQuery أسفل الزاوية اليمنى نافذة منبثقة </title>
</head>
<body>
<h2> يرجى الاطلاع على المتصفح لديه زاوية أقل </h2>
<!-ابدأ نافذة jQuery المنبثقة->
<script type = "text/javaScript">
window.onload = function () {
var pop = new pop ("هنا هو العنوان ، هاها" ،
"ارتباط تشعبي URL" ،
"الرجاء إدخال مقدمة المحتوى الخاصة بك ، إليك مقدمة المحتوى. الرجاء إدخال مقدمة المحتوى الخاصة بك ، إليك مقدمة المحتوى. الرجاء إدخال مقدمة المحتوى الخاصة بك ، إليك مقدمة المحتوى") ؛
}
</script>
<script type = "text/javaScript" src = "jquery.min.js"> </script>
<script type = "text/javaScript" src = "popup.js"> </script>
<div id = "pop" style = "display: none ؛">
<type type = "text/css">
*{} {margin: 0 ؛ padding: 0 ؛}
#pop {} {background: #ffff ؛ width: 260px ؛ الحدود: 1px solid #e0e0e0 ؛ font-size: 12px ؛ الموضع: ثابت ؛ يمين: 10px ؛ أسفل: 10px ؛}
#pophead {} {line-height: 32px ؛ الخلفية: #f6f0f3 ؛ border-bottom: 1px solid #e0e0e0 ؛ الموضع: النسبية ؛ الحجم: 12px ؛ حشوة: 0 0 0 10px ؛}
#pophead h2 {} {font-size: 14px ؛ color:#666 ؛ line-height: 32px ؛ height: 32px ؛}
#pophead #popclose {} {الموضع: Absolute ؛ اليمين: 10px ؛ Top: 1px ؛}
#pophead a#popclose: hover {} {color:#f00 ؛ cursor: pointer ؛}
#popcontent {} {padding: 5px 10px ؛}
#poptitle a {} {line-height: 24px ؛ font-size: 14px ؛ font-family: 'microsoft yahei' ؛ color:#333 ؛ font-weight: bold ؛ text-decoration: none ؛}
#poptitle a: hover {} {color:#f60 ؛}
#popintro {} {text-indent: 24px ؛ خط الارتفاع: 160 ٪ ؛ الهامش: 5px 0 ؛ اللون:#666 ؛}
#popmore {} {text-align: right ؛ border-top: 1px dotted #ccc ؛ line-height: 24px ؛ margin: 8px 0 0 0 ؛}
#popmore a {} {color:#f60 ؛}
#popmore a: hover {} {color:#f00 ؛}
</style>
<div id = "pophead">
<a id = "popclose"> إغلاق </a>
<h2> تذكير دافئ </h2>
</div>
<div id = "popcontent">
<dl>
<dt id = "poptitle"> هنا العنوان </dt>
<dd id = "popintro"> هذه هي مقدمة المحتوى </dd>
</dl>
<p id = "popmore"> عرض »</p>
</div>
</div>
<!-نهاية نافذة المنبثقة البوب->
<br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <b r/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br /> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> jquery 右下角弹窗
</body>
</html>
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.