การทดสอบในปัจจุบัน: รองรับ IE6+ Firefox, เบราว์เซอร์ Google ฯลฯ
ขั้นแรกเรามาดูรายการการกำหนดค่าพื้นฐานของส่วนประกอบนี้กันก่อน ดังนี้:
คัดลอกรหัสรหัสดังต่อไปนี้:
นี้.config = {
targetCls : '.clickElem', // คลิกองค์ประกอบ
title: 'I am Long En', // ชื่อหน้าต่าง
content : 'text:<p>ฉันเป็นมังกร</p>',
//เนื้อหา: 'img:http://www.baidu.com/a.jpg',
// เนื้อหาหน้าต่าง {text: เนื้อหาเฉพาะ | .id: ชื่อ id | .img: ลิงก์รูปภาพ |
// iframe:src ลิงค์} {สตริง}
width: 400, // ความกว้างของเนื้อหา
height : 300, //ความสูงของเนื้อหา
height : 30, // ความสูงเริ่มต้นของชื่อคือ 30
ลาก : จริง // ไม่ว่าจะสามารถลากโดยค่าเริ่มต้นได้หรือไม่ก็ตาม
เวลา: 3000, // หากเวลาในการปิดหน้าต่างโดยอัตโนมัติว่างเปล่าหรือ 'ไม่ได้กำหนด' หน้าต่างนั้นจะไม่ถูกปิด
showBg: true, // ตั้งค่าว่าจะแสดงเลเยอร์มาสก์หรือไม่ โดยค่าเริ่มต้นคือ True Mask
closeable : '#window-close', // ปุ่มปิด
bgColor: '#000', //สีเริ่มต้น
ความทึบ: 0.5 // ความโปร่งใสเริ่มต้น
ตำแหน่ง : {
x: 0,
y: 0 //ค่าเริ่มต้นคือ 0 โดยจัดให้อยู่กึ่งกลาง
-
ดัชนี z: 10,000,
isScroll: true, //ตามค่าเริ่มต้น หน้าต่างจะเลื่อนไปตามที่เลื่อน
isResize : true, // ปรับขนาดด้วยการปรับขนาดหน้าต่างตามค่าเริ่มต้น
โทรกลับ: null//ฟังก์ชันโทรกลับหลังจากหน้าต่างป๊อปอัปปรากฏขึ้น
-
เขียนปลั๊กอินป๊อปอัปอย่างง่ายใน JS (รวมถึงการสาธิตและซอร์สโค้ด)
11-12-2556 22:30 โดย Long En0707 อ่าน 409 ครั้ง 1 ความคิดเห็น คอลเลกชัน แก้ไข
ช่วงนี้ฉันยังทำโปรเจ็กต์ไม่เสร็จมากนัก และบังเอิญว่าวันนี้ฉันหยุดพัก ดังนั้นฉันจึงใช้เวลานี้เพื่อศึกษาฟังก์ชันป๊อปอัป JS แบบง่าย แน่นอนว่ามีปลั๊กอินออนไลน์มากมาย แต่ฉันก็ทำไม่ได้ อย่าดูซอร์สโค้ดของปลั๊กอินทางออนไลน์อย่างรอบคอบ ฉันแค่อาศัยปลั๊กอินเหล่านี้ที่ฉันใช้ทุกวันมีฟังก์ชันมากมายในการตระหนักถึงแนวคิดป๊อปอัปของตัวเอง อาจบรรลุถึงฟังก์ชั่นพื้นฐานแล้ว ดังนั้นหากฉันต้องการทำให้ดีขึ้นและสมบูรณ์ยิ่งขึ้น ฉันจะต้องเพิ่มประสิทธิภาพมันต่อไปในอนาคต! หากมีข้อบกพร่องประการใด! โปรดยกโทษให้ฉันด้วย!
เนื่องจากทุกคนรู้ดีว่าหน้าต่างป๊อปอัปมีลักษณะอย่างไร ฉันจึงไม่ได้ทำการสาธิตการแสดงผลในครั้งนี้! การทดสอบในปัจจุบัน: รองรับ IE6+ Firefox, เบราว์เซอร์ Google ฯลฯ
ขั้นแรกเรามาดูรายการการกำหนดค่าพื้นฐานของส่วนประกอบนี้กันก่อน ดังนี้:
กด Ctrl+C เพื่อคัดลอกโค้ด
กด Ctrl+C เพื่อคัดลอกโค้ด
1. รองรับการกำหนดค่าเนื้อหาชื่อเรื่อง ความสูงของชื่อเรื่อง ความกว้างและความสูงของเนื้อหา ไม่ว่าจะเป็นหน้าต่างที่สามารถปิดโดยอัตโนมัติหลังจากการลากหน้าต่างป๊อปอัป หรือไม่ว่าจะแสดงการกำหนดค่าของสีพื้นหลังมาสก์และความโปร่งใสหรือไม่ และตำแหน่งการแสดงผลของหน้าต่าง แกน x เริ่มต้น 0 และแกน y 0 คือ สำหรับการจัดตำแหน่งกึ่งกลาง คุณยังสามารถกำหนดค่าตำแหน่งของแกน x และแกน y ได้ด้วยตัวเอง แต่โปรดทราบว่าแกน X และ แกน y จะสัมพันธ์กับองค์ประกอบหลัก หากไม่ได้ระบุตำแหน่งสัมพัทธ์ขององค์ประกอบหลัก มันจะสัมพันธ์กับเอกสารตามค่าเริ่มต้น แน่นอนว่าไม่แนะนำให้ความกว้างและความสูงของเนื้อหาหน้าต่างเกินความกว้างและความสูงของหน้าจอเดียวของเบราว์เซอร์ ปลั๊กอินในอดีตจะมีอยู่หลังจากคลิกปุ่มปิดเนื่องจากเบราว์เซอร์มีแถบเลื่อน หลังจากทริกเกอร์เหตุการณ์แถบเลื่อน หน้าต่างจะไม่สามารถปิดได้ หากความกว้างและความสูงของเนื้อหามีขนาดใหญ่ ก็ไม่สำคัญ . หน้าต่างจะมีแถบเลื่อนอัตโนมัติ
2. รายการการกำหนดค่าเนื้อหาหน้าต่างรองรับ 1. ข้อความ (ข้อความ) สี่ประเภท สามารถกำหนดค่าข้อความได้ดังนี้: <p>I am Long En</p>
2. img (รูปภาพ) คุณสามารถกำหนดค่า img ได้ดังนี้: http://www.baidu.com/a.jpg
3. id (id node) สามารถกำหนดค่าได้ดังนี้ 'id:XX'
4. iframe สามารถกำหนดค่าได้ดังนี้ 'iframe:http://www.baidu.com (ที่อยู่ iframe)'
3. จัดเตรียมฟังก์ชันโทรกลับหลังหน้าต่างป๊อปอัป: ตัวอย่างเช่น คุณสามารถทำสิ่งที่คุณต้องการทำหลังจากหน้าต่างป๊อปอัป
ดังนั้นจึงไม่มีอะไรจะพูดเกี่ยวกับองค์ประกอบหน้าต่างป๊อปอัป แน่นอน หากคุณต้องการใช้สไตล์ css ในโครงการของคุณเอง คุณสามารถเขียนมันใหม่ได้ด้วยตัวเอง ฉันไม่ได้เขียน JS to death แต่เพียงทำให้สมบูรณ์เท่านั้น ฟังก์ชั่นธุรกิจหน้าต่างป๊อปอัปของ JS
รหัส HTML มีลักษณะดังนี้:
คัดลอกรหัสรหัสดังต่อไปนี้:
<div style="margin-top:10px;">ฉันชื่อ Long En โปรดคลิกฉัน</div>
<div style="margin-top:10px;">ฉันชื่อ Long En โปรดคลิกฉัน</div>
รหัส CSS มีดังนี้
คัดลอกรหัสรหัสดังต่อไปนี้:
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
ก,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif;}
ป้ายกำกับ {เคอร์เซอร์: ตัวชี้;}
# กล่องหน้าต่าง {เส้นขอบ: 5px ทึบ # E9F3FD; พื้นหลัง: #FFF;}
.window-title{position:relative;height:30px;border:1px solid #A6C9E1;overflow:hidden;พื้นหลัง:url(images/tipbg.png) 0 0 ซ้ำ-x;}
.window-title h2{padding-left:5px;font-size:14px;color:#666;}
# หน้าต่างปิด {ตำแหน่ง: สัมบูรณ์; ขวา: 10px; ด้านบน: 8px; ความกว้าง: 10px; ความสูง: 16px; เยื้องข้อความ: -10em; ล้น: ซ่อน; พื้นหลัง: url (รูปภาพ / tipbg.png) 100% -49px ไม่ซ้ำ; เคอร์เซอร์: ตัวชี้;}
# หน้าต่างเนื้อหาเส้นขอบ {การขยาย: 5px 0 5px 5px;}
</สไตล์>
รหัส JS มีดังนี้
คัดลอกรหัสรหัสดังต่อไปนี้:
-
* เขียนองค์ประกอบป๊อปอัป JS
* @วันที่ 10-12-2556
* @ผู้เขียน tugenhua
* @อีเมล [email protected]
-
ฟังก์ชั่นซ้อนทับ (ตัวเลือก) {
นี้.config = {
targetCls : '.clickElem', // คลิกองค์ประกอบ
title: 'I am Long En', // ชื่อหน้าต่าง
content : 'text:<p>ฉันชื่อ Long En</p>',
//เนื้อหา: 'img:http://gtms01.alicdn.com/tps/i1/T1USkqFc0dXXb5rXb6-1060-300.jpg',
// เนื้อหาหน้าต่าง {text: เนื้อหาเฉพาะ | .id: ชื่อ id | .img: ลิงก์รูปภาพ |
// iframe:src ลิงค์} {สตริง}
width: 400, // ความกว้างของเนื้อหา
height : 300, //ความสูงของเนื้อหา
height : 30, // ความสูงเริ่มต้นของชื่อคือ 30
ลาก : จริง // ไม่ว่าจะสามารถลากโดยค่าเริ่มต้นได้หรือไม่ก็ตาม
เวลา: 3000, // หากเวลาในการปิดหน้าต่างโดยอัตโนมัติว่างเปล่าหรือ 'ไม่ได้กำหนด' หน้าต่างนั้นจะไม่ถูกปิด
showBg: true, // ตั้งค่าว่าจะแสดงเลเยอร์มาสก์หรือไม่ โดยค่าเริ่มต้นคือ True Mask
closeable : '#window-close', // ปุ่มปิด
bgColor: '#000', //สีเริ่มต้น
ความทึบ: 0.5 // ความโปร่งใสเริ่มต้น
ตำแหน่ง : {
x: 0,
y: 0 //ค่าเริ่มต้นคือ 0 โดยจัดให้อยู่กึ่งกลาง
-
ดัชนี z: 10,000,
isScroll: true, //ตามค่าเริ่มต้น หน้าต่างจะเลื่อนไปตามที่เลื่อน
isResize : true, // ปรับขนาดด้วยการปรับขนาดหน้าต่างตามค่าเริ่มต้น
โทรกลับ: null//ฟังก์ชันโทรกลับหลังจากหน้าต่างป๊อปอัปปรากฏขึ้น
-
นี้.แคช = {
isrender: true, // โครงสร้าง HTML แบบป๊อปอัปจะแสดงผลเพียงครั้งเดียวเท่านั้น
isshow: false, // ไม่ว่าจะแสดงหน้าต่างหรือไม่
เคลื่อนย้ายได้ : เท็จ
-
this.init (ตัวเลือก);
-
โอเวอร์เลย์.ต้นแบบ = {
ตัวสร้าง: โอเวอร์เลย์
init: ฟังก์ชั่น (ตัวเลือก) {
this.config = $.extend(this.config,ตัวเลือก || {});
var self = นี่
_config = ตนเอง.config,
_cache = ตนเอง.แคช;
$(_config.targetCls).each(function(index,item){
$(รายการ).unbind('คลิก');
$(item).bind('คลิก',function(){
// แสดงผลโครงสร้าง HTML ป๊อปอัป
self._renderHTML();
// การเคลื่อนไหวของหน้าต่าง
self._windowMove();
-
-
// ซูมหน้าต่าง
self._windowResize('#window-box');
// หน้าต่างเลื่อนด้วยแถบเลื่อน
self._windowIsScroll('#window-box');
-
-
* แสดงผลโครงสร้าง HTML ป๊อปอัป
-
_renderHTML: ฟังก์ชั่น(){
var self = นี่
_config = ตนเอง.config,
_cache = ตนเอง.แคช;
var 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').ผนวก(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 = เท็จ;
// กำหนดรูปแบบของเนื้อหาที่ส่งผ่าน
self._contentType();
ถ้า(_config.showBg) {
// แสดงความกว้างและความสูงของพื้นหลัง
self._renderDocHeight();
$("#windowbg").show();
ตนเอง.แสดง();
}อื่น {
$("#windowbg").hide();
ตนเอง.แสดง();
-
self._showDialogPosition("#หน้าต่างกล่อง");
}อื่น {
// หากหน้าต่างป๊อปอัปถูกสร้างขึ้นและเพิ่งถูกซ่อนไว้ เราจะแสดงหน้าต่างดังกล่าว
ตนเอง.แสดง();
$("#windowbg").animate({"opacity":_config.opacity},'normal');
ถ้า(_config.showBg) {
$("#windowbg").show();
-
self._showDialogPosition("#หน้าต่างกล่อง");
-
$(_config.closable).unbind('คลิก');
$(_config.closable).bind('คลิก',function(){
// คลิกปุ่มปิด
self._closed();
-
// ฟังก์ชั่นโทรกลับหลังจากการเรนเดอร์
_config.callback && $.isFunction(_config.callback) && _config.callback();
-
-
* แสดงหน้าต่างป๊อปอัป
-
แสดง: ฟังก์ชั่น () {
var self = นี่
_config = ตนเอง.config,
_cache = ตนเอง.แคช;
$("#หน้าต่างกล่อง") && $("#หน้าต่างกล่อง").show();
_cache.isshow = จริง;
ถ้า (_config.time == '' || typeof _config.time == 'ไม่ได้กำหนด') {
กลับ;
}อื่น {
t && clearTimeout(t);
var t = setTimeout(ฟังก์ชัน(){
self._closed();
},_config.เวลา);
-
-
-
* ซ่อนหน้าต่างป๊อปอัป
-
ซ่อน: ฟังก์ชั่น () {
var self = นี่
_cache = ตนเอง.แคช;
$("#หน้าต่างกล่อง") && $("#หน้าต่างกล่อง").hide();
_cache.isshow = เท็จ;
-
-
* กำหนดประเภทของเนื้อหาที่ส่งผ่านเข้า
-
_contentType: ฟังก์ชั่น(){
var self = นี่
_config = ตนเอง.config,
_cache = ตนเอง.แคช;
var contentType = _config.content.substring(0,_config.content.indexOf(///))
content = _config.content.substring(_config.content.indexOf(///)+1,_config.content.length);
สวิตช์ (ประเภทเนื้อหา) {
กรณี 'ข้อความ':
$('#window-content').html(เนื้อหา);
หยุดพัก;
กรณี 'รหัส':
$('#window-content').html($('#'+content).html());
หยุดพัก;
กรณี 'img':
$('#window-content').html("<img src='"+content+"' class='window-img'/>");
หยุดพัก;
กรณี 'iframe':
$('#window-content').html('<iframe src="'+content+'" scrolling="yes" frameborder="0"></iframe>');
$("#window-content-border").css({'overflow':'visible'});
หยุดพัก;
-
-
-
* คลิกปุ่มปิด
-
_ปิด: ฟังก์ชั่น(){
var self = นี่
_config = ตนเอง.config,
_cache = ตนเอง.แคช;
ถ้า (_cache.isshow) {
ตนเอง.ซ่อน();
-
ถ้า(_config.showBg) {
$("#windowbg").hide();
-
$("#windowbg").animate({"opacity":0},'normal');
-
-
* ตำแหน่งที่หน้าต่างป๊อปอัปแสดงอยู่ตรงกลางตามค่าเริ่มต้น
-
_showDialogPosition: ฟังก์ชั่น (คอนเทนเนอร์) {
var self = นี่
_config = ตนเอง.config,
_cache = ตนเอง.แคช;
$(container).css({'position':'absolute','z-index':_config.zIndex + 1});
var 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});
}อื่น{
$(คอนเทนเนอร์).offset({'top':_config.position.y,'left':_config.position.x});
-
-
-
* แสดงความสูงของพื้นหลังด้านล่าง
-
_renderDocHeight: ฟังก์ชั่น(){
var self = นี่
_config = ตนเอง.config;
$("#windowbg").animate({"opacity":_config.opacity},'normal');
ถ้า(self._isIE6()){
$("#windowbg").css({'พื้นหลัง':'#fff','height':$(document).height()+'px','width':$(document).width()+ "พิกเซล"});
}อื่น {
$("#windowbg").css({'พื้นหลัง':_config.bgColor,'height':$(document).height()+'px','width':$(document).width()+" พิกเซล"});
-
-
-
* ซูมหน้าต่าง
-
_windowResize: ฟังก์ชั่น (องค์ประกอบ) {
var self = นี่
_config = ตนเอง.config;
$(window).unbind('resize');
$(window).bind('resize',function(){
t && clearTimeout(t);
var t = setTimeout(ฟังก์ชัน(){
ถ้า(_config.isResize){
self._showDialogPosition(องค์ประกอบ);
self._renderDocHeight();
-
},200);
-
-
-
* ไม่ว่าหน้าต่างจะเลื่อนด้วยแถบเลื่อนหรือไม่
-
_windowIsScroll: ฟังก์ชั่น (องค์ประกอบ) {
var self = นี่
_config = ตนเอง.config;
$(window).unbind('scroll');
$(window).bind('scroll',function(){
t && clearTimeout(t);
var t = setTimeout(ฟังก์ชัน(){
ถ้า(_config.isScroll){
self._showDialogPosition(องค์ประกอบ);
self._renderDocHeight();
-
},200);
-
-
-
* การเคลื่อนไหวของหน้าต่าง
-
_windowMove: ฟังก์ชั่น(){
var self = นี่
_config = ตนเอง.config,
_cache = ตนเอง.แคช;
var mouseX = 0,
เมาส์ Y = 0;
$('.window-title').mouseenter(function(){
$(this).css({'cursor':'move'});
-
$('.window-title').mouseleave(function(){
$(this).css({'cursor':'default'});
-
$('.window-title').mousedown(ฟังก์ชั่น(e){
_cache.moveable = จริง;
mouseX = e.clientX - $(นี่).offset().left;
mouseY = e.clientY - $(นี่).offset().top;
$('.window-title').css({'cursor':'move'});
-
$(เอกสาร).mouseup(ฟังก์ชั่น(){
ถ้า(!_cache.เคลื่อนย้ายได้) {
กลับ;
-
$('.window-title').css({'cursor':'default'});
_cache.moveable = เท็จ;
-
$('#window-box').mousemove(ฟังก์ชั่น(e){
ถ้า(_cache.เคลื่อนย้ายได้) {
$(this).css({'left':e.clientX - mouseX + 'px','top':e.clientY - mouseY + 'px'});
-
-
-
-
* ตรวจสอบว่าเป็นเบราว์เซอร์ IE6 หรือไม่
* @return {บูลีน}
-
_isIE6: ฟังก์ชั่น(){
กลับ navigator.userAgent.match(/MSIE 6.0/)!= null;
-
-