질문/조언팁/리소스 공유

앞선 팁에서 table을 div로 wrap해서 화면사이즈에 반응성을 높여주는 디자인을 소개했는데요.

사실 table을 스와이핑 또는 수평 스크롤하더라도 모바일 세로 화면에 컬럼 수(열)가 많다면 자신이 어떤 내용을 보고 있는지 파악하기 어려울 때가 많습니다.

 

그럴 때 수평 스크롤 이벤트를 걸어서 '제목'과 특정열이 테이블 left 포지션에 걸렸을 때 position 속성값을 absolute나 fixed로 바꿔서 위치를 고정시켜주면 이용자들의 테이블 내용 파악에 큰 도움을 줄 수 있습니다.

 

테이블형 게시판 스킨을 기준으로 예시해보겠습니다.

 

 


 

 

1. 목록 파일 html 수정

 

- 고정시킬 열을 식별할 수 있도록 클래스 속성을 붙여줍니다. thead의 th 태그에도 tbody의 td에도 붙여줘야겠죠.

- 참고로 저는 특정 사용자정의를 고정시킬 생각이어서 다음과 같이 했습니다. (참고로 스킨 설정 파일(skin.xml)에 변수를 새로 하나 추가해서 $module_info->fixed에는 사용자정의 변수명이 들어가 있습니다)

- 테이블 헤더 부분

<th scope="col" cond="$val->idx != -1" class="fixed"|cond="$module_info->fixed && $module_info->fixed === $val->eid"><span><a href="{getUrl('sort_index', $val->eid, 'order_type', $order_type)}" rel="nofollow">{$val->name}</a></span></th>

- 테이블 바디 부분 (공지사항도 동일합니다^^)

<td cond="$val->idx != -1" class="fixed"|cond="$module_info->fixed && $module_info->fixed === $val->eid">{$document->getExtraValueHTML($val->idx)|noescape}&nbsp;</td>

=> 이렇게 하면 고정시킬 테이블 열에 fixed라는 클래스가 붙게 됩니다.

=> 스킨 설정 파일 수정없이 바로 list.html 등을 수정하시려면 조건식을 class="fixed"|cond="$val->eid === '사용자정의 변수명'"으로 하면 됩니다.

=> 또한 사용자정의가 아니라 기본 변수에 클래스 값을 주는 건 어렵지 않게 하실 수 있을 거라 봅니다.

 

 

2. css 수정

 

- 이제 fixed에 적용할 스타일을 첨가해야겠습니다.

- 다음과 같이 적용하겠습니다.

.board_list th.fixed, .board_list td.fixed {
    position: relative;
    left: 0;
    z-index: 1;
}

- left값과 z-index값은 위의 값을 기준으로 각자 사정에 맞게 조절하시면 될 겁니다.

 

 

3. 스크립트 추가

 

- 이제 가장 중요한 js 부분입니다. 이건 내용이 기니까 코드하이라이트로 가겠습니다 :)

var table = '.board_list table',
    th = table + ' > thead > tr > th.fixed',
    td = table + ' > tbody > tr > td.fixed';    // 테이블 및 fixed 클래가 있는 요소를 정의합니다.

if ( $(table).length )    // 페이지에 '.board_list table'가 있을 경우에만 작동합니다.
{
    var width = $(th).outerWidth(),
        fixed_width = $(th).offset().left - $(table).offset().left,    // 스크롤 이벤트에서 열을 고정시켜주는 기준값입니다.
        margin_left = $(table).css('margin-left');
    var absolute = {'position': 'absolute'},
        relative = {'position': 'relative'};

    $(th).css('width', width);
    $(td).each(function(i) {
        $(this).css({
            'width': $(this).width()
        });
    });        // 포지션이 absolute가 될 경우에 대비해 넓이값을 미리 고정시켜줍니다.

    $('.table_wrapper').on('scroll', function() {    // table_wrapper은 테이블을 감싸고 있는 div의 클래스값입니다. 이 요소를 기준으로 스크롤 이벤트를 설정합니다.
        if( $(this).scrollLeft() > fixed_width )    // 스크롤이 기준값만큼 이동하면
        {
            $(th).css(absolute);
            $(td).css(absolute);    // fixed를 클래스값으로 가지는 th와 td에 absolute 포지션이 적용됩니다.
            $(table).css('margin-left', width);    // th와 td가 absolute로 빠져나가므로 테이블의 좌측 바깥 여백 값을 th와 td의 넓이만큼 적용합니다.
        }
        else    // 스크롤이 기준값보다 덜 이동하면 원래의 스타일 속성으로 돌아옵니다.
        {
            $(th).css(relative);
            $(td).css(relative);
            $(table).css('margin-left', margin_left);
        }
    });
}

 

 

이렇게 하면 대략 다음과 같은 모양새가 나오게 됩니다 ;)

 

compo.gif

글쓴이 윤삼

profile
사물이 거울에 보이는 것보다 가까이 있음

이 콘텐츠가 마음에 드셨다면 커피 한잔 (후원)


닫기
작가에게 커피 한잔(후원)을 사주세요.
서버에 요청 중입니다. 잠시만 기다려 주십시오...