Actuellement testé : prend en charge IE6+ Firefox, le navigateur Google, etc.
Jetons d'abord un coup d'œil aux éléments de configuration de base de ce composant : comme suit :
Copiez le code comme suit :
ceci.config = {
targetCls : '.clickElem', // Cliquez sur l'élément
titre : 'Je suis Long En', // titre de la fenêtre
content : 'text:<p>Je suis un dragon</p>',
//contenu : 'img:http://www.baidu.com/a.jpg',
// Contenu de la fenêtre {texte : contenu spécifique | id : nom de l'identifiant img : lien d'image |
// iframe : lien src} {chaîne}
largeur : 400, // largeur du contenu
hauteur : 300, //Hauteur du contenu
height : 30, // La hauteur par défaut du titre est 30
drag : true, // S'il peut être déplacé par défaut, c'est vrai
time: 3000, // Si l'heure de fermeture automatique de la fenêtre est vide ou 'indéfinie', elle ne sera pas fermée.
showBg: true, // Définit s'il faut afficher le calque de masque. La valeur par défaut est true mask.
fermable : '#window-close', // bouton de fermeture
bgColor : '#000', //Couleur par défaut
opacité : 0,5,//Transparence par défaut
position : {
x : 0,
y : 0 //La valeur par défaut est égale à 0, centrée
},
zIndice : 10000,
isScroll : true, //Par défaut, la fenêtre défile au fur et à mesure qu'elle défile
isResize : true, // Mise à l'échelle avec mise à l'échelle de la fenêtre par défaut
rappel : null // Fonction de rappel après l'affichage de la fenêtre contextuelle
} ;
Écrivez un simple plug-in pop-up en JS (y compris la démo et le code source)
11/12/2013 22h30 par Long En0707, 409 lectures, 1 commentaire, collection, modifier
Je n'ai pas terminé beaucoup de projets récemment, et je prenais une pause aujourd'hui, alors j'ai pris ce temps pour étudier la simple fonction pop-up JS. Bien sûr, il existe de nombreux plug-ins en ligne, et je l'ai fait. Je n'ai pas regardé attentivement le code source des plug-ins en ligne. Je me suis simplement appuyé sur eux. Les plug-ins pop-up que j'utilise quotidiennement ont tellement de fonctions pour réaliser mes propres idées pop-up. j'ai peut-être atteint les fonctions de base, donc si je veux le rendre meilleur et plus complet, je dois continuer à l'optimiser à l'avenir ! S'il y a des défauts ! S'il te plaît, pardonne-moi!
Puisque tout le monde sait à quoi ressemble la fenêtre pop-up, je n’ai pas fait de rendu de démonstration cette fois-ci ! Actuellement testé : prend en charge IE6+ Firefox, le navigateur Google, etc.
Jetons d'abord un coup d'œil aux éléments de configuration de base de ce composant : comme suit :
Appuyez sur Ctrl+C pour copier le code
Appuyez sur Ctrl+C pour copier le code
1. Prise en charge de la configuration du contenu du titre, de la hauteur du titre, de la largeur et de la hauteur du contenu, si la fenêtre peut être automatiquement fermée après avoir fait glisser la fenêtre contextuelle, s'il faut afficher la configuration de la couleur et de la transparence d'arrière-plan du masque, et la position d'affichage de la fenêtre. Les axes x et y par défaut sont 0. Pour l'alignement central, vous pouvez également configurer vous-même la position de l'axe x et de l'axe y, mais veuillez noter que l'axe X et l'axe y sont définis. L'axe y est relatif à l'élément parent. Si le positionnement relatif de l'élément parent n'est pas spécifié, il sera relatif au document par défaut. Bien sûr, il n'est pas recommandé que la largeur et la hauteur du contenu de la fenêtre dépassent la largeur et la hauteur d'un écran du navigateur. Essayez d'être plus petite que la largeur et la hauteur du premier écran, car j'ai utilisé la fenêtre contextuelle d'autres personnes. Dans le passé, il existerait après avoir cliqué sur le bouton de fermeture car le navigateur dispose d'une barre de défilement. Après avoir déclenché l'événement de barre de défilement, la fenêtre ne peut pas être fermée. Si la largeur et la hauteur du contenu sont grandes, cela n'a pas d'importance. . La fenêtre aura automatiquement des barres de défilement.
2. Les éléments de configuration du contenu de la fenêtre prennent en charge quatre types de 1. texte (texte). Le texte peut être configuré comme suit : <p>Je suis Long En</p>.
2. img (image) Vous pouvez configurer img comme suit : http://www.baidu.com/a.jpg
3. id (nœud id) peut être configuré comme suit 'id:XX'
4. iframe peut être configuré comme suit « iframe:http://www.baidu.com (adresse iframe) »
3. Fournissez une fonction de rappel après la fenêtre pop-up : Par exemple, vous pouvez faire ce que vous voulez après la fenêtre pop-up.
Il n'y a donc rien à dire sur le composant fenêtre pop-up. Bien sûr, si vous souhaitez utiliser le style CSS dans votre propre projet, vous pouvez le réécrire vous-même. Je n'ai pas écrit le JS à mort, mais je complète simplement la base. Fonctions commerciales de la fenêtre contextuelle de JS.
Le code HTML est le suivant :
Copiez le code comme suit :
<div style="margin-top:10px;">Je suis Long En, s'il vous plaît cliquez sur moi</div>
<div style="margin-top:10px;">Je suis Long En, s'il vous plaît cliquez sur moi</div>
Le code CSS est le suivant
Copiez le code comme suit :
<style type="text/css">
*{margin:0;padding:0;list-style-type:aucun;}
une,img{frontière:0;}
corps{font:12px/180% Arial, Helvetica, sans-serif;}
étiquette{curseur:pointeur;}
#window-box{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 répétition-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 pas de répétition; curseur: pointeur;}
#window-content-border{padding:5px 0 5px 5px;}
</style>
Le code JS est le suivant
Copiez le code comme suit :
/**
*Écrire un composant de fenêtre contextuelle JS
* @date 2013-12-10
* @auteur tugenhua
* @email [email protected]
*/
fonction Superposition (options) {
ceci.config = {
targetCls : '.clickElem', // Cliquez sur l'élément
titre : 'Je suis Long En', // titre de la fenêtre
content : 'text:<p>Je suis Long En</p>',
//contenu : 'img:http://gtms01.alicdn.com/tps/i1/T1USkqFc0dXXb5rXb6-1060-300.jpg',
// Contenu de la fenêtre {texte : contenu spécifique | id : nom de l'identifiant img : lien d'image |
// iframe : lien src} {chaîne}
largeur : 400, // largeur du contenu
hauteur : 300, //Hauteur du contenu
height : 30, // La hauteur par défaut du titre est 30
drag : true, // S'il peut être déplacé par défaut, c'est vrai
time: 3000, // Si l'heure de fermeture automatique de la fenêtre est vide ou 'indéfinie', elle ne sera pas fermée.
showBg: true, // Définit s'il faut afficher le calque de masque. La valeur par défaut est true mask.
fermable : '#window-close', // bouton de fermeture
bgColor : '#000', //Couleur par défaut
opacité : 0,5,//Transparence par défaut
position : {
x : 0,
y : 0 //La valeur par défaut est égale à 0, centrée
},
zIndice : 10000,
isScroll : true, //Par défaut, la fenêtre défile au fur et à mesure qu'elle défile
isResize : true, // Mise à l'échelle avec mise à l'échelle de la fenêtre par défaut
rappel : null // Fonction de rappel après l'affichage de la fenêtre contextuelle
} ;
ceci.cache = {
isrender : true, // La structure HTML contextuelle n'est rendue qu'une seule fois
isshow: false, // Si la fenêtre a été affichée
mobile : false
} ;
this.init(options);
}
Superposition.prototype = {
constructeur : Superposition,
init : fonction (options) {
this.config = $.extend(this.config,options || {});
var soi = ceci,
_config = self.config,
_cache = self.cache;
$(_config.targetCls).each(function(index,item){
$(item).unbind('clic');
$(item).bind('clic',function(){
// Afficher la structure HTML contextuelle
self._renderHTML();
// mouvement de la fenêtre
self._windowMove();
});
});
//Zoom de la fenêtre
self._windowResize('#window-box');
// La fenêtre défile avec la barre de défilement
self._windowIsScroll('#window-box');
},
/*
* Rendu de la structure HTML contextuelle
*/
_renderHTML : fonction(){
var soi = ceci,
_config = self.config,
_cache = self.cache;
varhtml ='';
si(_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">Fermer</span></div>'+
'<div id="window-content-border"><div id="window-content"></div></div>' +
'</div>';
$('corps').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 = faux ;
// Détermine le format du contenu transmis
self._contentType();
si(_config.showBg) {
// Rendu la largeur et la hauteur de l'arrière-plan
self._renderDocHeight();
$("#windowbg").show();
self.show();
}autre {
$("#windowbg").hide();
self.show();
}
self._showDialogPosition("#window-box");
}autre {
// Si la fenêtre pop-up a été créée et est juste masquée, alors nous l'affichons
self.show();
$("#windowbg").animate({"opacity":_config.opacity},'normal');
si(_config.showBg) {
$("#windowbg").show();
}
self._showDialogPosition("#window-box");
}
$(_config.closable).unbind('clic');
$(_config.closable).bind('click',function(){
// Cliquez sur le bouton fermer
self._closed();
});
// Fonction de rappel après rendu
_config.callback && $.isFunction(_config.callback) && _config.callback();
},
/**
* Afficher la fenêtre contextuelle
*/
afficher : fonction(){
var soi = ceci,
_config = self.config,
_cache = self.cache;
$("#window-box") && $("#window-box").show();
_cache.isshow = vrai ;
if(_config.time == '' || typeof _config.time == 'indéfini') {
retour;
}autre {
t && clearTimeout(t);
var t = setTimeout(fonction(){
self._closed();
},_config.time);
}
},
/**
* Masquer la fenêtre contextuelle
*/
cacher : fonction(){
var soi = ceci,
_cache = self.cache;
$("#window-box") && $("#window-box").hide();
_cache.isshow = faux ;
},
/**
* Déterminer le type de contenu transmis
*/
_contentType : fonction(){
var soi = ceci,
_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);
commutateur (type de contenu) {
cas 'texte' :
$('#window-content').html(content);
casser;
cas 'id' :
$('#window-content').html($('#'+content).html());
casser;
cas 'img' :
$('#window-content').html("<img src=""+content+"' class='window-img'/>");
casser;
cas 'iframe' :
$('#window-content').html('<iframe src="'+content+'" scrolling="yes" frameborder="0"></iframe>');
$("#window-content-border").css({'overflow':'visible'});
casser;
}
},
/**
* Cliquez sur le bouton fermer
*/
_fermé : fonction(){
var soi = ceci,
_config = self.config,
_cache = self.cache;
si(_cache.isshow) {
self.hide();
}
si(_config.showBg) {
$("#windowbg").hide();
}
$("#windowbg").animate({"opacity":0},'normal');
},
/**
* La position où la fenêtre pop-up est affichée est centrée par défaut
*/
_showDialogPosition : fonction (conteneur) {
var soi = ceci,
_config = self.config,
_cache = self.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();
// Détermine si la position x, y est égale à 0 par défaut. Si c'est le cas, centrez-la, sinon repositionnez-la en fonction de la position passée.
if(0 === _config.position.x && 0 === _config.position.y){
$(container).offset({'top':offsetTop, 'left':offsetLeft});
}autre{
$(container).offset({'top':_config.position.y,'left':_config.position.x});
}
},
/**
* Rendre la hauteur de l'arrière-plan inférieur
*/
_renderDocHeight : fonction(){
var soi = ceci,
_config = self.config;
$("#windowbg").animate({"opacity":_config.opacity},'normal');
si(self._isIE6()){
$("#windowbg").css({'background':'#fff','height':$(document).height()+'px','width':$(document).width()+ "px"});
}autre {
$("#windowbg").css({'background':_config.bgColor,'height':$(document).height()+'px','width':$(document).width()+" px"});
}
},
/*
* Zoom sur la fenêtre
*/
_windowResize : fonction (elem) {
var soi = ceci,
_config = self.config;
$(window).unbind('resize');
$(window).bind('resize',function(){
t && clearTimeout(t);
var t = setTimeout(fonction(){
si(_config.isResize){
self._showDialogPosition(elem);
self._renderDocHeight();
}
},200);
});
},
/**
* Si la fenêtre défile avec la barre de défilement
*/
_windowIsScroll : fonction (elem) {
var soi = ceci,
_config = self.config;
$(window).unbind('scroll');
$(window).bind('scroll',function(){
t && clearTimeout(t);
var t = setTimeout(fonction(){
si(_config.isScroll){
self._showDialogPosition(elem);
self._renderDocHeight();
}
},200);
});
},
/**
* Mouvement de fenêtre
*/
_windowMove : fonction(){
var soi = ceci,
_config = self.config,
_cache = self.cache;
var sourisX = 0,
sourisY = 0 ;
$('.window-title').mouseenter(function(){
$(this).css({'cursor':'move'});
});
$('.window-title').mouseleave(function(){
$(this).css({'cursor':'default'});
});
$('.window-title').mousedown(function(e){
_cache.moveable = true ;
mouseX = e.clientX - $(this).offset().left;
mouseY = e.clientY - $(this).offset().top;
$('.window-title').css({'cursor':'move'});
});
$(document).mouseup(function(){
si(!_cache.moveable) {
retour;
}
$('.window-title').css({'cursor':'default'});
_cache.moveable = faux ;
});
$('#window-box').mousemove(function(e){
si(_cache.moveable) {
$(this).css({'left':e.clientX - mouseX + 'px','top':e.clientY - mouseY + 'px'});
}
});
},
/*
* Déterminez s'il s'agit d'un navigateur IE6
* @return {Booléen}
*/
_isIE6 : fonction(){
return navigator.userAgent.match(/MSIE 6.0/)!= null;
}
} ;