XETOWN

호수 공원

XE 사용에 대한 여러가지 정보들을 공유할 수 있습니다.
XE 사용팁
2016.09.02 01:08

깔끔한 페이지 직접 이동 소스

조회 수 208 추천 수 0 댓글 5
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부

이번에 페이지네이션 작업을 하다가 얻은 '아주 아주 마이너한' 팁이 있어서 공유할 겸해서 글 하나 또 쪄봅니다.

(얼른 정회원이 되어야징ㅋ)

 

스케치북 게시판 스킨을 잘 뜯어보신 분은 아시겠지만,

list.html 파일에 있는 페이지네이션을 보다보면 (현재 구간이 첫 페이지나 끝 페이지와 거리가 먼 경우) 중간에 '...' 으로 뜨는 부분을 발견할 수 있습니다.

이용자들의 직관적 이해를 돕는 데 아주 좋은 표시이죠.

그런데 이 부분을 클릭해보면 툴팁 같은 팝업이 뜨는 걸 알 수 있습니다.

바로 이렇게요.

 

02.png

 

입력 칸에 원하는 숫자를 넣으면 해당 페이지로 직접 이동하게 되는 거죠.

이 기능이 있는지 아셨나요?

 

ㅎㅎ 사실 이게 팁은 아니구요.

'페이지 직접 이동'을 해보신 분들은 여기서 GO 버튼을 누르고 나면 주소창이 상당히 지저분해지는 걸 경험해보셨을 겁니다.

일례로 XE타운 대문에서 저기 입력칸에 118이란 숫자를 넣어보면, 주소창은 이렇게 됩니다.

https://www.xetown.com/?error_return_url=%2F&act=&vid=&mid=home&category=&search_keyword=&search_target=&listStyle=list&page=118

 

물론 기능상 지장이 있는 건 아닙니다.

하지만 우리처럼 깔끔한 성격에 주소창이 저렇게 되면 기분이 구리지 않겠습니까?

심지어 저 상태에서 페이지 직접 이동을 한번 더 하면 이렇게 됩니다.

11페이지로 가보죠.

https://www.xetown.com/?error_return_url=%2F%3Ferror_return_url%3D%252F%26act%3D%26vid%3D%26mid%3Dhome%26category%3D%26search_keyword%3D%26search_target%3D%26listStyle%3Dlist%26page%3D118&act=&vid=&mid=home&category=&search_keyword=&search_target=&listStyle=list&page=11

 

어떻게 된 건지 아시겠죠?

error_return_url뿐만 아니라 act, vid, mid, category, search_keyword, search_target, list_style, page 등이 누적적으로 들러 붙는 거죠.

이런 식으로 페이지를 유목할 이용자가 얼마나 되겠습니까만, 자꾸 이렇게 되면 기분이 언짢아질 수밖에 없습니다.

 

이제부터 링크 주소를 정리해보겠습니다.

(각 태그들에 id나 class 속성은 없다고 가정할게요)

 

저는 페이지네이션 부분을 이렇게 처리했습니다.

<form action="./index.php" method="get" no-error-return-url="true"> // 폼액션을 ./index.php으로 하면 주소창에는 '도메인주소/index.php?...'식으로 주소가 생성됩니다. 그리고 no-error-return-url 속성을 true로 설정하면 위에서 봤던 error-return-url을 없앨 수 있다고 하네요.
    <input type="hidden" name="vid" value="{$vid}" cond="$vid" />
    <input type="hidden" name="mid" value="{$mid}" cond="$mid" />
    <input type="hidden" name="act" value="{$act}" cond="$act" />
    <input type="hidden" name="category" value="{$category}" cond="$category" />
    <input type="hidden" name="search_target" value="{$search_target}" cond="$search_target" />
    <input type="hidden" name="search_keyword" value="{htmlspecialchars($search_keyword)}" cond="$search_keyword" /> // 여기까지가 주소에 들러붙는 파라미터들을 정리해주는 부분입니다. 실제로 변수값이 있을 때만(cond=...) 주소창에 기입할 수 있도록 한 거죠.
    <input type="number" name="page" value="{$page_navigation->cur_page}" min="1" max="{$page_navigation->last_page}" /> / {$page_navigation->last_page} <button type="sumbit">GO</button> // ※보너스팁: input의 type을 number로 하면 숫자만 받을 수 있음. value 속성을 이용해 입력창에 현재 페이지가 미리 입력되어 있도록 함. min과 max 속성을 이용해 입력창에 들어갈 숫자의 최소값과 최대값을 제한함.
</form>

 

이런 식으로 하면 페이지 직접 이동을 아무리 반복해도 링크 주소는 깔끔하게 처리됩니다.

