Fenetres déplacables et redimensionnable par la souris
Soyez le premier à donner votre avis sur cette source.
Vue 13 053 fois - Téléchargée 1 277 fois
Description
Voilà une petite source sans prétention, qui permet de créer une fenetre dans une page avec du contenu spécifique en dynamique.
Le contenu peut être du HTML en text (string) ou directement un objet.
Pour plus d'info il suffit d'ouvrir le page html d'exemple et de regarder la fenetre avec l'image.
La version finale marche sous firefox et Internet Explorer.
Le seul bug connu pour le moment c'est, sous firefox, la zone de redimenssionement autour des contours de la fenetre est réduire (je n'arrive pas à changer le curseur de body sous FF, voir ligne 543 de la source).
Dernière chose étant donné que le redimensionnement alourdit pas mal le code, j'ai laissé une version sans dans le zip (déplacement uniquemen).
Voilà, sinon comme d'habitude les commentaire (constructif bien sûr) sont les bienvenues! Soyez indulgeants ce n'est que ma 2ieme vrai sources en javascript.
Le contenu peut être du HTML en text (string) ou directement un objet.
Pour plus d'info il suffit d'ouvrir le page html d'exemple et de regarder la fenetre avec l'image.
La version finale marche sous firefox et Internet Explorer.
Le seul bug connu pour le moment c'est, sous firefox, la zone de redimenssionement autour des contours de la fenetre est réduire (je n'arrive pas à changer le curseur de body sous FF, voir ligne 543 de la source).
Dernière chose étant donné que le redimensionnement alourdit pas mal le code, j'ai laissé une version sans dans le zip (déplacement uniquemen).
Voilà, sinon comme d'habitude les commentaire (constructif bien sûr) sont les bienvenues! Soyez indulgeants ce n'est que ma 2ieme vrai sources en javascript.
Source / Exemple :
///////////////
// COULEURS //
///////////////
//FENETRE
BCKGROUND = "#FFFFFF"; //Couleur de fond de la fenetre
BORDER = "#000000"; //Couleur de la bordure
//BANDEAU
B_BCKGROUND = "#6f6f6f"; //Couleur du bandeau
B_TEXT = "#FFFFFF"; //Couleur du titre
//BOUTTON "FERMER" & "REDUIRE"
B_B_BCKGROUND = "#FFFFFF"; //Couleur de Fond des bouttons "Fermer" et "Réduire"
B_B_BORDER = "#000000"; //Couleur de Bordure des bouttons "Fermer" et "Réduire"
B_B_TEXT = "#000000"; //Couleur de Texte des bouttons "Fermer" et "Réduire"
//BOUTTON "FERMER" & "REDUIRE" ENFONCES
B_BD_BCKGROUND = "#000000"; //Couleur de Fond des bouttons "Fermer" et "Réduire"
B_BD_BORDER = "#FFFFFF"; //Couleur de Bordure des bouttons "Fermer" et "Réduire"
B_BD_TEXT = "#FFFFFF"; //Couleur de Texte des bouttons "Fermer" et "Réduire"
//SCROLLBAR
SBDARKSHADOW = "#4f4f4f"; //scrollbarDarkShadowColor
SB3DLIGHT = "#4f4f4f"; //scrollbar3dLightColor
SBARROW = "#FFFFFF"; //scrollbarArrowColor
SBBARBASE = "#4f4f4f"; //scrollbarBaseColor
SBBARFACE = "#8f8f8f"; //scrollbarFaceColor
SBHIGHTLIGHT = "#FFFFFF"; //scrollbarHighlightColor
SBBARSHADOW = "#8f8f8f"; //scrollbarShadowColor
SBBARTRACK = "#FFFFFF"; //scrollbarTrackColor
//////////////
// OPTIONS //
//////////////
COMPORTEMENT_FERMETURE = "cache"; //Comportement en cas de clique sur le boutton "Fermer" ( 'cache' ou 'supprime' la fenêtre)
CONFIRME_FERMETURE = true; //Demande une confirmation ou non lors d'un clique sur le boutton "Fermer"
COTES_REDIMENSIONNEMENT = "all"; //Cotés de la fenetre redimenssionables, "classique" = bas et droite, "all" = tous
//////////////////
// CONSTANTES //
//////////////////
//Constantes utilisées pour créer un masque qui va nous permettre de savoir dans quelle(s) direction(s) le redimenssionnement doit s'effectué.
RES_UP = 1; //Redimenssionement vers le haut
RES_DOWN = 2; //Redimenssionement vers le bas
RES_RIGHT = 4; //Redimenssionement vers la droite
RES_LEFT = 8; //Redimenssionement vers la gauche
RES_ZONE = 8; //Zone de redimenssionement autour des borure ( Défaut : + ou - 5px)
MIN_HEIGHT = 75; //Hauteur minimal pour une fenetre
MIN_WIDTH = 75; //Largeur minimal pour une fenetre
///////////////
// GLOBALES //
///////////////
//Position du curseur de la souris (Mis à jour par le fonction appelé lors de l'evenement "OnMouseMove" de document)
curX = 0;
curY = 0;
resize_direction = 0; //Direction(s) du redimenssionement
in_resize = false;
fenetre = null; //La fenetre en cours de déplacement
fenetre_resize = null; //La fenetre en cours de redimmenssionnement
is_ie = ! (navigator.appName == "Netscape"); //Internet Explorer ou Netscape ?
//////////////////
// EVENEMENTS //
//////////////////
//Et on active l'event "mousemove" pour récupérer les coordonnée de la souris au fur et à mesure
document.onmousemove = PdcDocumentOnMouseMove;
document.onmousedown = PdcDocumentOnMouseDown;
document.onmouseup = PdcDocumentOnMouseUp;
//Création d'un fenetre
function CreerPdcFenetre( titre, largeur, hauteur, posLeft, posTop, contenu ){
//On créer un objet "Div" correspondant à notre fenetre
var fenetre = document.createElement("div");
//Permet d'identifier une fenetre de façon à ne pas éffectuer d'action de redimensionnement sur un élément qui n'est pas une fenetre
fenetre.id = "PdcFenetre";
//On définit les propriétés de la fenetre
//On définit la taille et on garde la taille par défaut
fenetre.my_width = ((is_ie ? 4 : 0) + largeur); //+ 4 pour la bordure si IE, 0 si FF
fenetre.style.width = fenetre.my_width +"px";
fenetre.my_height = ((is_ie ? 24 : 20) + hauteur); //+24 pour la bordure et le bandeau si IE, + 20 si FF
fenetre.style.height = fenetre.my_height + "px";
//Position
fenetre.style.position = "absolute";
fenetre.style.left = posLeft + "px";
fenetre.style.top = posTop + "px";
//Bordure
fenetre.style.border = "2px " + BORDER + " solid";
//Couleur de fond pour avoir une fenetre non transparente
fenetre.style.backgroundColor = BCKGROUND;
//On créer notre bandeau
bandeau = CreerPdcBandeau( titre, fenetre, largeur);
//On ajoute notre bandeau à la fentre
fenetre.appendChild( bandeau);
//On garde une référence à noter bandeau
fenetre.bandeau = bandeau;
//On créer une div qui va accueillir notre contenu
var div_contenu = document.createElement("div");
//On met à la taille demandé
div_contenu.style.width = largeur + "px";
div_contenu.style.height = hauteur + "px";
//Dans le cas ou le contenu est plus grand que la div qui l'accueil, on affiche des scrollbar
div_contenu.style.overflow = "auto";
//Mise au couleurs personnailisé des scrollbars
div_contenu.style.scrollbarDarkShadowColor = SBDARKSHADOW;
div_contenu.style.scrollbar3dLightColor = SB3DLIGHT;
div_contenu.style.scrollbarArrowColor = SBARROW;
div_contenu.style.scrollbarBaseColor = SBBARBASE;
div_contenu.style.scrollbarFaceColor = SBBARFACE;
div_contenu.style.scrollbarHighlightColor = SBHIGHTLIGHT;
div_contenu.style.scrollbarShadowColor = SBBARSHADOW;
div_contenu.style.scrollbarTrackColor = SBBARTRACK;
//On garde une référence à notre contenu pour la réduction de la fenetre
fenetre.contenu = div_contenu;
//On garde également une réference dans l'autre sens (référence à la fenetre dans contenu)
div_contenu.my_fenetre = fenetre;
//Si on a du contenu on l'ajoute à la fenetre
if( contenu != null ){
//Objet
if( typeof( contenu) == "object" ){
div_contenu.appendChild( contenu);
}
//Ou string (par exemple : "<a href"..."> .. </a>"
else{
tmp = document.createElement("div");
tmp.innerHTML = contenu;
div_contenu.appendChild( tmp);
}
}
//On ajoute notre div à la fenetre
fenetre.appendChild( div_contenu);
//Par défaut la fenetre est en dessous lorsque qu'une fenetre est déplacé
fenetre.style.zIndex = 1;
//Met la fenetre au premier plan au moindre clique dessus.
fenetre.onmousedown = pdcFenetreOnClick;
//On ajoute notre fenetre à la page
document.body.appendChild( fenetre);
//et on retourne l'objet fenetre pour une utilisation éventuelle (réaffichage après fermeture par exemple)
return fenetre;
}
//Fonction indépendante pour la création de l'objet bandeau
function CreerPdcBandeau( titre, fenetre, largeur){
// VOIR A LA FIN DU FICHIER POUR LE CODE HTML DU BANDEAU
var bandeau = document.createElement("table")
bandeau.style.width = largeur + "px";
bandeau.style.height = "20px";
bandeau.style.backgroundColor = B_BCKGROUND;
bandeau.style.cursor = "move";
var bandeau_body = document.createElement("tbody")
//Notre unique ligne du tableau...
var tr = document.createElement("tr");
//On créer une case pour le texte du titre
var td_titre = document.createElement("td");
td_titre.style.paddingTop = "0px";
td_titre.style.paddingBottom = "0px";
//On ajoute la gestion des évenements à notre bandeau
//Lorsque l'utilisateur appui sur le bouton de la souris
td_titre.onmousedown = PdcFenetreOnMouseDown;
//Lorsque l'utilisateur relache le bouton de la souris
td_titre.onmouseup = PdcFenetreOnMouseUp;
//Réduire / Agrandir la fenetre en cas de double clique sur le bandeau
td_titre.ondblclick = PdcOnDoubleClickReduire;
//On créer la Div qui va accueillir le titre
var div = document.createElement("div")
div.style.fontSize = "12";
div.style.width = (largeur - 36) + "px"; //Largeur de la fenetre moins la taille de nos 2 bouttons ( 12 + 12) moins la taille de la bordure (2 + 2) moins la taille entre nos cellule (4 * 2) = .. 36 bien sûr ! :p
div.style.overflow = "hidden"; //Ne pas agrandir la Div si le contenu est plus grand que sa taille
div.style.color = B_TEXT;
div.style.fontWeight = "bold";
div.style.whiteSpace = "nowrap"; //Pas de retour à la ligne
//Le texte du titre
div.innerHTML += titre;
//On créer une 2ième case pour notre tableau celle contenant le "boutton" pour réduire la fenetre
var td_reduire = document.createElement("td");
td_reduire.style.padding = "0px"
td_reduire.style.backgroundColor = B_B_BCKGROUND;
td_reduire.style.cursor = "pointer";
td_reduire.style.width = "12px";
td_reduire.style.height = "12px";
td_reduire.style.border = "1px " + B_B_BORDER + " solid";
td_reduire.style.fontSize = "10px";
td_reduire.style.fontWeight = "bold";
td_reduire.style.color = B_B_TEXT;
//On utilise les balise <center> car la propriété "text-align" ne fonctionne pas sous FF
td_reduire.innerHTML = "<center>-</center>";
td_reduire.onmousedown = PdcBouttonOnMouseDown; //Début du clique
td_reduire.onmouseup = PdcBouttonOnMouseUpReduire; //Réduction de la fenetre
td_reduire.onmouseout = PdcBouttonOnMouseOut; //Si l'utilisateur commence son clique puis sort du "boutton" pour annuler
//On créer une 3ième case pour notre tableau celle contenant le "boutton" pour fermer la fenetre
var td_fermer = document.createElement("td");
td_fermer.style.padding = "0px"
td_fermer.style.backgroundColor = B_B_BCKGROUND;
td_fermer.style.cursor = "pointer";
td_fermer.style.width = "12px";
td_fermer.style.height = "12px";
td_fermer.style.border = "1px " + B_B_BORDER + " solid";
td_fermer.style.fontSize = "10px";
td_fermer.style.fontWeight = "bold";
td_fermer.style.color = B_B_TEXT;
//On utilise les balise <center> car la propriété "text-align" ne fonctionne pas sous FF
td_fermer.innerHTML = "<center>X</center>";
td_fermer.onmousedown = PdcBouttonOnMouseDown; //Début du clique
td_fermer.onmouseup = PdcBouttonOnMouseUpFermer; //Fermeture de la fenetre
td_fermer.onmouseout = PdcBouttonOnMouseOut; //Si l'utilisateur commence son clique puis sort du "boutton" pour annuler
//On Emboîte tout ça....
//On ajoute la div à notre case (TD)
td_titre.appendChild( div);
//On ajoute la case "titre" à notre ligne
tr.appendChild( td_titre);
//On ajoute la case "réduire" à notre ligne
tr.appendChild( td_reduire);
//On ajoute la case "fermer" à notre ligne
tr.appendChild( td_fermer);
//On ajoute notre ligne au corp du tableau
bandeau_body.appendChild( tr);
//On ajoute le corp au tableau au tableau
bandeau.appendChild( bandeau_body);
//On ajoute une référence à la fenetre (l'objet parent) pour les 3 elements du bandeau
//Permet d'accèder à la fenetre à partir des 3 "objets" du bandeau ('boutton' + titre)
td_titre.my_fenetre = fenetre;
td_fermer.my_fenetre = fenetre;
td_reduire.my_fenetre = fenetre;
bandeau.titre = div;
return bandeau;
}
//Bandeau.OnMouseUp
function PdcFenetreOnMouseUp(){
//On remet notre fonction par défaut pour gérer le déplacement
this.onmousedown = PdcFenetreOnMouseDown;
//Effet de transparence
if( is_ie )
this.my_fenetre.style.filter = "alpha(opacity=100);";
else
this.my_fenetre.style.opacity = "1";
//Plus de déplacement de fenetre en cours
fenetre = null;
}
//Bandeau.OnMouseDown
function PdcFenetreOnMouseDown(e){
maj_coordonnees( e);
//On garde les coordonnée du pointeur par rapport à la fenetre
this.my_fenetre.CurLastX = curX - this.my_fenetre.offsetLeft;
this.my_fenetre.CurLastY = curY - this.my_fenetre.offsetTop;
//On se met au dessus des autres fenetres lors du déplacement
pdcSetFenetrePremierPlan( this.my_fenetre);
//Effet de transparence
if( is_ie )
this.my_fenetre.style.filter = "alpha(opacity=80);";
else
this.my_fenetre.style.opacity = "0.8";
//On garde l'objet fenetre (du bandeau) qui correspond à la fenetre pour laquelle on gère le déplacement
fenetre = this.my_fenetre;
//Annulation de l'evenement pour éviter le surlignement
return false;
}
//Fonction qui met à jour les coordonnées de la souris en fonction du type de navigateur
function maj_coordonnees(e){
if( is_ie ){
curX = event.clientX;
curY = event.clientY;
}
else{
curY = e.clientY;
curX = e.clientX;
}
}
//Enfoncement des boutton "réduire" et "fermer"
function PdcBouttonOnMouseDown(){
this.style.border = "1px " + B_BD_BORDER + " inset";
this.style.backgroundColor = B_BD_BCKGROUND;
this.style.color = B_BD_TEXT;
//Annulation de l'evenement pour éviter le surlignement
return false;
}
//Relache la souris sur le boutton "réduire" (On réduit la fenetre)
function PdcBouttonOnMouseUpReduire(){
this.style.border = "1px " + B_B_BORDER + " solid";
this.style.backgroundColor = B_B_BCKGROUND;
this.style.color = B_B_TEXT;
if( this.my_fenetre.contenu.style.display == "none" ){
this.my_fenetre.contenu.style.display = "block"; //On réaffiche le contenu
this.my_fenetre.style.height = this.my_fenetre.my_height + "px"; //et on met à jour la taille de la fenetre
}
else{
this.my_fenetre.contenu.style.display = "none"; //On cache le contenu
this.my_fenetre.style.height = ( is_ie ? 24 : 20) + "px"; //Taille de la fenetre = taille du bandeau + bordure
}
}
//Double click sur le bandeau (titre) (On réduit la fenetre)
function PdcOnDoubleClickReduire(){
if( this.my_fenetre.contenu.style.display == "none" ){
this.my_fenetre.contenu.style.display = "block"; //On réaffiche le contenu
this.my_fenetre.style.height = this.my_fenetre.my_height + "px"; //et on met à jour la taille de la fenetre
}
else{
this.my_fenetre.contenu.style.display = "none"; //On cache le contenu
this.my_fenetre.style.height = ( is_ie ? 24 : 20) + "px"; //Taille de la fenetre = taille du bandeau + bordure
}
//Annulation de l'evenement pour éviter la selection
return false;
}
//Relache la souris sur le boutton "fermer" (On ferme ou cache la fenetre)
function PdcBouttonOnMouseUpFermer(){
this.style.border = "1px " + B_B_BORDER + " solid";
this.style.backgroundColor = B_B_BCKGROUND;
this.style.color = B_B_TEXT;
//Confirmation avant fermeture?
if( CONFIRME_FERMETURE )
if( !confirm("Etes-vous sûr de vouloir fermer la fenêtre?") )
return;
//Lors de la demande de fermeture soit on cache la fenetre
if( COMPORTEMENT_FERMETURE == "cache"){
this.my_fenetre.style.display = "none";
}
//Soit on l'enlève définitivement de notre page
else{
document.body.removeChild( this.my_fenetre);
}
}
//sorti des boutton "réduire" et "fermer" pour la souris
function PdcBouttonOnMouseOut(){
this.style.border = "1px " + B_B_BORDER + " solid";
this.style.backgroundColor = B_B_BCKGROUND;
this.style.color = B_B_TEXT;
}
//Document.OnMouseMove
function PdcDocumentOnMouseMove(e){
//Déplacement
if( fenetre != null ){
maj_coordonnees(e);
//On bloque le déplacement en dehors de la fenetre du navigateur
if( curX - fenetre.CurLastX < 0 || curY -fenetre.CurLastY < 0 )
return;
//Déplace la fenetre en fonction de la position actuelle du curseur et de la position du curseur par rapport à la fenetre
fenetre.style.left = curX -fenetre.CurLastX + "px";
fenetre.style.top = curY - fenetre.CurLastY + "px";
}
//Redimenssionnement
else{
if( fenetre_resize == null ){
//On cherche à savoir si la souris est sur un element de Type "Fenetre" (class = "PdcFenetre")
if( is_ie ){
if( event.srcElement.id != "PdcFenetre" )
return;
}
else{
if( e.target.id != "PdcFenetre")
return;
}
//La fenetre à redimenssioner
if( is_ie )
fenetre_resize = event.srcElement;
else
fenetre_resize = e.target;
}
//On récupère la position de la souris par rapport à la fenetre
if( is_ie ){
posX = event.clientX - fenetre_resize.offsetLeft;
posY = event.clientY - fenetre_resize.offsetTop;
eX = event.clientX;
eY = event.clientY;
}
else{
posX = e.clientX - fenetre_resize.offsetLeft;
posY = e.clientY - fenetre_resize.offsetTop;
eX = e.clientX;
eY = e.clientY;
}
//Pas de redimenssionnement en cours, on cherche à savoir dans quelle zone (direction) la souris se trouve
if( ! in_resize ){
//Aucune direction par défaut
resize_direction = 0;
//Type de curseur
resize_cursor = "";
//On cherche à savoir dans quelle(s) direction(s) doit on redimenssioner
if ( COTES_REDIMENSIONNEMENT == "all" && Math.abs(posY) < RES_ZONE){
resize_direction += RES_UP;
resize_cursor += "n";
}
else if( posY > (fenetre_resize.offsetHeight - RES_ZONE) && posY < (fenetre_resize.offsetHeight + RES_ZONE) ){
resize_direction += RES_DOWN;
resize_cursor += "s";
}
if( COTES_REDIMENSIONNEMENT == "all" && Math.abs(posX) < RES_ZONE ){
resize_direction += RES_LEFT;
resize_cursor += "w";
}
else if( posX > (fenetre_resize.offsetWidth - RES_ZONE) && posX < (fenetre_resize.offsetWidth + RES_ZONE) ){
resize_direction += RES_RIGHT;
resize_cursor += "e";
}
//Si on est sorti de la zone de redimenssionement, on remet le curseur par défaut
if( resize_direction == 0 ){
fenetre_resize.style.cursor = "default";
document.body.style.cursor = "defaut";
fenetre_resize = null;
return;
}
//Sinon on met le curseur qui va bien
else{
fenetre_resize.style.cursor = resize_cursor + "-resize";
//HS sous FF !
document.body.style.cursor = resize_cursor + "-resize;";
}
return;
}
//En cours de redimenssionement
else{
if( resize_direction & RES_RIGHT ){
if( posX >= MIN_WIDTH){
//Redimensionne la fenetre
fenetre_resize.style.width = posX + "px";
//Redimensionne le contenu
fenetre_resize.contenu.style.width = (posX - (is_ie ? 4 : 0) ) + "px";
//Redimensionne le bandeau
fenetre_resize.bandeau.style.width = (posX - (is_ie ? 4 : 0) ) + "px";
//Puis la div contenant le titre (taille fixe pour gestion de l'overflow)
fenetre_resize.bandeau.titre.style.width = (posX - (is_ie ? 40 : 36) ) + "px";
//On garde en "mémoire" la nouvelle taille de la fenetre pour la réduction/agrandissement
fenetre_resize.my_width = posX;
}
}
if( resize_direction & RES_LEFT ){
new_width = (fenetre_resize.offsetWidth - 4 - posX );
if( new_width >= MIN_WIDTH){
//Redimensionne le contenu
fenetre_resize.contenu.style.width = new_width + "px";
//Redimensionne le bandeau
fenetre_resize.bandeau.style.width = new_width + "px";
//Puis la div contenant le titre (taille fixe pour gestion de l'overflow)
fenetre_resize.bandeau.titre.style.width = (new_width - 36 ) + "px";
//Déplace + Redimensionne la fenetre
fenetre_resize.style.left = eX + "px";
fenetre_resize.style.width = new_width + "px";
//On garde en "mémoire" la nouvelle taille de la fenetre pour la réduction/agrandissement
fenetre_resize.my_width = posX;
}
//Lorsqu'on à atteint la taillle minimal, on se contente de déplacer la fenetre
else{
//Déplace la fenetre
fenetre_resize.style.left = eX + "px";
}
}
if( resize_direction & RES_UP ){
new_height = (fenetre_resize.offsetHeight - 4 - posY );
if( new_height >= MIN_HEIGHT){
//Redimenssionne le contenu
fenetre_resize.contenu.style.height = (new_height - 20 ) + "px";
//Redimenssionne et déplace la fenetre
fenetre_resize.style.top = eY + "px";
fenetre_resize.style.height = new_height + "px";
//Si l'utilisateur redimenssione vers le bas et que la fenetre et en mode "réduite" on réaffiche le contenu
if( fenetre_resize.contenu.style.display == "none" )
fenetre_resize.contenu.style.display = "block";
//On garde en "mémoire" la nouvelle taille de la fenetre pour la réduction/agrandissement
fenetre_resize.my_height = posY;
}
//Lorsqu'on à atteint la taillle minimal, on se contente de déplacer la fenetre
else{
//Déplace la fenetre
fenetre_resize.style.top = eY + "px";
}
}
if( resize_direction & RES_DOWN ){
if( posY >= MIN_HEIGHT){
//Redimenssionne la fenetre
fenetre_resize.style.height = posY + "px";
//Redimenssionne le contenu
fenetre_resize.contenu.style.height = (posY - (is_ie ? 24 : 20) ) + "px";
//Si l'utilisateur redimenssione vers le bas et que la fenetre et en mode "réduite" on réaffiche le contenu
if( fenetre_resize.contenu.style.display == "none" )
fenetre_resize.contenu.style.display = "block";
//On garde en "mémoire" la nouvelle taille de la fenetre pour la réduction/agrandissement
fenetre_resize.my_height = posY;
}
}
}
}
//Annulation de l'evenement pour éviter le surlignement
return false;
}
//Souris enfoncée sur Document (Début de redimenssionnement...?)
function PdcDocumentOnMouseDown(e){
in_resize = true;
//On se met au dessus des autres fenetres lors du redimenssionement
if( fenetre_resize != null )
pdcSetFenetrePremierPlan( fenetre_resize);
}
//Souris relâchée sur Document (Fin de redimenssionnement)
function PdcDocumentOnMouseUp(e){
in_resize = false;
}
//Met la fenetre au premier plan lorsqu'on clique dessus
function pdcFenetreOnClick(){
pdcSetFenetrePremierPlan( this);
}
//Permet de mettre une fenetre en premier plan par rapport au autres.
function pdcSetFenetrePremierPlan( fenetre ){
//Pour IE on travail sur : document.body.children
//Pour FF on travail sur : document.body.childNodes
//my_child = ( is_ie ? document.body.children : document.body.childNodes );
my_child = document.body.childNodes;
//On met tout les objet de type "Fenetre" en zIndex=1 (par défaut) et celle démandé en zIndex=2
for( var i=0; i < my_child.length; i++){
if( my_child[i].id == "PdcFenetre" )
my_child[i].style.zIndex = 1;
}
fenetre.style.zIndex = 2;
}
/*
CODE HTML + STYLE POUR LE BANDEAU
<table style="width: 100px; background-Color: #6f6f6f; cursor: move;">
<tr>
<td style="padding-top: 0px; padding-bottom: 0px;">
<div align="left" style="font-size: 12; width: 50px; overflow: hidden; color: #FFFFFF; font-weight:bold; white-space:nowrap;">Mon super titre</div>
</td>
<td style="padding:0px; background-Color: #FFFFFF; cursor: pointer; width:12px; height:12px; border:1px #000000 solid; font-size:10; text-align= center; font-weight:bold;"><center>-</center></td>
<td style="padding:0px; background-Color: #FFFFFF; cursor: pointer; width:12px; height:12px; border:1px #000000 solid; font-size:10; text-align= center; font-weight:bold;"><center>X</center></td>
</tr>
</table>
*/Conclusion :
Voilà la version finale de ce petit projet Javascript. Les fenetres sont déplaçables et redimenssionnables comme prévu.Codes Sources
A voir également
- Redimensionnable
- Petit programme pour dessiner des murs (déplacement et redimensionnement dynamique par souris) - Codes sources - Visual Basic / VB.NET (Graphique)
- Deplacer le curseur de la souris (utile pour les ca$hbar) - Codes sources - Visual Basic / VB.NET (Souris, Clavier, etc…)
- Javascript : Ouvrir et fermer une fenêtre automatiquement après x secondes - CodeS Sour - Guide
- Panel déplaçable et redimensionnable - Codes sources - Delphi / Pascal (Composants)
- Composant pour déplacer et redimensionner les autres à l'exécution - Codes sources - Delphi / Pascal (Composants)
Commentaires
je en vois pas trop en quoi ouvrir une fenêtre via un simple liens ou bouton est un problème.
Il suffit de créer une fonction qui créer une fenêtre et de l'appelé sur le "onclick" d'un bouton ou dans un simple lien :
<script>
function showGoogle(){
CreerPdcFenetre( "305", 500, 200, 350, 150, "[javascript:showGoogle(); Google !]
Voilà c'est aussi simple que ça... Après si vous voulez charger les fenêtres a la création de la page et (juste) les afficher après, va falloir modifier un peu le code pour que les "fenêtre" soit créées avec "display: none" puis créer une fonction qui va les ré-afficher.
Voilà j'espère que j'ai répondu à vos questions et merci pour la note Fenri (au passage je serai curieux de voir ce que ça donne avec un style Vista sur les fenêtres...).
Ton code est vraiment tres bien et utile ! Bravo a toi ! (J'ai adapté un theme Vista sur les fenetres) Le rendu est tres joli ;) ! Ce ci étant dit, j'ai quand meme un petit soucis ... (qui a dailleur deja était posé ^^') J'aurais besoin de ton aide precieuse pour trouver le moyen de creer une fenetre en apuiyant sur un bouton ou un lien. Merci d'avance et encore une fois bravo !
<script>
function affiche_boite_a_outils(){
if (document.activite.visibilite_boite_a_outils.checked)
{
document.getElementById("PdcFenetre").style.visibility="visible";
}
else
{
document.getElementById("PdcFenetre").style.visibility="hidden";
}
}
</script>
Code HTML:
Boite à outil
Sinon pour les Scrollbars sous FireFox il me semble que c'est Firefox lui même qui ne le gère pas. Je peu me tromper, mais je ne crois pas que ce soit possible.
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.