XETOWN

호수 공원

XE 사용에 대한 여러가지 정보들을 공유할 수 있습니다.
조회 수 252 추천 수 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
번호 분류 제목 글쓴이 날짜
공지 질문/답변 답변을 확실히 받기위한 질문자 지침서 21 람보 2015.12.31
화제의 글 자료공유 시간표 위젯 1.1.2배포합니다. 15 file 착한악마 2017.01.10
화제의 글 자료공유 TinyMCE Plugin - imgur uploder 1 file prologos 2017.01.20
4180 질문/답변 가입후 일정기간 글작성제한 할수 있을까요 ...? 2 구미호 2017.01.14
4179 XE 사용팁 php7.0에서 포인트 팡팡 플러스 에드온 에러 수정 나만의너 2017.01.14
4178 질문/답변 php7.0에서 getpreventdefauilt의 사용을 권장하지 않습니다. 라는 에러는 어떻게 수정하나요 ? 3 나만의너 2017.01.14
4177 질문/답변 팝업창 띄우는 건대 1.8.29대에선 뭔가 잘안되네요 ! file 이성민 2017.01.13
4176 질문/답변 애드센스를달면 속도가 저하되나요? 2 낙타 2017.01.13
4175 질문/답변 게시판 스킨에서 스팸필터 등록하고 나서 새로고침하는 과정이 꼭 필요한 건가요? 기븐 2017.01.13
4174 질문/답변 XE 모바일도 호환되는 이미지 수정 컴포넌트가 있나요? 4 가시밭 2017.01.13
4173 질문/답변 혹시 채팅방을 열고닫기하는게 어떻게 하는지 자세히 아시는분있나요? 3 라그릿 2017.01.13
4172 질문/답변 DB 에서 태그 일괄 변경 2 가시밭 2017.01.13
4171 질문/답변 로그인한 회원이 해당 문서에 추천을 했는지 비추천을 했는지 알려주려고 합니다. 1 웹지기 2017.01.13
4170 질문/답변 활동을 잘안해서...상황파악좀 할려고.ㅎㅎ 4 똑띠 2017.01.13
4169 질문/답변 회원정보 보기 짧은 주소로 변경 및... 3 라뜨에 2017.01.13
4168 질문/답변 라이믹스는 TriggerModuleHandler 사용방법이 다른가요? 6 루딩 2017.01.13
4167 질문/답변 글쓴이(닉네임) 색을 바꾸고 싶어요. 3 현님v 2017.01.13
4166 질문/답변 모듈 제작시 타 모듈명으로 액션을 만들 수 있나요? + standalone 13 투정 2017.01.12
4165 질문/답변 사이트 로딩관련하여.,. 3 떡보의하루 2017.01.12
4164 질문/답변 댓글 읽음, 읽지 않음 표시 애드온 모바일 화면 문제 16 file 라그릿 2017.01.12
4163 질문/답변 라이믹스 관리자 페이지에 있는 알림 설정은 무엇인가요? 3 우리아기 2017.01.12
4162 질문/답변 크로미움 56버전부터 사이트가 약간 이상하게 보이는데 이유를 모르겠네요 4 기븐 2017.01.12
4161 질문/답변 JS 코드 충돌 부분관련 7 file 떡보의하루 2017.01.12
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 213 Next
/ 213
위로
서버에 요청 중입니다. 잠시만 기다려 주십시오...