Zones défilantes

  • Rversion finale: Yokohama
  • Mis à jour 30 janv. 2025
  • 1 minute de lecture
  • Une zone défilante est une div où le contenu défile de bas en haut au fil du temps.

    Vous pouvez faire défiler n’importe quel contenu HTML, et tout ce qui se trouve à l’intérieur du défilement est du HTML opérationnel avec des liens et des images fonctionnels.

    Pour créer des zones défilantes, enveloppez le contenu de défilement à l’intérieur d’une balise scrollable_area, probablement dans une page de l’interface utilisateur :
        <g:scrollable_area height="100px">
            <g2:evaluate var="jvar_temp" expression="var kb = new GlideRecord('kb_knowledge');"/>
            <g:inline template="kb_section.xml"/>
        </g:scrollable_area>

    Le système créera alors un div de 100 pixels de haut et le contenu défilera automatiquement de bas en haut. Si vous avez un bloc de texte de 1000 pixels de haut, par exemple, vous verrez les 100 premiers pixels, puis les pixels 2-101, puis 3-102, etc. Une fois qu’il atteint le haut, il s’enroule vers le bas.

    Cet exemple de code crée un défilement avec une liste d’incidents de priorité 1.
    <?xml version="1.0" encoding="utf-8" ?>
    <j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
      <g2:evaluate var="jvar_inc">
        var inc = new GlideRecord('incident');
        inc.addActiveQuery();
        inc.addQuery('priority',1);
        inc.query();
      </g2:evaluate>
    
      <g2:scrollable_area height="100px"> 
        <table border="0" cellspacing="2" cellpadding="0" width="100%">
          <j2:while test="$[inc.next()]">
            <j2:set var="jvar_inc_link" value="incident.do?sys_id=$[inc.sys_id]"/>
            <j2:set var="jvar_inc_list_link" value="incident_list.do?sysparm_query=active=true"/>
    	<tr>
    	  <td>
                <a href="$[jvar_inc_link]">
                  <IMG SRC="images/services.png" style="padding-right:10px"></IMG>
                </a>
                <a href="$[jvar_inc_link]" style="padding-right:10px; color:blue">$[inc.number]</a>
              </td>
              <td>$[inc.short_description]</td>
            </tr>
          </j2:while>
          <tr>
            <td align="center" colspan="2"><a href="$[jvar_inc_list_link]" style="color:blue">View all active incidents</a></td>
          </tr>
        </table>
      </g2:scrollable_area> 
    </j:jelly>