Developpez.com - Rubrique JavaScript

Le Club des Développeurs et IT Pro

Sortie d'un Custom Scroll pour les composants DHTMLX

La bibliothèque AJAX s'enrichit d'une barre de défilement façon iOS

Le 2013-06-20 14:08:44, par kdmbella, Expert éminent
Custom Scroll pour les composants DHTMLX

La bibliothèque AJAX DHTMLX dans sa dernière version vient de s’enrichir d’une nouvelle fonctionnalité. En effet, à l’instar de ce que l’on observe sur les systèmes Mac OS, on a désormais la possibilité d’adjoindre aux composants DHTMLX une barre de défilement personnalisée notamment avec les composants tels Grid, Tree, Layout, DataView et bien d’autres pouvant supporter cette fonctionnalité.

Le comportement est le suivant : la barre de défilement est invisible et n'apparaît qu'une fois que l’utilisateur commence à scroller ; par ailleurs elle s’agrandit une fois que l’utilisateur passe le pointeur de la souris dessus (mouse over) comme on peut l’observer sur l’illustration qui suit.


Pour rendre cette fonctionnalité disponible dans votre application il est nécessaire de télécharger les fichiers customscroll.js et customscroll.css (téléchargeable ici) et de les ajouter aux fichiers qui constituent votre application, en indiquant dans votre code source les chemins vers ceux-ci comme indiqué dans ce code :

Code html :
1
2
3
4
5
<link rel="stylesheet" type="text/css" href="customscroll.css"> 
<script type="text/javascript" src="customscroll.js"></script> 
<script type="text/javascript"> 
       dhtmlx.CustomScroll.init(); 
</script>

Il faut préciser que les chemins vers ces fichiers doivent apparaître après les chemins des fichiers de la bibliothèque DHTMLX sinon cela ne marchera pas.

Une fois ceci fait, tous les composants DHTMLX de votre application susceptibles de supporter cette fonctionnalité pourront avoir leur « custom scroll».

Source : blog de DHTMLX

Et vous, que pensez-vous de cette nouvelle fonctionnalité ?