Ce type de composant est très utile pour les applications / sites Web qui veulent se "rapprocher" des applications natives en termes de facilité de navigation et d'expérience utilisateur (IHM - Interface Homme - Machine).
Nous nous baserons sur JQuery, la célébre API.
Nous proposerons dans cet article une <palette flottante> qui peut s'afficher verticalement ou horizontalement.
- Dans un premier temps, il faut choisir les icônes qui seront utilisés dans notre palette flottante.
Veuillez choisir des icônes qui "retranscrivent" les fonctionnalités que vous souhaitez mettre en oeuvre.
Il est conseillé d'utiliser la même largeur et hauteur pour tous les icônes afin de garantir un meilleur effet visuel.
Pour chaque icône, prévoir la version <over> (lorsque la souris passe sur l'icône).
Exemple : <outil.png> et <outil_over.png>
- Veuillez ensuite initialiser JQuery dans votre page
<html>
<head>
<title>mon titre</title>
<link rel="stylesheet" type="text/css"
href="css/jquery-ui-x.x.x.custom.css" />
<script type="text/javascript" src="js/jquery-x.x.x.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-x.x.x.custom.min.js"></script>
</head>
...
</html>
<x.x.x> = version de JQuery que vous utilisez.
Nous partons du principe que vous avez ajouté JQuery (JS + CSS) dans votre projet.
A NOTER : vous pouvez si vous le souhaitez customiser le style par défaut proposé par JQuery pour ses composants notamment les composants liés à notre <palette flottante>.
- Déclaration de la <palette flottante> horizontale
Dans notre exemple, nous avons organisé les outils par groupe (<GROUPE1> et <GROUPE2>) avec deux outils par groupe.
Nous avons donc les fichiers <image> suivants : outil1.png, outil2.png, outil3.png et outil4.png ainsi que les versions <over> de ces fichiers.
Voici le script Javascript :
function affPaletteOutilsHorizontale() {
var dataHTML = "<table cellspacing='2' cellpadding='2' style='position: relative; left: -10px'>";
La première ligne de la <palette flottante> affiche le libellé des groupes
dataHTML += "<tr>";
dataHTML += "<thead>";
dataHTML += "<th style='color: white; background-color: darkgray; text-align: center;'><b>GROUPE 1</b></th>";
dataHTML += "<th style='color: white; background-color: darkgray; text-align: center;'><b>GROUPE 2</b></th>";
dataHTML += "</thead>";
dataHTML += "</tr>";
La deuxième ligne affiche les outils regroupés par groupe
dataHTML += "<tr>";
// partie GROUPE 1
dataHTML += "<td>";
dataHTML += "<table cellspacing='2' cellpadding='2'>";
dataHTML += "<tr>";
dataHTML += "<td><img style='cursor: pointer;' id='outil1' " +
"onmouseover='mouse_over(\"outil1\");' onmouseout='mouse_out(\"outil1\");' " +
"onclick='go_outil1();' " +
"src='images/outil1.png' title=\"titre de mon outil 1 pour le groupe 1\" /></td>";
dataHTML += "<td><img style='cursor: pointer;' id='outil2' " +
"onmouseover='mouse_over(\"outil2\");' onmouseout='mouse_out(\"outil2\");' " +
"onclick='go_outil2();' " +
"src='images/outil2.png' title=\"titre de mon outil 2 pour le groupe 1\" /></td>";
dataHTML += "</tr>";
dataHTML += "</table>";
dataHTML += "</td>";
// partie GROUPE 2
dataHTML += "<td>";
dataHTML += "<table cellspacing='2' cellpadding='2'>";
dataHTML += "<tr>";
dataHTML += "<td><img style='cursor: pointer;' id='outil3' " +
"onmouseover='mouse_over(\"outil3\");' onmouseout='mouse_out(\"outil3\");' " +
"onclick='go_outil3();' " +
"src='images/outil3.png' title=\"titre de mon outil 3 pour le groupe 2\" /></td>";
dataHTML += "<td><img style='cursor: pointer;' id='outil4' " +
"onmouseover='mouse_over(\"outil4\");' onmouseout='mouse_out(\"outil4\");' " +
"onclick='go_outil4();' " +
"src='images/outil4.png' title=\"titre de mon outil 4 pour le groupe 2\" /></td>";
dataHTML += "</tr>";
dataHTML += "</table>";
dataHTML += "</td>";
dataHTML += "</tr>";
dataHTML += "</table>";
Le titre de la <palette flottante> :
var lib_etiq = "<span style='position:relative; top: -10px; font-size: 12px;'><u>Outils</u>" +
"<span style='position: relative; top: 4px; left: 240px;'>" +
"<img id='vertical' src='images/swap.png' style='cursor: pointer' title='barre verticale' />" +
"</span></span>";
<swap.png> = outil qui permet de switcher en mode vertical - nous vous laissons le soin de choisir l'icône qui convient le mieux à la fonction
var fadeEffectDuration = 750;
<fadeEffectDuration> = délai avant l'affichage de la <palette flottante> par exemple 750 millisecondes.
$(document).ready(function() {
$dialog = $("<div style='background-color: #F2F2F2;'></div>").html(dataHTML).dialog( {
autoOpen: true,
closeOnEscape: false,
modal: false,
Vous avez noté que votre <palette flottante> peut être déplacée
draggable: true,
title: lib_etiq,
width: 'YYYpx',
height: 'auto',
minHeight : 'YYYpx',
show: {
effect: "fade",
duration: fadeEffectDuration
},
Passer en mode <palette flottante> vertical si click sur <swap.png>
open: function(event, ui) {
$('#vertical').bind('click', function() {
$dialog.dialog('close');
$dialog.dialog('destroy').remove();
affPaletteOutils();
});
Vous pouvez définir par défaut la position de votre <palette flottante>
$(this).parent().css('position', 'fixed');
$(this).parent().css('top', 'YYpx');
$(this).parent().css('left', 'YYpx');
Cacher bouton "fermer"
$(this).parent().children().children(".ui-dialog-titlebar-close").hide();
Désactiver scrolling
$(this).css('overflow', 'hidden');
}
});
Supprimer l'opacité
$(".ui-widget-overlay").attr('style','opacity: 0;');
Centrer le titre
$(".ui-dialog-title").attr('style','float:none !important; display: block; text-align: center; width: YYYpx;');
Modifier la hauteur du titre
$(".ui-dialog-titlebar").attr('style','height: YYpx;');
});
}
<Y> largeur, hauteur, position en pixels - valeur à définir selon vos besoins
Nous partons sur le même exemple que la <palette flottante> horizontale mais en vertical.
Cette <palette> pourra aussi se "collapser" (se réduire - seul le titre de la <palette> apparaîtra).
Voici le script Javascript :
var isCollapse = false;
<isCollapse> est un flag qui permet de tester si la <palette> est réduite ou pas.
function affPaletteOutils() {
var dataHTML = "<table cellspacing='2' cellpadding='2' style='position: relative; left: -10px'>";
// partie GROUPE 1
dataHTML += "<tr><td colspan='2' style='color: white; background-color: darkgray; text-align: center;'><b>Groupe 1</b></td></tr>";
dataHTML += "<tr>";
dataHTML += "<td><img style='cursor: pointer;' id='outil1' " +
"onmouseover='mouse_over(\"outil1\");' onmouseout='mouse_out(\"outil1\");' " +
"onclick='go_outil1();' " +
"src='images/outil1.png' title=\"mon titre pour outil1 pour groupe 1\" /></td>";
dataHTML += "<td><img style='cursor: pointer;' id='outil2' " +
"onmouseover='mouse_over(\"outil2\");' onmouseout='mouse_out(\"outil2\");' " +
"onclick='go_outil2();' " +
"src='images/outil2.png' title=\"mon titre pour outil 2 pour groupe 1\" /></td>";
dataHTML += "</tr>";
dataHTML += "<tr style='height: 10px;'></tr>";
// partie GROUPE 2
dataHTML += "<tr><td colspan='2' style='color: white; background-color: darkgray; text-align: center;'><b>Groupe 2</b></td></tr>";
dataHTML += "<tr>";
dataHTML += "<td><img style='cursor: pointer;' id='outil3' " +
"onmouseover='mouse_over(\"outil3\");' onmouseout='mouse_out(\"outil3\");' " +
"onclick='go_outil3();' " +
"src='images/outil3.png' title=\"mon titre pour outil3 pour groupe 2\" /></td>";
dataHTML += "<td><img style='cursor: pointer;' id='outil4' " +
"onmouseover='mouse_over(\"outil4\");' onmouseout='mouse_out(\"outil4\");' " +
"onclick='go_outil4();' " +
"src='images/outil4.png' title=\"mon titre pour outil 4 pour groupe 2\" /></td>";
dataHTML += "</tr>";
dataHTML += "<tr style='height: 10px;'></tr>";
dataHTML += "</table>";
var lib_etiq = "<span style='position:relative; top: -10px; font-size: 12px;'><u>Outils</u>" +
"<span style='position: relative; top: 4px; left: 20px;'>" +
"<span style='position: relative; top: -1px;'><img id='horizontal' src='images/swap.png' style='cursor: pointer' title='barre horizontale' /></span> " +
"<img id='collapse' src='images/collapse.png' style='cursor: pointer' " +
"title='réduire ou agrandir la palette des outils !' /></span></span>";
<swap.png> = outil qui permet de switcher en mode horizontal - nous vous laissons le soin de choisir l'icône qui convient le mieux à la fonction
<collapse.png> = outil qui permet de réduire la <palette flottante> à son strict minimum (son titre) - choisir l'icône qui convient le mieux à la fonction
var fadeEffectDuration = 750;
<width_window> permet de positionner horizontalement la <palette> par défaut
var width_window = (window.innerWidth - YYY);
$(document).ready(function() {
$dialog = $("<div style='background-color: #F2F2F2;'></div>").html(dataHTML).dialog( {
autoOpen: true,
closeOnEscape: false,
modal: false,
draggable: true,
title: lib_etiq,
width: 'YYYpx',
height: 'auto',
minHeight : 'YYYpx',
show: {
effect: "fade",
duration: fadeEffectDuration
},
Selon la valeur de <isCollapse> nous ajustons la hauteur de la <palette> - nous associons une petite animation pour plus de fluidité
open: function(event, ui) {
$('#collapse').bind('click', function() {
if (isCollapse) {
isCollapse = false;
$(this).parents('.ui-dialog').animate({
height: 'YYYpx'
}, 200);
}
else {
isCollapse = true;
$(this).parents('.ui-dialog').animate({
height: 'YYpx'
}, 200);
}
});
$('#horizontal').bind('click', function() {
$dialog.dialog('close');
$dialog.dialog('destroy').remove();
affPaletteOutilsHorizontale();
});
$(this).bind( "dialogdragstop", function(event, ui) {
if (isCollapse)
$(this).parents('.ui-dialog').css('height', 'YYpx');
});
// position
$(this).parent().css('position', 'fixed');
$(this).parent().css('top', 'YYYpx');
$(this).parent().css('left', width_window + 'px');
// cacher bouton "fermer"
$(this).parent().children().children(".ui-dialog-titlebar-close").hide();
// désactiver scrolling
$(this).css('overflow', 'hidden');
}
});
// supprimer l'opacité
$(".ui-widget-overlay").attr('style','opacity: 0;');
// centrer le titre
$(".ui-dialog-title").attr('style','float:none !important; display: block; text-align: center; width: YYpx;');
// modifier la hauteur du titre
$(".ui-dialog-titlebar").attr('style','height: YYpx;');
});
}
<Y> largeur, hauteur, position en pixels - valeur à définir selon vos besoins
<body>
...
<?php
echo "<script>";
echo "affPaletteOutilsHorizontale();";
echo "</script>";
?>
...
</body>
Dans cet exemple nous lancons la <palette flottante> en mode horizontal lors de l'affichage de la page.
Une fois qu'elle est affichée, nous pouvons switcher entre le mode vertical et le mode horizontal avec la possibilité de réduire la <palette> en mode vertical.
Voici le script Javascript :
function affPaletteOutilsHorizontale() {
var dataHTML = "<table cellspacing='2' cellpadding='2' style='position: relative; left: -10px'>";
La première ligne de la <palette flottante> affiche le libellé des groupes
dataHTML += "<tr>";
dataHTML += "<th style='color: white; background-color: darkgray; text-align: center;'><b>GROUPE 1</b></th>";
dataHTML += "<th style='color: white; background-color: darkgray; text-align: center;'><b>GROUPE 2</b></th>";
dataHTML += "</thead>";
dataHTML += "</tr>";
La deuxième ligne affiche les outils regroupés par groupe
dataHTML += "<tr>";
// partie GROUPE 1
dataHTML += "<td>";
dataHTML += "<table cellspacing='2' cellpadding='2'>";
dataHTML += "<tr>";
dataHTML += "<td><img style='cursor: pointer;' id='outil1' " +
"onmouseover='mouse_over(\"outil1\");' onmouseout='mouse_out(\"outil1\");' " +
"onclick='go_outil1();' " +
"src='images/outil1.png' title=\"titre de mon outil 1 pour le groupe 1\" /></td>";
dataHTML += "<td><img style='cursor: pointer;' id='outil2' " +
"onmouseover='mouse_over(\"outil2\");' onmouseout='mouse_out(\"outil2\");' " +
"onclick='go_outil2();' " +
"src='images/outil2.png' title=\"titre de mon outil 2 pour le groupe 1\" /></td>";
dataHTML += "</tr>";
dataHTML += "</table>";
dataHTML += "</td>";
// partie GROUPE 2
dataHTML += "<td>";
dataHTML += "<table cellspacing='2' cellpadding='2'>";
dataHTML += "<tr>";
dataHTML += "<td><img style='cursor: pointer;' id='outil3' " +
"onmouseover='mouse_over(\"outil3\");' onmouseout='mouse_out(\"outil3\");' " +
"onclick='go_outil3();' " +
"src='images/outil3.png' title=\"titre de mon outil 3 pour le groupe 2\" /></td>";
dataHTML += "<td><img style='cursor: pointer;' id='outil4' " +
"onmouseover='mouse_over(\"outil4\");' onmouseout='mouse_out(\"outil4\");' " +
"onclick='go_outil4();' " +
"src='images/outil4.png' title=\"titre de mon outil 4 pour le groupe 2\" /></td>";
dataHTML += "</tr>";
dataHTML += "</table>";
dataHTML += "</td>";
dataHTML += "</tr>";
dataHTML += "</table>";
Le titre de la <palette flottante> :
var lib_etiq = "<span style='position:relative; top: -10px; font-size: 12px;'><u>Outils</u>" +
"<span style='position: relative; top: 4px; left: 240px;'>" +
"<img id='vertical' src='images/swap.png' style='cursor: pointer' title='barre verticale' />" +
"</span></span>";
<swap.png> = outil qui permet de switcher en mode vertical - nous vous laissons le soin de choisir l'icône qui convient le mieux à la fonction
var fadeEffectDuration = 750;
<fadeEffectDuration> = délai avant l'affichage de la <palette flottante> par exemple 750 millisecondes.
$dialog = $("<div style='background-color: #F2F2F2;'></div>").html(dataHTML).dialog( {
autoOpen: true,
closeOnEscape: false,
modal: false,
Vous avez noté que votre <palette flottante> peut être déplacée
title: lib_etiq,
width: 'YYYpx',
height: 'auto',
minHeight : 'YYYpx',
show: {
effect: "fade",
duration: fadeEffectDuration
},
Passer en mode <palette flottante> vertical si click sur <swap.png>
open: function(event, ui) {
$('#vertical').bind('click', function() {
$dialog.dialog('close');
$dialog.dialog('destroy').remove();
affPaletteOutils();
});
Vous pouvez définir par défaut la position de votre <palette flottante>
$(this).parent().css('position', 'fixed');
$(this).parent().css('top', 'YYpx');
$(this).parent().css('left', 'YYpx');
Cacher bouton "fermer"
$(this).parent().children().children(".ui-dialog-titlebar-close").hide();
Désactiver scrolling
$(this).css('overflow', 'hidden');
}
});
Supprimer l'opacité
$(".ui-widget-overlay").attr('style','opacity: 0;');
Centrer le titre
$(".ui-dialog-title").attr('style','float:none !important; display: block; text-align: center; width: YYYpx;');
Modifier la hauteur du titre
$(".ui-dialog-titlebar").attr('style','height: YYpx;');
});
}
<Y> largeur, hauteur, position en pixels - valeur à définir selon vos besoins
- Déclaration de la <palette flottante> verticale
Nous partons sur le même exemple que la <palette flottante> horizontale mais en vertical.
Cette <palette> pourra aussi se "collapser" (se réduire - seul le titre de la <palette> apparaîtra).
Voici le script Javascript :
var isCollapse = false;
<isCollapse> est un flag qui permet de tester si la <palette> est réduite ou pas.
function affPaletteOutils() {
var dataHTML = "<table cellspacing='2' cellpadding='2' style='position: relative; left: -10px'>";
// partie GROUPE 1
dataHTML += "<tr><td colspan='2' style='color: white; background-color: darkgray; text-align: center;'><b>Groupe 1</b></td></tr>";
dataHTML += "<tr>";
dataHTML += "<td><img style='cursor: pointer;' id='outil1' " +
"onmouseover='mouse_over(\"outil1\");' onmouseout='mouse_out(\"outil1\");' " +
"onclick='go_outil1();' " +
"src='images/outil1.png' title=\"mon titre pour outil1 pour groupe 1\" /></td>";
dataHTML += "<td><img style='cursor: pointer;' id='outil2' " +
"onmouseover='mouse_over(\"outil2\");' onmouseout='mouse_out(\"outil2\");' " +
"onclick='go_outil2();' " +
"src='images/outil2.png' title=\"mon titre pour outil 2 pour groupe 1\" /></td>";
dataHTML += "</tr>";
dataHTML += "<tr style='height: 10px;'></tr>";
// partie GROUPE 2
dataHTML += "<tr><td colspan='2' style='color: white; background-color: darkgray; text-align: center;'><b>Groupe 2</b></td></tr>";
dataHTML += "<tr>";
dataHTML += "<td><img style='cursor: pointer;' id='outil3' " +
"onmouseover='mouse_over(\"outil3\");' onmouseout='mouse_out(\"outil3\");' " +
"onclick='go_outil3();' " +
"src='images/outil3.png' title=\"mon titre pour outil3 pour groupe 2\" /></td>";
dataHTML += "<td><img style='cursor: pointer;' id='outil4' " +
"onmouseover='mouse_over(\"outil4\");' onmouseout='mouse_out(\"outil4\");' " +
"onclick='go_outil4();' " +
"src='images/outil4.png' title=\"mon titre pour outil 4 pour groupe 2\" /></td>";
dataHTML += "</tr>";
dataHTML += "<tr style='height: 10px;'></tr>";
dataHTML += "</table>";
var lib_etiq = "<span style='position:relative; top: -10px; font-size: 12px;'><u>Outils</u>" +
"<span style='position: relative; top: 4px; left: 20px;'>" +
"<span style='position: relative; top: -1px;'><img id='horizontal' src='images/swap.png' style='cursor: pointer' title='barre horizontale' /></span> " +
"<img id='collapse' src='images/collapse.png' style='cursor: pointer' " +
"title='réduire ou agrandir la palette des outils !' /></span></span>";
<swap.png> = outil qui permet de switcher en mode horizontal - nous vous laissons le soin de choisir l'icône qui convient le mieux à la fonction
<collapse.png> = outil qui permet de réduire la <palette flottante> à son strict minimum (son titre) - choisir l'icône qui convient le mieux à la fonction
var fadeEffectDuration = 750;
<width_window> permet de positionner horizontalement la <palette> par défaut
var width_window = (window.innerWidth - YYY);
$(document).ready(function() {
$dialog = $("<div style='background-color: #F2F2F2;'></div>").html(dataHTML).dialog( {
autoOpen: true,
closeOnEscape: false,
modal: false,
draggable: true,
title: lib_etiq,
width: 'YYYpx',
height: 'auto',
minHeight : 'YYYpx',
show: {
effect: "fade",
duration: fadeEffectDuration
},
Selon la valeur de <isCollapse> nous ajustons la hauteur de la <palette> - nous associons une petite animation pour plus de fluidité
open: function(event, ui) {
$('#collapse').bind('click', function() {
if (isCollapse) {
isCollapse = false;
$(this).parents('.ui-dialog').animate({
height: 'YYYpx'
}, 200);
}
else {
isCollapse = true;
$(this).parents('.ui-dialog').animate({
height: 'YYpx'
}, 200);
}
});
$('#horizontal').bind('click', function() {
$dialog.dialog('close');
$dialog.dialog('destroy').remove();
affPaletteOutilsHorizontale();
});
$(this).bind( "dialogdragstop", function(event, ui) {
if (isCollapse)
$(this).parents('.ui-dialog').css('height', 'YYpx');
});
// position
$(this).parent().css('position', 'fixed');
$(this).parent().css('top', 'YYYpx');
$(this).parent().css('left', width_window + 'px');
// cacher bouton "fermer"
$(this).parent().children().children(".ui-dialog-titlebar-close").hide();
// désactiver scrolling
$(this).css('overflow', 'hidden');
}
});
// supprimer l'opacité
$(".ui-widget-overlay").attr('style','opacity: 0;');
// centrer le titre
$(".ui-dialog-title").attr('style','float:none !important; display: block; text-align: center; width: YYpx;');
// modifier la hauteur du titre
$(".ui-dialog-titlebar").attr('style','height: YYpx;');
});
}
<Y> largeur, hauteur, position en pixels - valeur à définir selon vos besoins
- Comment utiliser notre <palette flottante> ?
<body>
...
<?php
echo "<script>";
echo "affPaletteOutilsHorizontale();";
echo "</script>";
?>
...
</body>
Dans cet exemple nous lancons la <palette flottante> en mode horizontal lors de l'affichage de la page.
Une fois qu'elle est affichée, nous pouvons switcher entre le mode vertical et le mode horizontal avec la possibilité de réduire la <palette> en mode vertical.
.png)
