تم اختباره حاليًا: يدعم IE6+ Firefox ومتصفح Google وما إلى ذلك.
دعونا أولاً نلقي نظرة على عناصر التكوين الأساسية لهذا المكون: كما يلي:
انسخ رمز الكود كما يلي:
هذا.التكوين = {
targetCls : '.clickElem'، // انقر فوق العنصر
العنوان: "أنا طويل"، // عنوان النافذة
المحتوى : 'نص:<p>أنا تنين</p>',
// المحتوى: 'img:http://www.baidu.com/a.jpg',
// محتوى النافذة {نص: محتوى محدد |.id: اسم المعرف |
// iframe: رابط src} {string}
العرض: 400، // عرض المحتوى
الارتفاع : 300, //ارتفاع المحتوى
height : 30, // الارتفاع الافتراضي للعنوان هو 30
السحب: صحيح، // ما إذا كان يمكن سحبه بشكل افتراضي صحيح
الوقت: 3000، // إذا كان وقت إغلاق النافذة تلقائيًا فارغًا أو "غير محدد"، فلن يتم إغلاقه.
showBg: true, // قم بتعيين ما إذا كنت تريد عرض طبقة القناع أم لا، والقيمة الافتراضية هي true.
قابل للإغلاق: '#window-clos'، // زر الإغلاق
bgColor: '#000'، // اللون الافتراضي
العتامة: 0.5,//الشفافية الافتراضية
موضع : {
س: 0،
y: 0 //الافتراضي يساوي 0، متمركز
},
مؤشر زد: 10000،
isScroll: صحيح، // افتراضيًا، يتم تمرير النافذة أثناء تمريرها
isResize: صحيح، // مقياس مع تغيير حجم النافذة افتراضيًا
رد الاتصال: فارغ // وظيفة رد الاتصال بعد عرض النافذة المنبثقة
};
كتابة مكون إضافي منبثق بسيط في JS (بما في ذلك العرض التوضيحي وكود المصدر)
2013-12-11 22:30 بواسطة Long En0707, 409 قراءة, 1 تعليق, جمع, تحرير
لم أنهي الكثير من المشاريع مؤخرًا، وحدث أنني أخذت استراحة اليوم، لذلك أخذت هذا الوقت لدراسة الوظيفة المنبثقة البسيطة لـ JS. بالطبع، هناك العديد من المكونات الإضافية عبر الإنترنت، ولم أفعل ذلك لا تنظر بعناية إلى الكود المصدري للمكونات الإضافية عبر الإنترنت، لقد اعتمدت عليها للتو. تحتوي المكونات الإضافية المنبثقة التي أستخدمها كل يوم على العديد من الوظائف لتحقيق أفكاري المنبثقة ربما تكون قد حققت الوظائف الأساسية، لذا إذا كنت أرغب في جعلها أفضل وأكثر اكتمالًا، فأنا بحاجة إلى مواصلة تحسينها في المستقبل! إذا كان هناك أي عيوب! رجائاً أعطني!
نظرًا لأن الجميع يعرف كيف تبدو النافذة المنبثقة، لم أقم بتقديم عرض توضيحي هذه المرة! تم اختباره حاليًا: يدعم IE6+ Firefox ومتصفح Google وما إلى ذلك.
دعونا أولاً نلقي نظرة على عناصر التكوين الأساسية لهذا المكون: كما يلي:
اضغط على Ctrl+C لنسخ الرمز
اضغط على Ctrl+C لنسخ الرمز
1. دعم تكوين محتوى العنوان، وارتفاع العنوان، وعرض المحتوى وارتفاعه، وما إذا كان من الممكن إغلاق النافذة تلقائيًا بعد سحب النافذة المنبثقة، وما إذا كان سيتم عرض تكوين لون خلفية القناع والشفافية، وموضع عرض النافذة. المحور السيني الافتراضي 0 والمحور الصادي 0 هما للمحاذاة المركزية، يمكنك أيضًا تكوين موضع المحور السيني والمحور الصادي بنفسك، ولكن يرجى ملاحظة أن المحور السيني و يرتبط المحور y بالعنصر الأصلي. إذا لم يتم تحديد الموضع النسبي للعنصر الأصلي، فسيكون مرتبطًا بالمستند بشكل افتراضي. بالطبع، لا يُنصح بأن يتجاوز عرض وارتفاع محتوى النافذة عرض وارتفاع شاشة واحدة من المتصفح. حاول أن تكون أصغر من عرض وارتفاع الشاشة الأولى لأنني استخدمت النوافذ المنبثقة الخاصة بأشخاص آخرين المكونات الإضافية في الماضي، كانت موجودة بعد النقر فوق زر الإغلاق لأن المتصفح يحتوي على شريط تمرير، وبعد تشغيل حدث شريط التمرير، لا يمكن إغلاق النافذة إذا كان عرض المحتوى وارتفاعه كبيرًا، فلا يهم ستحتوي النافذة تلقائيًا على أشرطة تمرير.
2. يدعم عنصر تكوين محتوى النافذة أربعة أنواع من 1. النص (النص) يمكن تكوينه على النحو التالي: <p>أنا Long En</p>
2. img (صورة) يمكنك تكوين img كما يلي: http://www.baidu.com/a.jpg
3. يمكن تكوين المعرف (عقدة المعرف) على النحو التالي "المعرف: XX"
4. يمكن تكوين iframe على النحو التالي "iframe:http://www.baidu.com (عنوان iframe)"
3. توفير وظيفة رد الاتصال بعد النافذة المنبثقة: على سبيل المثال، يمكنك القيام بما تريد القيام به بعد النافذة المنبثقة.
لذلك ليس هناك ما يمكن قوله عن مكون النافذة المنبثقة، بالطبع، إذا كنت ترغب في استخدام نمط CSS في مشروعك الخاص، فيمكنك إعادة كتابته بنفسك، ولم أكتب JS حتى الموت، لكنني أكملت الأساسي فقط وظائف الأعمال النافذة المنبثقة لـ JS.
رمز HTML هو كما يلي:
انسخ رمز الكود كما يلي:
<div style="margin-top:10px;">أنا طويل، الرجاء النقر فوقي</div>
<div style="margin-top:10px;">أنا طويل، الرجاء النقر فوقي</div>
رمز CSS هو كما يلي
انسخ رمز الكود كما يلي:
<نمط النوع = "نص/CSS">
*{الهامش:0;الحشو:0;نوع نمط القائمة:لا شيء;}
أ،إمج {الحدود: 0؛}
الجسم{font:12px/180% Arial، Helvetica، sans-serif؛}
التسمية {المؤشر: المؤشر؛}
#window-box{border:5px Solid #E9F3FD;الخلفية:#FFF;}
.window-title{position:relative;height:30px;border:1px Solid #A6C9E1;overflow:hidden;background:url(images/tipbg.png) 0 0 Repeat-x;}
.عنوان النافذة h2{padding-left:5px;font-size:14px;color:#666;}
#window- Close{position:absolute;right:10px;top:8px;width:10px;height:16px;text-indent:-10em;overflow:hidden;background:url(images/tipbg.png) 100% -49px عدم التكرار;المؤشر:المؤشر;}
#window-content-border{padding:5px 0 5px 5px;}
</نمط>
رمز JS هو كما يلي
انسخ رمز الكود كما يلي:
/**
* كتابة مكون JS المنبثق
*@التاريخ 10-12-2013
* @ المؤلف توغنهوا
*@البريد الإلكتروني [email protected]
*/
تراكب الوظيفة (خيارات) {
هذا.التكوين = {
targetCls : '.clickElem'، // انقر فوق العنصر
العنوان: "أنا طويل"، // عنوان النافذة
المحتوى : 'نص:<p>أنا طويل إن</p>',
//المحتوى: 'img:http://gtms01.alicdn.com/tps/i1/T1USkqFc0dXXb5rXb6-1060-300.jpg',
// محتوى النافذة {نص: محتوى محدد |.id: اسم المعرف |
// iframe: رابط src} {string}
العرض: 400، // عرض المحتوى
الارتفاع : 300, //ارتفاع المحتوى
height : 30, // الارتفاع الافتراضي للعنوان هو 30
السحب: صحيح، // ما إذا كان يمكن سحبه بشكل افتراضي صحيح
الوقت: 3000، // إذا كان وقت إغلاق النافذة تلقائيًا فارغًا أو "غير محدد"، فلن يتم إغلاقه.
showBg: true, // قم بتعيين ما إذا كنت تريد عرض طبقة القناع أم لا، والقيمة الافتراضية هي true.
قابل للإغلاق: '#window-clos'، // زر الإغلاق
bgColor: '#000'، // اللون الافتراضي
العتامة: 0.5,//الشفافية الافتراضية
موضع : {
س: 0،
y: 0 //الافتراضي يساوي 0، متمركز
},
مؤشر زد: 10000،
isScroll: صحيح، // افتراضيًا، يتم تمرير النافذة أثناء تمريرها
isResize: صحيح، // مقياس مع تغيير حجم النافذة افتراضيًا
رد الاتصال: فارغ // وظيفة رد الاتصال بعد عرض النافذة المنبثقة
};
ذاكرة التخزين المؤقت هذه = {
isrender: true، // يتم عرض بنية HTML المنبثقة مرة واحدة فقط
isshow: false, // ما إذا كان قد تم عرض النافذة أم لا
منقول: كاذب
};
this.init(options);
}
تراكب.النموذج الأولي = {
المنشئ: تراكب،
الحرف الأول: وظيفة (خيارات) {
this.config = $.extend(this.config,options || {});
فار النفس = هذا،
_config = self.config،
_cache = self.cache;
$(_config.targetCls).each(function(index,item){
$(العنصر).unbind('انقر');
$(العنصر).bind('انقر',function(){
// اعرض بنية HTML المنبثقة
self._renderHTML();
// حركة النافذة
self._windowMove();
});
});
// تكبير النافذة
self._windowResize('#window-box');
// يتم تمرير النافذة باستخدام شريط التمرير
self._windowIsScroll('#window-box');
},
/*
* تقديم هيكل HTML المنبثق
*/
_renderHTML: الدالة(){
فار النفس = هذا،
_config = self.config،
_cache = self.cache;
فار html ='';
إذا (_cache.isrender) {
html+= '<div id="windowbg" style="display:none;position:absolute;top:0;left:0;"></div>' +
'<div id="window-box" style="display:none;overflow:hidden;">' +
'<div><h2></h2><span id="window- Close">إغلاق</span></div>'+
'<div id="window-content-border"><div id="window-content"></div></div>' +
'</div>';
$('body').append(html);
$("#windowbg").css('z-index',_config.zIndex);
$('#window-content-border').css({'width':_config.width + 'px','height':_config.height + 'px','overflow':'auto'});
$('.window-title h2').html(_config.title);
$('.window-title').css({'height':_config.theight + 'px','width':_config.width,'overflow':'hidden'});
_cache.isrender = false;
// تحديد تنسيق المحتوى الذي تم تمريره
self._contentType();
إذا (_config.showBg) {
// عرض عرض الخلفية وارتفاعها
self._renderDocHeight();
$("#windowbg").show();
self.show();
}آخر {
$("#windowbg").hide();
self.show();
}
self._showDialogPosition("#window-box");
}آخر {
// إذا تم إنشاء النافذة المنبثقة وكانت مخفية فقط، فإننا نعرضها
self.show();
$("#windowbg").animate({"opacity":_config.opacity},'normal');
إذا (_config.showBg) {
$("#windowbg").show();
}
self._showDialogPosition("#window-box");
}
$(_config.closable).unbind('click');
$(_config.closable).bind('click',function(){
// انقر فوق زر الإغلاق
self._ Closed();
});
// وظيفة رد الاتصال بعد العرض
_config.callback && $.isFunction(_config.callback) && _config.callback();
},
/**
* إظهار النافذة المنبثقة
*/
عرض: وظيفة () {
فار النفس = هذا،
_config = self.config،
_cache = self.cache;
$("#window-box") && $("#window-box").show();
_cache.isshow = true;
إذا (_config.time == '' || نوع _config.time == 'غير محدد') {
يعود؛
}آخر {
t && ClearTimeout(t);
فار تي = setTimeout(function(){
self._ Closed();
},_config.time);
}
},
/**
* إخفاء النافذة المنبثقة
*/
إخفاء: وظيفة () {
فار النفس = هذا،
_cache = self.cache;
$("#window-box") && $("#window-box").hide();
_cache.isshow = false;
},
/**
* تحديد نوع المحتوى الذي تم تمريره
*/
_نوع المحتوى: الوظيفة (){
فار النفس = هذا،
_config = self.config،
_cache = self.cache;
var contentType = _config.content.substring(0,_config.content.indexOf(":")),
content = _config.content.substring(_config.content.indexOf(":")+1,_config.content.length);
التبديل (نوع المحتوى) {
حالة "النص":
$('#window-content').html(content);
استراحة؛
معرف الحالة:
$('#window-content').html($('#'+content).html());
استراحة؛
الحالة "img":
$('#window-content').html("<img src='"+content+"' class='window-img'/>");
استراحة؛
الحالة "iframe":
$('#window-content').html('<iframe src="'+content+'" التمرير = "yes"frameborder = "0"></iframe>');
$("#window-content-border").css({'overflow':'visible'});
استراحة؛
}
},
/**
* انقر على زر الإغلاق
*/
_مغلق: الوظيفة (){
فار النفس = هذا،
_config = self.config،
_cache = self.cache;
إذا (_cache.isshow) {
إخفاء();
}
إذا (_config.showBg) {
$("#windowbg").hide();
}
$("#windowbg").animate({"opacity":0},'normal');
},
/**
* يتم توسيط الموضع الذي تظهر فيه النافذة المنبثقة بشكل افتراضي
*/
_showDialogPosition: الوظيفة (الحاوية) {
فار النفس = هذا،
_config = self.config،
_cache = self.cache;
$(container).css({'position':'absolute','z-index':_config.zIndex + 1});
فار OffsetTop = Math.floor(($(window).height() - $(container).height())/2) + $(document).scrollTop(),
OffsetLeft = Math.floor(($(window).width() - $(container).width())/2) + $(document).scrollLeft();
// تحديد ما إذا كان موضع x وy يساوي 0 افتراضيًا، إذا كان الأمر كذلك، فقم بتوسيطه، وإلا قم بتغيير موضعه وفقًا للموضع الذي تم تمريره.
إذا(0 === _config.position.x && 0 === _config.position.y){
$(container).offset({'top':offsetTop, 'left':offsetLeft});
}آخر{
$(container).offset({'top':_config.position.y,'left':_config.position.x});
}
},
/**
* تقديم ارتفاع الخلفية السفلية
*/
_renderDocHeight: وظيفة () {
فار النفس = هذا،
_config = self.config;
$("#windowbg").animate({"opacity":_config.opacity},'normal');
إذا(self._isIE6()){
$("#windowbg").css({'background':'#fff','height':$(document).height()+'px','width':$(document).width()+ "بكسل"});
}آخر {
$("#windowbg").css({'background':_config.bgColor,'height':$(document).height()+'px','width':$(document).width()+" بكسل"});
}
},
/*
* تكبير النافذة
*/
_windowResize: الوظيفة(العنصر){
فار النفس = هذا،
_config = self.config;
$(window).unbind('تغيير الحجم');
$(نافذة).bind('تغيير الحجم',function(){
t && ClearTimeout(t);
فار تي = setTimeout(function(){
إذا (_config.isResize) {
self._showDialogPosition(elem);
self._renderDocHeight();
}
},200);
});
},
/**
* ما إذا كانت النافذة يتم تمريرها باستخدام شريط التمرير
*/
_windowIsScroll: الوظيفة (العنصر) {
فار النفس = هذا،
_config = self.config;
$(window).unbind('scroll');
$(نافذة).bind('التمرير',وظيفة(){
t && ClearTimeout(t);
فار تي = setTimeout(function(){
إذا (_config.isScroll) {
self._showDialogPosition(elem);
self._renderDocHeight();
}
},200);
});
},
/**
* حركة النافذة
*/
_windowMove: الوظيفة (){
فار النفس = هذا،
_config = self.config،
_cache = self.cache;
فار ماوسX = 0،
mouseY = 0;
$('.window-title').mouseenter(function(){
$(this).css({'المؤشر':'نقل'});
});
$('.window-title').mouseleave(function(){
$(this).css({'المؤشر':'افتراضي'});
});
$('.window-title').mousedown(function(e){
_cache.moveable = true;
mouseX = e.clientX - $(this).offset().left;
mouseY = e.clientY - $(this).offset().top;
$('.window-title').css({'المؤشر':'نقل'});
});
$(مستند).mouseup(function(){
إذا (!_cache.moveable) {
يعود؛
}
$('.window-title').css({'cursor':'default'});
_cache.moveable = false;
});
$('#window-box').mousemove(function(e){
إذا (_cache.moveable) {
$(this).css({'left':e.clientX - mouseX + 'px','top':e.clientY - mouseY + 'px'});
}
});
},
/*
* تحديد ما إذا كان متصفح IE6
* @return {منطقية}
*/
_isIE6: وظيفة () {
return navigator.userAgent.match(/MSIE 6.0/)!= null;
}
};