Journal du Net > Développeurs > Contributions > Votre astuce Ajax / JavaScript ?
Contribution précédente Contribution suivante

APPEL
A CONTRIBUTION

Vous manipulez le langage JavaScript au quotidien pour concevoir des pages Web ? Vous avez certainement une astuce à partager ! Cet espace est pour vous.
Participez
 Une fenêtre qui s'ouvre dans une div.  
Alexandre Saban

Quel est en 3 lignes l'objectif de votre astuce ?
Cette astuce JavaScript permet de créer une fenêtre qui s'ouvre dans une div.


Décrivez votre astuce en détail. N'hésitez-pas à inclure des portions de codes.
Voici le fichier JavaScript. Précisons que pour le faire
marcher il faut aussi le fichier prototype.js (disponible gratuitement ici : http://www.prototypejs.org/download).

/**
* ASWin
* @author Alexandre Saban
*
* Nesesite prototype.js (disponible gratuitement ici : http://www.prototypejs.org/download)
*/

var ASWin = Class.create();

ASWin.version = "0.1";
ASWin.lastUpdate = '2007-10-12';

// IE :s ou pas :D
var is_ie = (navigator.appVersion.match(/\bMSIE\b/)) ? true : false ;


/**
* constructeur
*
*/
ASWin.prototype ={


initialize : function(options){

options = (typeof(options) == 'object') ? options : ;

this.top = (options.top) ? options.top : 0;
this.left = (options.left) ? options.left : 0;
this.imgBase = (options.imgBase) ? options.imgBase : 'images/aswin/';
this.modal = (typeof(options.modal) == 'boolean') ? options.modal : true ;
this.onclickBgClose = (typeof(options.onclickBgClose) == 'boolean') ? options.onclickBgClose : false ;
this.backgroundColor = (options.backgroundColor) ? options.backgroundColor : 'white';
title = (options.title) ? options.title : '';
content = (options.content) ? options.content : '';
this.onclose = (options.onclose) ? options.onclose : '';
this.afterclose = (options.afterclose) ? options.afterclose : '';
this.noEffects = (typeof(options.noEffects) == 'boolean') ? options.noEffects : false;
this.draggable = (typeof(options.draggable) == 'boolean') ? options.draggable : true;

// la fenetre
this.fenetre = document.createElement('div');

this.fenetre.style.top = this.top + 'px';
this.fenetre.style.left = this.left + 'px';


this.tblFenetre = document.createElement('table');
this.tblFenetre.border = 0;
this.tblFenetre.cellPadding = 0;
this.tblFenetre.cellSpacing = 0;

this.tblFenetre.className = 'asw_tblFenetre';


// barre de titre
var row0 = this.tblFenetre.insertRow(0);

// bordure gauche/haut
var cell0 = row0.insertCell(0);
if(is_ie) cell0.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' +this.imgBase + 'border_left_top.png\', sizingMethod=\'scale\')';
else cell0.style.backgroundImage = 'url(' + this.imgBase + 'border_left_top.png)';
cell0.className = 'asw_border_left_top';

// espace de titre
var cellTitleBar = row0.insertCell(1);
if(is_ie) cellTitleBar.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' +this.imgBase + 'border_top.png\', sizingMethod=\'scale\')';
else cellTitleBar.style.backgroundImage = 'url(' + this.imgBase + 'border_top.png)';

cellTitleBar.className = 'asw_border_top_center';


// bordure droite/haut
var cell2 = row0.insertCell(2);
if(is_ie) cell2.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' +this.imgBase + 'border_right_top.png\', sizingMethod=\'scale\')';
else cell2.style.backgroundImage = 'url(' + this.imgBase + 'border_right_top.png)';
cell2.className = 'asw_border_right_top';


// insertion du tableau pour l'icone, le titre et les boutons
this.tblTitleBar = document.createElement('table');
this.tblTitleBar.border = 0;
this.tblTitleBar.cellPadding = 0;
this.tblTitleBar.cellSpacing = 0;
this.tblTitleBar.className = 'tblTitleBar';


var row0 = this.tblTitleBar.insertRow(0);
// L'icône de la fenetre
this.iconeCell = row0.insertCell(0);

// Titre de la fenetre
this.titleCell = row0.insertCell(1);
this.titleCell.className = 'asw_titleCell';
this.setTitle(title);

// boutons
this.buttonsCell = row0.insertCell(2);
this.buttonsCell.className = 'asw_buttonsCell';

// bouton close
this.btnClose = document.createElement('img');

if(is_ie) this.btnClose.src = this.imgBase + 'btn_close.gif';
else this.btnClose.src = this.imgBase + 'btn_close.png';


this.btnClose.title = 'Fermer';
this.btnClose.alt = 'Fermer';
this.btnClose.className = 'asw_btnClose';

if(is_ie) transportClass =  this;
else this.btnClose.transportClass = this;

Event.observe( this.btnClose, 'click', function(){
if(is_ie) transportClass.close();
else this.transportClass.close();

}
);

this.buttonsCell.appendChild(this.btnClose);

// bordure gauche, contenu de la fenetre et bordure droite
var row1 = this.tblFenetre.insertRow(1);

// la bordure gauche
var cell0 = row1.insertCell(0);
if(is_ie) cell0.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' +this.imgBase + 'border_left.png\', sizingMethod=\'scale\')';
else cell0.style.backgroundImage = 'url(' + this.imgBase + 'border_left.png)';
cell0.className = 'asw_border_left';

// le contenu de la fenetre
this.cellContent = row1.insertCell(1);
this.cellContent.className = 'asw_cellContent';
if(this.backgroundColor != 'none') this.cellContent.style.backgroundColor = this.backgroundColor;

this.setContent(content);

// la bordure droite
var cell2 = row1.insertCell(2);
if(is_ie) cell2.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' +this.imgBase + 'border_right.png\', sizingMethod=\'scale\')';
else cell2.style.backgroundImage = 'url(' + this.imgBase + 'border_right.png)';
cell2.className = 'asw_border_right';

// bordure gauche/bas , bordure bas et bordure droite/bas
var row2 = this.tblFenetre.insertRow(2);

// la bordure gauche/bas
var cell0 = row2.insertCell(0);
if(is_ie) cell0.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' +this.imgBase + 'border_left_bottom.png\', sizingMethod=\'scale\')';
else cell0.style.backgroundImage = 'url(' + this.imgBase + 'border_left_bottom.png)';
cell0.className = 'asw_border_left_bottom';

// la bordure bas
var cell1 = row2.insertCell(1);
if(is_ie) cell1.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' +this.imgBase + 'border_bottom.png\', sizingMethod=\'scale\')';
else cell1.style.backgroundImage = 'url(' + this.imgBase + 'border_bottom.png)';
cell1.className = 'asw_border_bottom';

// la bordure bas droite
var cell2 = row2.insertCell(2);
if(is_ie) cell2.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' +this.imgBase + 'border_right_bottom.png\', sizingMethod=\'scale\')';
else cell2.style.backgroundImage = 'url(' + this.imgBase + 'border_right_bottom.png)';
cell2.className = 'asw_border_right_bottom';

// TODO Ajouter une metode plus propre de gerer les filtres avec IE

// Ajout de le titlebar a la fenetre
cellTitleBar.appendChild(this.tblTitleBar);

},

showFondEcran : function(){

this.fondEcran = document.createElement('div');

this.fondEcran.style.zIndex = this.getLastZIndex();


this.fondEcran.className = 'fondEcran';





if (is_ie){

var divbas = document.createElement('div');

divbas.style.bottom ='0px';
divbas.style.position = 'absolute';
divbas.style.height = '20px';

// divbas.style.display = 'none';
// divbas.style.border = 'solid red 1px';


document.body.appendChild(divbas);

var posDivBas = Element.cumulativeOffset(divbas);

this.fondEcran.style.height = parseInt(posDivBas[1] + 20) + 'px';
this.fondEcran.style.top  = 0;
this.fondEcran.style.left = 0;
document.body.appendChild(this.fondEcran);

} else {

this.fondEcran.style.height = '100%';//Element.getDimensions(document.body).height;
document.body.insertBefore(this.fondEcran, document.body.childNodes[0]);
}

// Ferme la fenetre aussi en faissent click sur le background
if(is_ie) transportClass =  this;
else this.fondEcran.transportClass = this;
if(this.onclickBgClose) Event.observe(
this.fondEcran,
'click',
function(){
if(is_ie) transportClass.close();
else this.transportClass.close();
}
);





Element.setOpacity(this.fondEcran, 0.5);

},

hiddenFondEcran : function(){

//if(is_ie) this.pe.stop();
document.body.removeChild(this.fondEcran);

},

show : function(){

// montrer le fond d'ecran
if(this.modal == true){
this.showFondEcran();
}

this.fenetre.style.zIndex = parseInt(this.getLastZIndex()) + 1;
this.fenetre.appendChild(this.tblFenetre);

if(is_ie){

this.fenetre.style.top = 0;
}

this.fenetre.style.position = 'absolute';
if(!this.noEffects) this.fenetre.style.display = 'none';
else {
this.fenetre.style.display = 'block';
}

document.body.appendChild(this.fenetre);

// Effect pour faire apparaitre la fenetre
if(!this.noEffects) new Effect.Appear(this.fenetre, 0.0, 1.0);

// pour pouvoir deplacer la fenetre
// if(this.draggable) new Draggable(this.fenetre);

this.fenetre.obj = this;

function movebody(event) {if(this.obj)this.obj.Drag(event || window.event);}

Event.observe(this.fenetre, 'mousedown',

function (event) {
Event.observe(document.body, 'mousemove', movebody);
this.obj.registerClick(event || window.event);
}

);


Event.observe(this.fenetre, 'mouseup',
function (event) {
this.obj.unregisterClick(event || window.event);
Event.stopObserving(document.body, 'mousemove', movebody);
}
);

},

setContent : function(content){

this.cellContent.innerHTML = content;
},

setTitle : function (title){


this.titleCell.innerHTML = title.stripTags();

},

close : function(){

// ferme la fenetre
if(this.onclose){

if(typeof(this.onclose) == 'function'){
this.onclose();
} else {
exec(this.onclose);
}
}

if(!this.noEffects) new Effect.DropOut(this.fenetre);
else this.fenetre.style.display = 'none';

if(this.modal == true) this.hiddenFondEcran();

// After Close
if(this.afterclose){

if(typeof(this.afterclose) == 'function'){
this.afterclose();
} else {
exec(this.afterclose);
}
}

},
/**
* efface tout le contenu de  la fenêtre
*/
clear : function(){

this.cellContent.innerHTML = ' ';

},

/**
* Charge une url en ajax
*/
loadUrl : function(url, options){

options = (typeof(options) == 'object') ? options : ;

var objClasse = this;


new Ajax.Request(url, {

onComplete: function(transport) {


objClasse.cellContent.innerHTML = transport.responseText;

if(objClasse.onload) {
objClasse.onload();
}

},
onFailure : function (transport){

objClasse.cellContent.innerHTML = 'Erreur de chargement...';

},
onException : function  (transport, exeption){

objClasse.clear();
//objClasse.cellContent.innerHTML = 'Exception:' + "\n" + transport.responseText + " " + exeption;

},
onFailure : function (){

objClasse.cellContent.innerHTML = 'Failure.';

},
onSuccess : function (transport){

objClasse.clear();
//objClasse.cellContent.innerHTML = 'Success.';

},
contentType : 'application/x-www-form-urlencoded'


});

},

getLastZIndex : function(){

var divs = document.getElementsByTagName('div');
var zIndexPlusHaut = 0;

for(i=0; i < divs.length; i++){
if(divs[i].style.zIndex != null && divs[i].style.zIndex > zIndexPlusHaut)
zIndexPlusHaut = divs[i].style.zIndex;
}

zIndexPlusHaut = (zIndexPlusHaut == 0) ? divs.length : zIndexPlusHaut;
return zIndexPlusHaut;
},


/**
* enregistre le click sur la fenetre pour effectuer un drag
*/
registerClick: function (e) {

this.ClickRegistered = true;

if(e.clientX) {
this.tx = parseInt(this.fenetre.style.left+0) - e.clientX;
this.ty = parseInt(this.fenetre.style.top+0) - e.clientY;
} else {
this.tx = parseInt(this.fenetre.style.left+0) - event.clientX;
this.ty = parseInt(this.fenetre.style.left+0) - event.clientY;
}

// on enregistre l'objet dragué courant
document.body.obj = this;

},

/**
* stop l'action drag : déclenché lorsque l'utilisateur arrete de cliquer
*/
unregisterClick: function (e) {

this.ClickRegistered = false;

},



Drag: function (e) {

if(this.ClickRegistered) {

if(e.clientX) {
var left = this.tx + e.clientX;
var top  = this.ty + e.clientY;
} else {
var left = this.tx + event.clientX;
var top  = this.ty + event.clientY;
}

// on travaille en mode strict et non en quirks,
// il faut donc rajouter 'px' à la fin, sinon ça ne fonctionne pas
this.fenetre.style.left = left + 'px';
this.fenetre.style.top = top + 'px';

}
}

}


Publié le 22 janvier 2008

Pascal
Wouahhh ! Autant de code pour une tit'fenêtre en DIV.

Encore 2 ou 3 astuces de ce genre et on se retrouve avec 5000 lignes de script. Soit l'équivalent d'une application complète en PHP (par exemple).

Est-ce bien raisonnable ?
Contribution précédente Contribution suivante
11 contributions : 1 2 3 4 5 6 7 8 9 10 11
 




 

© Benchmark Group, 69-71 avenue Pierre Grenier 92517 BOULOGNE BILLANCOURT Cedex

RECHERCHER