스크롤 가능 영역

  • 릴리스 버전: Zurich
  • 업데이트 날짜 2025년 07월 31일
  • 소요 시간: 2분
  • 스크롤 가능한 영역은 시간이 지남에 따라 내용이 아래에서 위로 스크롤되는 div입니다.

    모든 HTML 콘텐츠를 스크롤할 수 있으며 스크롤러 내부의 모든 항목은 작동하는 링크와 이미지가 있는 작동 가능한 HTML입니다.

    스크롤 가능한 영역을 만들려면 스크롤 콘텐츠를 UI 페이지와 같은 scrollable_area 태그 안에 래핑합니다.
        <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>

    그러면 시스템이 100픽셀 높이의 div를 만들고 콘텐츠가 자동으로 아래에서 위로 스크롤됩니다. 예를 들어 1000픽셀 높이의 텍스트 블록이 있는 경우 상위 100픽셀이 표시된 다음 픽셀 2-101, 3-102 등이 표시됩니다. 상단에 도달하면 다시 바닥으로 감쌉니다.

    이 샘플 코드는 우선 순위 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>