Saat ini diuji: mendukung IE6+ Firefox, browser Google, dll.
Pertama mari kita lihat item konfigurasi dasar komponen ini: sebagai berikut:
Copy kode kodenya sebagai berikut:
ini.config = {
targetCls : '.clickElem', // Elemen klik
title: 'Saya Long En', // judul jendela
content : 'teks:<p>Aku adalah seekor naga</p>',
//isi: 'img:http://www.baidu.com/a.jpg',
// Konten jendela {teks: konten tertentu |. id: nama id |.img: tautan gambar |
// iframe: tautan src} {string}
lebar: 400, // lebar konten
tinggi : 300, //Tinggi konten
tinggi : 30, // Tinggi default judul adalah 30
drag : benar, // Apakah dapat diseret secara default adalah benar
waktu: 3000, // Jika waktu untuk menutup jendela secara otomatis kosong atau 'tidak ditentukan', maka jendela tidak akan ditutup.
showBg: true, // Mengatur apakah akan menampilkan lapisan mask. Nilai defaultnya adalah true mask.
dapat ditutup : '#tutup-jendela', // tombol tutup
bgColor: '#000', //Warna default
opacity: 0,5, // Transparansi default
posisi : {
x: 0,
y: 0 //Defaultnya sama dengan 0, di tengah
},
zIndeks: 10000,
isScroll: true, //Secara default, jendela akan bergulir seiring dengan penggulirannya
isResize : true, // Menskalakan dengan penskalaan jendela secara default
callback: null//fungsi Callback setelah jendela pop-up ditampilkan
};
Tulis plug-in pop-up sederhana di JS (termasuk demo dan kode sumber)
11-12-2013 22:30 oleh Long En0707, 409 dibaca, 1 komentar, koleksi, edit
Saya belum menyelesaikan banyak proyek akhir-akhir ini, dan kebetulan saya sedang istirahat hari ini, jadi saya meluangkan waktu ini untuk mempelajari fungsi pop-up JS sederhana. Tentu saja, ada banyak plugin online, dan saya tidak menyelesaikannya Saya tidak melihat dengan cermat kode sumber plugin online. Saya hanya mengandalkannya. Plugin pop-up yang saya gunakan setiap hari memiliki begitu banyak fungsi untuk mewujudkan ide pop-up saya sendiri mungkin sudah mencapai fungsi dasarnya, jadi jika saya ingin membuatnya lebih baik dan lebih lengkap, saya perlu terus mengoptimalkannya di masa mendatang! Jika ada kekurangan! Mohon maafkan saya!
Karena semua orang tahu seperti apa jendela pop-upnya, kali ini saya tidak melakukan demonstrasi rendering! Saat ini diuji: mendukung IE6+ Firefox, browser Google, dll.
Pertama mari kita lihat item konfigurasi dasar komponen ini: sebagai berikut:
Tekan Ctrl+C untuk menyalin kode
Tekan Ctrl+C untuk menyalin kode
1. Mendukung konfigurasi konten judul, tinggi judul, lebar dan tinggi konten, apakah jendela dapat ditutup secara otomatis setelah menyeret jendela pop-up, apakah akan menampilkan konfigurasi warna latar belakang topeng dan transparansi, dan posisi tampilan jendela. Sumbu x 0 dan sumbu y 0 default adalah Untuk perataan tengah, Anda juga dapat mengonfigurasi sendiri posisi sumbu x dan sumbu y, namun harap diperhatikan bahwa sumbu X dan sumbu y sumbu y relatif terhadap elemen induk. Jika posisi relatif elemen induk tidak ditentukan, maka secara default akan relatif terhadap dokumen. Tentu saja, tidak disarankan lebar dan tinggi konten jendela melebihi lebar dan tinggi salah satu layar browser. Usahakan lebih kecil dari lebar dan tinggi layar pertama. Karena saya menggunakan pop-up orang lain plug-in di masa lalu, itu akan ada setelah mengklik tombol tutup karena browser memiliki bilah gulir. Setelah memicu acara bilah gulir, jendela tidak dapat ditutup jika lebar dan tinggi kontennya besar, tidak masalah . Jendela secara otomatis akan memiliki bilah gulir.
2. Item konfigurasi konten jendela mendukung empat jenis 1. teks (teks). Teks dapat dikonfigurasi sebagai berikut: <p>Saya Panjang En</p>
2. img (gambar) Anda dapat mengkonfigurasi img sebagai berikut: http://www.baidu.com/a.jpg
3. id (id node) dapat dikonfigurasi sebagai berikut 'id:XX'
4. iframe dapat dikonfigurasi sebagai berikut 'iframe:http://www.baidu.com (alamat iframe)'
3. Menyediakan fungsi panggilan balik setelah jendela pop-up: Misalnya, Anda dapat melakukan apa yang ingin Anda lakukan setelah jendela pop-up.
Jadi tidak ada yang perlu dikatakan tentang komponen jendela pop-up. Tentu saja, jika Anda ingin menggunakan gaya css di proyek Anda sendiri, Anda dapat menulis ulang sendiri. Saya belum menulis JS sampai mati, tetapi hanya menyelesaikan yang dasar fungsi bisnis jendela pop-up JS.
Kode HTMLnya adalah sebagai berikut:
Copy kode kodenya sebagai berikut:
<div style="margin-top:10px;">Saya Long En, silakan klik saya</div>
<div style="margin-top:10px;">Saya Long En, silakan klik saya</div>
Kode CSSnya adalah sebagai berikut
Copy kode kodenya sebagai berikut:
<gaya tipe="teks/css">
*{margin:0;padding:0;tipe-gaya-daftar:tidak ada;}
a,img{batas:0;}
badan{font:12px/180% Arial, Helvetica, sans-serif;}
label{kursor:penunjuk;}
#kotak-jendela{border:5px solid #E9F3FD;background:#FFF;}
.window-title{position:relative;height:30px;border:1px solid #A6C9E1;overflow:hidden;background:url(images/tipbg.png) 0 0 repeat-x;}
.window-title 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 jangan ulangi;kursor:penunjuk;}
#jendela-konten-batas{padding:5px 0 5px 5px;}
</gaya>
Kode JS-nya seperti berikut
Copy kode kodenya sebagai berikut:
/**
* Tulis komponen pop-up JS
* @tanggal 10-12-2013
* @penulis tugenhua
*@email [email protected]
*/
fungsi Hamparan(pilihan){
ini.config = {
targetCls : '.clickElem', // Elemen klik
title: 'Saya Long En', // judul jendela
content : 'teks:<p>Aku Panjang En</p>',
//isi: 'img:http://gtms01.alicdn.com/tps/i1/T1USkqFc0dXXb5rXb6-1060-300.jpg',
// Konten jendela {teks: konten tertentu |. id: nama id |.img: tautan gambar |
// iframe: tautan src} {string}
lebar: 400, // lebar konten
tinggi : 300, //Tinggi konten
tinggi : 30, // Tinggi default judul adalah 30
drag : true, // Apakah dapat diseret secara default adalah benar
waktu: 3000, // Jika waktu untuk menutup jendela secara otomatis kosong atau 'tidak ditentukan', maka jendela tidak akan ditutup.
showBg: true, // Mengatur apakah akan menampilkan lapisan mask. Nilai defaultnya adalah true mask.
dapat ditutup : '#tutup-jendela', // tombol tutup
bgColor: '#000', //Warna default
opacity: 0,5, // Transparansi default
posisi : {
x: 0,
y: 0 //Defaultnya sama dengan 0, di tengah
},
zIndeks: 10000,
isScroll: true, //Secara default, jendela akan bergulir seiring dengan penggulirannya
isResize : true, // Menskalakan dengan penskalaan jendela secara default
callback: null//fungsi Callback setelah jendela pop-up ditampilkan
};
ini.cache = {
isrender: true, // Struktur HTML pop-up hanya dirender satu kali
isshow: false, // Apakah jendela telah ditampilkan
dapat dipindahkan : salah
};
this.init(pilihan);
}
Hamparan.prototipe = {
konstruktor: Hamparan,
init: fungsi(pilihan){
this.config = $.extend(this.config,options || {});
var diri = ini,
_config = mandiri.config,
_cache = mandiri.cache;
$(_config.targetCls).each(fungsi(indeks,item){
$(barang).melepaskan ikatan('klik');
$(item).bind('klik',fungsi(){
// Render struktur HTML pop-up
mandiri._renderHTML();
// pergerakan jendela
diri._windowMove();
});
});
// Memperbesar jendela
self._windowResize('#kotak-jendela');
// Jendela bergulir dengan bilah gulir
self._windowIsScroll('#kotak-jendela');
},
/*
* Render struktur HTML pop-up
*/
_renderHTML: fungsi(){
var diri = ini,
_config = mandiri.config,
_cache = mandiri.cache;
varhtml ='';
if(_cache.isrender) {
html+= '<div id="windowbg" style="display:none;position:absolute;top:0;left:0;"></div>' +
'<div id="kotak-jendela" style="display:none;overflow:hidden;">' +
'<div><h2></h2><span id="window-close">Tutup</span></div>'+
'<div id="window-content-border"><div id="window-content"></div></div>' +
'</div>';
$('tubuh').tambahkan(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.teight + 'px','width':_config.width,'overflow':'hidden'});
_cache.isrender = salah;
// Menentukan format konten yang diteruskan
diri._contentType();
if(_config.showBg) {
// Render lebar dan tinggi latar belakang
self._renderDocHeight();
$("#windowbg").tampilkan();
mandiri.tampilkan();
}kalau tidak {
$("#windowbg").sembunyikan();
mandiri.tampilkan();
}
self._showDialogPosition("#kotak-jendela");
}kalau tidak {
// Jika jendela pop-up sudah dibuat dan disembunyikan saja, maka kita tampilkan
mandiri.tampilkan();
$("#windowbg").animate({"opacity":_config.opacity},'normal');
if(_config.showBg) {
$("#windowbg").tampilkan();
}
self._showDialogPosition("#kotak-jendela");
}
$(_config.closable).unbind('klik');
$(_config.closable).bind('klik',fungsi(){
// Klik tombol tutup
mandiri._closed();
});
// Fungsi panggilan balik setelah rendering
_config.callback && $.isFunction(_config.callback) && _config.callback();
},
/**
* Tampilkan jendela pop-up
*/
tampilkan: fungsi(){
var diri = ini,
_config = mandiri.config,
_cache = mandiri.cache;
$("#kotak-jendela") && $("#kotak-jendela").show();
_cache.isshow = benar;
if(_config.time == '' || typeof _config.time == 'tidak terdefinisi') {
kembali;
}kalau tidak {
t && hapusWaktu habis(t);
var t = setTimeout(fungsi(){
mandiri._closed();
},_config.waktu);
}
},
/**
* Sembunyikan jendela pop-up
*/
sembunyikan: fungsi(){
var diri = ini,
_cache = mandiri.cache;
$("#kotak-jendela") && $("#kotak-jendela").hide();
_cache.isshow = salah;
},
/**
* Tentukan jenis konten yang diteruskan
*/
_Tipe Konten: fungsi(){
var diri = ini,
_config = mandiri.config,
_cache = mandiri.cache;
var contentType = _config.content.substring(0,_config.content.indexOf(":")),
konten = _config.content.substring(_config.content.indexOf(":")+1,_config.content.length);
beralih(Tipe Konten) {
kasus 'teks':
$('#jendela-konten').html(konten);
merusak;
kasus 'id':
$('#jendela-konten').html($('#'+konten).html());
merusak;
kasus 'img':
$('#window-content').html("<img src='"+content+"' class='window-img'/>");
merusak;
kasus 'iframe':
$('#window-content').html('<iframe src="'+content+'" scrolling="yes" frameborder="0"></iframe>');
$("#jendela-konten-perbatasan").css({'overflow':'terlihat'});
merusak;
}
},
/**
* Klik tombol tutup
*/
_tertutup: fungsi(){
var diri = ini,
_config = mandiri.config,
_cache = mandiri.cache;
if(_cache.isshow) {
diri.sembunyikan();
}
if(_config.showBg) {
$("#windowbg").sembunyikan();
}
$("#windowbg").animate({"opacity":0},'normal');
},
/**
* Posisi di mana jendela pop-up ditampilkan berada di tengah secara default
*/
_showDialogPosition: fungsi(wadah) {
var diri = ini,
_config = mandiri.config,
_cache = mandiri.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();
// Tentukan apakah posisi x, y sama dengan 0 secara default. Jika demikian, posisikan di tengah, jika tidak, ubah posisinya sesuai dengan posisi yang diteruskan.
if(0 === _config.position.x && 0 === _config.position.y){
$(wadah).offset({'top':offsetTop, 'kiri':offsetLeft});
}kalau tidak{
$(container).offset({'top':_config.position.y,'left':_config.position.x});
}
},
/**
* Render ketinggian latar belakang bawah
*/
_renderDocHeight: fungsi(){
var diri = ini,
_config = mandiri.config;
$("#windowbg").animate({"opacity":_config.opacity},'normal');
jika(diri._isIE6()){
$("#windowbg").css({'background':'#fff','height':$(document).height()+'px','width':$(document).width()+ "px"});
}kalau tidak {
$("#windowbg").css({'background':_config.bgColor,'height':$(document).height()+'px','width':$(document).width()+" piksel"});
}
},
/*
* Zoom jendela
*/
_windowResize: fungsi(elemen){
var diri = ini,
_config = mandiri.config;
$(jendela).unbind('mengubah ukuran');
$(jendela).bind('mengubah ukuran',fungsi(){
t && hapusWaktu habis(t);
var t = setTimeout(fungsi(){
if(_config.isResize){
self._showDialogPosition(elemen);
self._renderDocHeight();
}
},200);
});
},
/**
* Apakah jendela bergulir dengan bilah gulir
*/
_windowIsScroll: fungsi(elemen){
var diri = ini,
_config = mandiri.config;
$(jendela).melepaskan ikatan('gulir');
$(jendela).bind('gulir',fungsi(){
t && hapusWaktu habis(t);
var t = setTimeout(fungsi(){
if(_config.isScroll){
self._showDialogPosition(elemen);
self._renderDocHeight();
}
},200);
});
},
/**
* Pergerakan jendela
*/
_windowMove: fungsi(){
var diri = ini,
_config = mandiri.config,
_cache = mandiri.cache;
var mouseX = 0,
tikusY = 0;
$('.window-title').mouseenter(fungsi(){
$(ini).css({'kursor':'pindah'});
});
$('.window-title').mouseleave(fungsi(){
$(ini).css({'kursor':'default'});
});
$('.window-title').mousedown(fungsi(e){
_cache.moveable = benar;
mouseX = e.clientX - $(ini).offset().kiri;
mouseY = e.clientY - $(ini).offset().top;
$('.window-title').css({'kursor':'pindah'});
});
$(dokumen).mouseup(fungsi(){
if(!_cache.moveable) {
kembali;
}
$('.window-title').css({'kursor':'default'});
_cache.moveable = salah;
});
$('#kotak-jendela').mousemove(fungsi(e){
if(_cache.dapat dipindahkan) {
$(ini).css({'kiri':e.clientX - mouseX + 'px','top':e.clientY - mouseY + 'px'});
}
});
},
/*
* Tentukan apakah itu browser IE6
* @kembalikan {Boolean}
*/
_isIE6: fungsi(){
kembalikan navigator.userAgent.match(/MSIE 6.0/)!= null;
}
};