Discussion :

[XanderSX]

Bonjour tout le monde,

Mon problème est quelque peu délicat à expliquer, je vais essayer d'être le plus clair et précis possible.

Je suis actuellement sur le développement de mon portfolio (pour l'instant en local), et je souhaite y intégrer des fonctionnalités JavaScript type AJAX qui soient sympas à utiliser.

J'ai donc pour le moment ma page d'accueil, munie d'un menu type dock MAC, géré grâce à 2 fichiers JS externes : interface.js et jquery-1.1.3.1.pack.js.
Le problème qui me fait venir sur ce forum se trouve sur une autre fonctionnalité que je souhaite ajouter pour mon accès administrateur (souhaitant développer un back-office en PHP histoire de montrer mes compétences sur ce langage).

J'ai téléchargé sur ce site : http://www.javascriptkit.com/script/...ownpanel.shtml, un "plugin" Javascript qui permet de créer un petit panneau tombant discrètement caché en haut de page. J'ai décidé d'intégrer ceci sur ma page d'accueil et d'afficher mon formulaire de connexion administrateur dans ce même panneau. Jusque là, tout va bien, ça tourne.
Là où ça pêche, c'est que je ledit panneau remonte automatiquement se cacher en haut sur le moindre clic que l'on fait dedans. Ceci est défini dans le code, c'est donc un comportement normal, sauf que je souhaite que cela n'arrive que sur le clic de mon bouton "reset". Autrement dit je souhaite que le panneau reste affiché tant que je n'ai pas décidé de quitter mon formulaire.

Je précise que je suis débutant en AJAX (puisqu'il semblerait que ce genre de fonctionnalité soit de l'AJAX), j'ai déjà fait du JavaScript mais rien de très poussé (contrôle de formulaire, redirection...), ainsi que du PHP et beaucoup de CSS et d'(X)HTML.

Voici le JS gérant le panneau :

var jkpanel = {
controltext: 'Accès Administrateur',
$mainpanel: null, contentdivheight: 0,

openclose:function($, speed){
this.$mainpanel.stop() // Arrête toute animation
if (this.$mainpanel.attr('openstate')=='closed')
this.$mainpanel.animate({top:0}, speed).attr({openstate:'open'})
else
this.$mainpanel.animate({top:-this.contentdivheight+'px'}, speed).attr({openstate:'closed'})
},

init:function(file, height, speed){
jQuery(document).ready(function($){
jkpanel.$mainpanel=$('<div id="adminPanel"><div class="contentdiv"></div><div class="control"></div></div>').prependTo('body')
var $contentdiv=jkpanel.$mainpanel.find('.contentdiv')
var $controldiv=jkpanel.$mainpanel.find('.control').css({cursor:'wait'})
$contentdiv.load(file, '', function($){
var heightattr=isNaN(parseInt(height))?'auto':parseInt(height) +'px'
$contentdiv.css({height:heightattr})
jkpanel.contentdivheight=parseInt($contentdiv.get(0).offsetHeight)
jkpanel.$mainpanel.css({top:-jkpanel.contentdivheight +'px',visibility:'visible'}).attr('openstate','closed')
$controldiv.css({cursor:'hand',cursor:'pointer'})
})
jkpanel.$mainpanel.click(function(){jkpanel.openclose($, speed)})
})
}
}

// Script d'initialisation : jkpanel.init('fichier_à_afficher', 'hauteur_de_la_div_de_contenu', durée_animation)
jkpanel.init('../PHP/admin_access.php', '80px', 500)

Mon CSS : (juste la partie qui concerne le panneau)

#adminPanel { /* Div haute du panneau */
position:absolute;
width:100%;
left:0;
top:0;
visibility:hidden;
z-index:5;
}

#adminPanel .contentdiv{ /* Div contenant le contenu AJAX */
background:url('../PNG/black_bg.png');
color:#FFF;
padding:20px;
}

#adminPanel .control{ /* Div contenant le bouton du panneau */
border-top:2px solid black;
color:#FFF;
font-weight:bold;
text-align:center;
padding-bottom:3px;
height:21px;
line-height:21px;
}

Je pense que la ligne à modifier dans le JS est la suivante : jkpanel.$mainpanel.click(function(){jkpanel.openclose($, speed)
Il faut surement remplacer le "click" par une instruction capable de reconnaître un clic sur le bouton reset seul, mais là je vois pas comment le désigner.

Pouvez-vous m'aider s'il vous plaît ?

Alexandre

[XanderSX]

Bon bah finalement, avec quelques recherches sur le "jkpanel" sur Google, j'suis tombé sur un forum Anglais qui m'a mis sur la voie, du coup mon prob' est résolu.

Pour les intéressés, voilà le code correspondant, et quand mon portfolio sera mis en ligne, je publierais le lien pour vous permettre de voir la démo.

Note : le code publié ci-dessous corrige les bugs exposés plus bas.

CSS : (bloc concernant uniquement les div qui composent le panneau tombant)

#dropDownPanel { /* Div haute du panneau */
position:absolute;
width:100%;
left:0;
top:0;
visibility:hidden;
z-index:5;
}

#dropDownPanel .contentdiv{ /* Div contenant le contenu AJAX */
background:url('../PNG/black_bg.png');
padding:20px;
}

