XETOWN

호수 공원

XE 사용에 대한 여러가지 정보들을 공유할 수 있습니다.
조회 수 332 추천 수 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
번호 분류 제목 글쓴이 날짜
화제의 글 XE 사용팁 코어 수정 없이, 시조 댓글의 리스트만 출력하고, 자손 댓글의 리스트는 로드하지 않았다가 클릭 이벤트로 ajax 호출하기 38 file 윤삼 2017.04.20
5200 질문/답변 메시지폼이 디폴트 스킨과 다른 이유 2 file 고양이 2017.04.17
5199 질문/답변 이런 스킨없나요? 3 NEX 2017.04.17
5198 질문/답변 캐시재생성 쉘에서 실행할 수 있나요? 2 고수군 2017.04.17
5197 질문/답변 라이믹스 권한관리에서 추천인보기와 수정내역보기? 2 영흥도우럭 2017.04.17
5196 질문/답변 오류 질문드립니다. 1 날아라 2017.04.16
5195 질문/답변 안녕하세요. 게시판 첨부파일 100%증발 문제 도와주세요 ㅠㅠ 17 cocopl 2017.04.16
5194 질문/답변 이 위젯 이름이 어떻게 되나요? 4 file 칼럼 2017.04.16
5193 질문/답변 NGINX에서 이미지 파일을 HTTPS://로 리다이렉트가 안되게 하고 싶습니다. 6 마꼬 2017.04.16
5192 질문/답변 라이믹스 업데이트할때 파일질라 써도 되나요? 4 이브이 2017.04.16
5191 질문/답변 메인페이지에서는 위젯스타일 <h1>테그 문제점 4 영흥도우럭 2017.04.16
5190 질문/답변 이런 꼼수...의미 없는 짓일까요? ㅎㅎㅎ 10 영흥도우럭 2017.04.16
5189 질문/답변 현재 상태를 유지하면서 뉴레이아웃 설정 방법 문의 드려요. 4 xe왕초보 2017.04.16
5188 질문/답변 라이믹스 업그레이드 후 발견한점 5 file 영흥도우럭 2017.04.16
5187 질문/답변 이런 질문은 좀 황당한건가요? ㅎㅎ 3 영흥도우럭 2017.04.16
5186 질문/답변 php 원하는 영상 추가방법 질문드립니다 ㅠ 도균짱 2017.04.15
5185 질문/답변 [해결]마리아디비 크래시난거 복구하는 방법 있나요? 4 이온디 2017.04.15
5184 질문/답변 누리고 쇼핑몰 관리자 모드 4 file 가이더 2017.04.15
5183 질문/답변 가상서버에서 일반 FTP 사용하는 방법좀 알려주세요!! 4 프렌다 2017.04.15
5182 질문/답변 누리고 쇼핑몰 테스트중입니다. 2 file 가이더 2017.04.15
5181 알려진 Core 문제 1.8.36 업데이트 후 Internal Server Error 11 기진곰 2017.04.15
Board Pagination Prev 1 ... 3 4 5 6 7 8 9 10 11 12 ... 267 Next
/ 267
위로
서버에 요청 중입니다. 잠시만 기다려 주십시오...