(저는 listStyle 변수를 의도적으로 빼버렸는데, 필요하신 분들은 저렇게 cond 속성을 써서 처리하시면 되겠죠?)

 

01.png

요건 제가 직접 디자인해본 소스인데요.

암튼 여기서 5를 입력하고 페이지 이동을 해보면,

http://도메인주소/index.php?mid=blog&page=5

이렇게 깔끔하게 나오게 된답니다.

페이지 이동을 거듭하더라도 주소창엔 페이지 숫자만 바뀔 뿐이죠.

 

스케치북 스킨을 쓰고 있거나 다른 스킨에서 '페이지 직접 이동' 기능을 사용하고 있는데, 남들보다 깔끔한 성격을 가지신 분이라면 한번쯤 적용해보실 만한 팁이 아닐까 싶습니다.

  • profile
    기진곰 2016.09.02 01:48:12
    XE는 모든 폼에 error_return_url이 막 붙어서 귀찮죠... 심지어 저걸 여러 번 반복하면 주소가 너무 길어져서 "Request URI Too Long" 에러가 나오기도 합니다.

    스케치북의 저 툴팁은 어차피 자바스크립트로 구현하는 거니까, 폼 태그를 사용하지 않고 주소의 다른 조건도 모두 그대로 유지하면서 페이지만 바꾸는 방법을 하나 더 알려 드릴게요.

    location.href = location.href.setQuery("page", 123);

    GO 버튼의 클릭 이벤트에서 페이지 값을 읽어와서 이렇게 자바스크립트 한줄 날려주면 훨씬 더 깔끔하게 구현할 수 있을 것 같네요.
  • profile
    윤삼 2016.09.02 02:39:29

    정말 되네요?! 신기신기합니다.


    위 소스에서 8번 줄만 남기고 다 삭제

    + 심지어 버튼의 type도 삭제 가능

    + 그리고 스크립트에 아래 내용 추가

    $('button').on('click', function() {
        location.href = location.href.setQuery('page', $('input[name=page]').val());
    });

     

    + 더불어, 입력 후 Enter키 이벤트도 적용

     

    $('input[name=page]').on('keypress', function(enter) {
        if(enter.keyCode == 13) {
            location.href = location.href.setQuery('page', $(this).val());
        }
    });

     

    이거야말로 정말 팁이네요 @.@

  • profile
    기진곰 2016.09.02 11:29:22
    - 라이믹스에서는 $를 쓸 수 있지만 XE에서는 jQuery라고 해야 하죠.
    - 다른 곳에 input[name=page]가 또 있을지도 모르니까 검색 범위를 제한하는 게 안전할 것 같습니다. 툴팁 레이어에 적용되는 클래스를 찾아보세요.
  • profile
    윤삼 2016.09.02 12:58:29

    요즘 라이믹스에 다른 게시판 스킨만 쓰다보니 요래 됐습니다ㅋㅋ

    (아무튼 이 팁은 라이믹스에 통합되는 스케치북 스킨에도 반영되면 좋겠네요)

     

    기존 XE를 쓰고 스케치북 스킨을 사용하는 경우 이렇게 하면 되겠습니다^^

    form 태그 대신 div로 감싸주고 jQuery로 스크립트를 넣습니다.

    (스크립트 위치는 알맞게 조정하시면 되겠구요)

     

    <!--// 페이지네이션 -->
    <div class="bd_pg clear">
        {@ $prev_page = max($page-1, 1)}
        {@ $next_page = min($page+1, $page_navigation->last_page)}
        <a cond="$page!=$prev_page" href="{getUrl('page',$prev_page,'document_srl','','division',$division,'last_division',$last_division)}" class="direction"><i class="fa fa-angle-left"></i> Prev</a>
        <strong cond="$page==$prev_page" class="direction"><i class="fa fa-angle-left"></i> Prev</strong>
        <a class="frst_last bubble<!--@if($page==1)--> this<!--@end-->" href="{getUrl('page','','document_srl','','division',$division,'last_division',$last_division)}" title="{$lang->first_page}">1</a>
        <span cond="$page>($mi->page_count)/2+2" class="bubble"><a href="#" class="tg_btn2" data-href=".bd_go_page" title="{$lang->go_page}">...</a></span>
        <block loop="$page_no=$page_navigation->getNextPage()" cond="$page_no!=1 && $page_no!=$page_navigation->last_page">
            <strong class="this" cond="$page==$page_no">{$page_no}</strong> 
            <a cond="$page!=$page_no" href="{getUrl('page',$page_no,'document_srl','','division',$division,'last_division',$last_division)}">{$page_no}</a>
        </block>
        <span cond="($page+($mi->page_count+1)/2<$page_navigation->last_page) && ($mi->page_count+1<$page_navigation->last_page)" class="bubble"><a href="#" class="tg_btn2" data-href=".bd_go_page" title="{$lang->cmd_go_to_page}">...</a></span>
        <a cond="$page_navigation->last_page!=1" class="frst_last bubble<!--@if($page==$page_navigation->last_page)--> this<!--@end-->" href="{getUrl('page',$page_navigation->last_page,'document_srl','','division',$division,'last_division',$last_division)}" title="{$lang->last_page}">{$page_navigation->last_page}</a>
        <a cond="$page!=$next_page" href="{getUrl('page',$next_page,'document_srl','','division',$division,'last_division',$last_division)}" class="direction">Next <i class="fa fa-angle-right"></i></a>
        <strong cond="$page==$next_page" class="direction">Next <i class="fa fa-angle-right"></i></strong>
        <div class="bd_go_page tg_cnt2 wrp">
            <button type="button" class="tg_blur2"></button>
            <input type="text" name="page" class="itx" />/ {$page_navigation->last_page} <button type="submit" class="bd_btn">GO</button>
            <span class="bubble_edge"></span>
            <!--// ie8; --><i class="ie8_only bl"></i><i class="ie8_only br"></i>
            <button type="button" class="tg_blur2"></button>
        </div>
        <script>
            jQuery('.bd_go_page button.bd_btn').on('click', function() {
                location.href = location.href.setQuery('page', jQuery('.bd_go_page input.itx').val());
            });
            jQuery('.bd_go_page input.itx').on('keypress', function(enter) {
                if(enter.keyCode == 13) {
                    location.href = location.href.setQuery('page', jQuery(this).val());
                }
            });
        </script>
    </div>

     

  • ?
    December 2016.09.09 18:03:36
    윤삼 "님, 기진곰 "님 감사합니다. 유용하고 좋은팁 감사합니다.
    잘 작동 됩니다.

