Attention : Le contenu de ces pages n'a pas été mis à jour depuis longtemps. Il est probablement obsolète pour Firefox 4.0/Gecko 4.0 et supérieur. Pour du contenu plus récent, allez consulter developer.mozilla.org.

Xbl_scrollable

XBL / scrollable

Objectifs

L'objectif de cet XBL est de permettre l'accès aux scrollbars d'un élément avec un comportement du type "overflow: auto". Ce code a été écrit par TheSheer du channel #xul sur irc.mozilla.org, un grand merci à lui.

Code XBL

Attention il faut virer le tag <pre> </pre> en début et fin de code !

 <?xml version="1.0"?>
 <bindings xmlns="[[http://www.mozilla.org/xbl"]]>

 <binding id="scrollableElement">
   <handlers>
     <handler event="DOMMouseScroll"><![CDATA[
       this.scrollContent(event.detail > 0 ? 50 : -50 );
     ]]></handler>
   </handlers>
   <implementation>
     <method name="scrollContent">
       <parameter name="aCount"/>
       <body><![CDATA[
       var scrollbar = (this.mVerticalScrollbar) ? this.mVerticalScrollbar :
                                                   this.mHorizontalScrollbar ;
       if (!scrollbar) return;
       var curPos = parseInt(scrollbar.getAttribute('curpos'));
       var maxPos = parseInt(scrollbar.getAttribute('maxpos'));
       var newPos = Math.max(0, Math.min(maxPos, curPos + aCount));
       scrollbar.setAttribute('curpos', newPos);
       ]]></body>
     </method>
   </implementation>
 </binding>

 <binding id="scrollbar"
   extends="[[chrome://global/content/bindings/scrollbar.xml#scrollbar"]]>
   <implementation>
     <constructor><![CDATA[
       if (navigator.platform.indexOf('Mac') != -1)
         this.initScrollbar();
       if (this.orient == 'horizontal')
         this.parentNode.mHorizontalScrollbar = this;
       else
         this.parentNode.mVerticalScrollbar = this;
     ]]></constructor>
     <destructor><![CDATA[
       if (this.orient == 'horizontal')
         this.parentNode.mHorizontalScrollbar = null;
       else
         this.parentNode.mVerticalScrollbar = null;
     ]]></destructor>
   </implementation>
 </binding>

 </bindings>

</verbatim>

Mise en application

Voici quelques lignes à mettre dans un fichier css de votre choix (attention de modifier le path chrome pour qu'il mène à votre fichier XBL :

 .scrollable {
     overflow: auto;
     -moz-binding:    url('[[chrome://ext/content/xbl/scrollableElement.xbl#scrollableElement')]];
 }
 .scrollable > scrollbar {
     -moz-binding: url('[[chrome://ext/content/xbl/scrollableElement.xbl#scrollbar')]];
 }

Et un petit exemple de controle des scrollbars. Imaginons que nous avons le code XUL suivant :

 <vbox class="scrollable" id="foo" flex="1"/>

Nous pouvons dès lors manipuler les scrollbars (lorsqu'elles sont présentent) de manière très simple grace aux méthodes et aux propriétés de l'élément scrollbar. Les 2 elements accesible sont mVerticalScrollbar et mHorizontalScrollbar.Voici un petit exemple qui nous permet de scroller au plus bas de la vbox :

 item = document.getElementById("foo");
 maxVerticalPos = item.mVerticalScrollbar.getAttribute('maxpos');
 item.mVerticalScrollbar.setAttribute('curpos' , maxVerticalPos);

Le contenu de cette page est disponible selon certaines conditions de réutilisation.
Cette page du wiki n'est pas éditable. Le système wiki n'étant plus fonctionnel.

Xbl_scrollable

XBL / scrollable

Objectifs

Code XBL

Mise en application

Wiki