XETOWN

호수 공원

XE 사용에 대한 여러가지 정보들을 공유할 수 있습니다.
조회 수 355 추천 수 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>

     

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

List of Articles
번호 분류 제목 글쓴이 날짜
공지 질문/답변 답변을 확실히 받기위한 질문자 지침서 4 람보 2017.05.04
화제의 글 자료공유 플로팅 팝업 비디오 애드온 VER 0.6.0 21 file natura 2017.05.22
화제의 글 호스팅 추천/홍보 문커뮤니티 좋네요~~ 추천합니다!! 19 file 쭈박이 2017.05.16
5449 질문/답변 어디서 구매 하나요? file NEX 2017.05.08
5448 자료공유 플로팅 팝업 비디오 애드온 ver 0.3.3 98 file natura 2017.05.08
5447 질문/답변 출석부 모듈의 포인트 미지급문제 file 장사다컴 2017.05.08
5446 질문/답변 script load 에 문법추가를 하고 싶습니다. 1 고수군 2017.05.08
5445 질문/답변 커뮤니케이션애드온 오프 상태에서 알림센터에 쪽지오는 기능을 이용하는 경우.. 문제 큰성565 2017.05.08
5444 XE 사용팁 게시판 본문의 분류 제목을 출력할 때 상위 카테고리의 제목도 같이 출력하기 4 file 윤삼 2017.05.07
5443 질문/답변 robots.txt XE 특정게시판 검색로봇 차단 방법이 뭔지 알수 있을까요 ^^;; ...? 2 구미호 2017.05.07
5442 질문/답변 라이믹스 seo 설정 오류..!? 4 file 마더캣 2017.05.07
5441 질문/답변 카테고리 분류 주소 문의 2 file 마더캣 2017.05.07
5440 질문/답변 라이믹스 1.8.37 관리자를 제외한 나머지는 mp3 업로드가 되지 않습니다. 8 만성소년 2017.05.07
5439 질문/답변 라이믹스 - 스케치북 게시판 '분류' 정상적으로 사용 가능하십니까? 5 마음의빈자리 2017.05.06
5438 질문/답변 페이스북 공유 403 문제 - 치킨으로 사례합니다ㅠ 15 모모모몽 2017.05.06
5437 질문/답변 툴팁 질문입니다. 7 가이더 2017.05.06
5436 질문/답변 회원들에게 문자보내는방법?? file 마더캣 2017.05.06
5435 질문/답변 사이트 제목불러오기 오류 2 sampo 2017.05.06
5434 질문/답변 익명 게시판 글에서요, 댓글란에서 글쓴이를 아예 새로운 회원으로 인식하게 할 수 있을까요? 2 이브이 2017.05.06
5433 질문/답변 최신 라이믹스 develop 브랜치에서의 자동 로그인 문제 3 고라자 2017.05.05
5432 질문/답변 전체공개/회원공개 애드온 사용하시는분 계십니까. 1 file 매미맴맴 2017.05.05
5431 질문/답변 트위터 위젯이 안나타나요. 3 사바 2017.05.05
5430 질문/답변 일반회원도 게시판 글제목에 색깔을 넣을 수 있게 하려면요 2 file 이브이 2017.05.05
Board Pagination Prev 1 ... 4 5 6 7 8 9 10 11 12 13 ... 281 Next
/ 281
위로
서버에 요청 중입니다. 잠시만 기다려 주십시오...