List of Articles
번호 분류 제목 글쓴이 날짜
공지 질문/답변 답변을 확실히 받기위한 질문자 지침서 20 람보 2015.12.31
3739 질문/답변 비공개 사이트 만드는법이나 소스가 있을까요?ㅠㅠ 3 목요일같은오후 2016.11.30
3738 질문/답변 xe 템플릿 import 와 load 차이점을 알고 싶습니다. 3 구름이 2016.11.30
3737 질문/답변 memcached 서버 이전 관련 질문 7 madnomad 2016.11.30
3736 질문/답변 git 강좌나 책 추천 부탁 드립니다. 구름이 2016.11.30
3735 질문/답변 모바일 레이아웃을 찾습니다. 4 구름이 2016.11.30
3734 질문/답변 결제하면 동시에 그룹 등업이 되는 기능 가능할까요? 2 file 꿈이몬가 2016.11.30
3733 질문/답변 www 붙인 주소로 접속시 로그인이 풀린채로 보이는 문제 6 마끼아토 2016.11.30
3732 질문/답변 cname설정 방법아시는분 계신가요 2 Jack 2016.11.29
3731 질문/답변 DB관련 질문드립니다. 4 DIZAK 2016.11.29
3730 질문/답변 신고 가능한가요? 26 DIZAK 2016.11.29
3729 질문/답변 사업자 내야하나요? 15 DIZAK 2016.11.29
3728 질문/답변 추천있는 댓글이 있을 경우 글 목록에서 표시해 주는 팁 지금은 안되나요? 25 웹지기 2016.11.29
3727 질문/답변 특정 게시판에서만 글자 크기를 다르게 설정할 순 없나요? 3 Chronos 2016.11.29
3726 질문/답변 글을 수정하면 자동으로 줄 바꿈이 됩니다. Chronos 2016.11.29
3725 질문/답변 게시판에서 댓글을 삭제할 경우... 8 스트릿 2016.11.29
3724 아이디어 제안/공유 자신의 글 지우기 2 Jack 2016.11.28
3723 아이디어 제안/공유 네이버/다음 카페를 벤치마킹한 "전체글 보기"(전체게시판) 기능 제안 1 기븐 2016.11.28
3722 질문/답변 현재 xe관련 자료중에 이런게 있나요? 익명게시판 관련 기능인데 4 기븐 2016.11.28
3721 질문/답변 랜덤 배너 출력과 구글 애드센스 필터 애드온 충돌? 라그릿 2016.11.28
3720 질문/답변 혹시 스크린샷 게시판에 사용할 레이아웃이 있을까요? 2 torrent 2016.11.28
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 188 Next
/ 188
위로
서버에 요청 중입니다. 잠시만 기다려 주십시오...