JavaScript (jkpanel.js, fonction permettant l'animation de déploiement/repli du panneau tombant) :

var jkpanel={
$mainpanel: null, contentdivheight: 0,

openclose:function($, speed){
this.$mainpanel.stop()
if (this.$mainpanel.attr('openstate')=='closed')
this.$mainpanel.animate({top: 0}, speed).attr({openstate: 'open'})
else
this.$mainpanel.animate({top: -this.contentdivheight+'px'}, speed).attr({openstate: 'closed'})
},

init:function(file, height, speed){
jQuery(document).ready(function($){
jkpanel.$mainpanel=$('<div id="dropDownPanel"><div class="contentdiv"></div></div>').prependTo('body')
var $contentdiv=jkpanel.$mainpanel.find('.contentdiv')
var $controldiv=jkpanel.$mainpanel.find('.control').css({cursor: 'wait'})
$contentdiv.load(file, '', function($){
var heightattr=isNaN(parseInt(height))? 'auto' : parseInt(height)+'px'
$contentdiv.css({height: heightattr})
jkpanel.contentdivheight=parseInt($contentdiv.get(0).offsetHeight)
jkpanel.$mainpanel.css({top:-jkpanel.contentdivheight+'px', visibility:'visible'}).attr('openstate', 'closed')
$controldiv.css({cursor:'hand', cursor:'pointer'})
})
jkpanel.$mainpanel.click(function(){jkpanel.openclose($, speed)})
})
}
}
// Script d'initialisation, transmettant à la fonction init les paramètres suivants : fichier à charger, hauteur du panneau déployé, durée de l'animation de déploiement et de repli.
jkpanel.init('../PHP/admin_access.php', '80px', 500)

JavaScript (functions.js, fonction permettant le contrôle du formulaire ainsi que la gestion des réactions du panneau) :
function verif() {
if((document.getElementById('login').value == "") && (document.getElementById('pass').value == "")) {
alert ("Renseignez le formulaire.");
jkpanel.openclose();
return false;
}
else if(document.getElementById('login').value == "") {
alert ("Renseignez votre login !");
jkpanel.openclose();
return false;
}
else if(document.getElementById('pass').value == "") {
alert ("Renseignez votre mot de passe !");
jkpanel.openclose();
return false;
}
}
// L'instruction jkpanel.openclose(); permet de garder le panneau déployé en cas d'échec d'identification (identifiants eronnés, absence du mot de passe ou du login ou des deux)

PHP (fichier contenant le formulaire de connexion) :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
</head>
<body>
<div class="center">
<form name="form_admin" id="form_admin" method="post" action="back_office.php" onsubmit="return verif(); jkpanel.openclose()">
<label>Login administrateur :</label>&nbsp;<input name="login" id="login" type="text" size="20" onclick="jkpanel.openclose()"/>
<label>Mot de passe :</label>&nbsp;<input name="pass" id="pass" type="password" size="20" onclick="jkpanel.openclose()"/>
<br/><br/>
<input type="submit" value="Valider">&nbsp;<input type="reset" value="Annuler">
</form>
</div>
</body>
</html>
// L'instruction jkpanel.openclose(); permet de garder le panneau déployé en cas de clic sur les champs de saisies. Elle conserve également le panneau déployé après le passage de la fonction de contrôle du formulaire.
Autrement dit, dans tous les cas (échec ou réussite), le formulaire restera visible, mais en cas de réussite, nous passons au fichier contenant l'administration, donc le panneau n'apparaitra plus sur index.php (fichier de départ) quand on y retournera.

Observation :
En l'occurence et parce que je n'en avais pas besoin, j'ai supprimé une 3ème div nommée "controldiv". Elle n'apparaît donc plus dans mon CSS ni dans le code JavaScript. Cette div servait initialement à contenir une image, un texte ou autre qui serve de bouton sur lequel cliquer pour tirer le panneau vers le bas. Tout le panneau était invisible à l'écran, excepté cette dite div, figurant un bouton en haut de la page.

Bugs :
Dans mon cas, j'insère un formulaire d'accès admin' dans le panneau. Soucis : sur le moindre clic dans le panneau, il se repliait. Plusieurs choses étaient donc impossibles :
- saisie des informations de connexion. Un clic sur les champs de textes dans le but d'y saisir les identifiants faisait replier le panneau.
- validation d'informations eronnées. Si on admet que l'utilisateur saisit de mauvais identifiants et clique sur "Valider", le panneau l'avertissait de son erreur mais se repliait également. Gênant car nécessite le redéploiement dudit panneau pour refaire un essai de connexion.

Bonne chance à ceux qui souhaiteraient utiliser cette fonction, si vous avez des questions, n'hésitez pas

Bonne journée à tous !

Alexandre