깔끔한 페이지 직접 이동 소스
이번에 페이지네이션 작업을 하다가 얻은 '아주 아주 마이너한' 팁이 있어서 공유할 겸해서 글 하나 또 쪄봅니다.
(얼른 정회원이 되어야징ㅋ)
스케치북 게시판 스킨을 잘 뜯어보신 분은 아시겠지만,
list.html 파일에 있는 페이지네이션을 보다보면 (현재 구간이 첫 페이지나 끝 페이지와 거리가 먼 경우) 중간에 '...' 으로 뜨는 부분을 발견할 수 있습니다.
이용자들의 직관적 이해를 돕는 데 아주 좋은 표시이죠.
그런데 이 부분을 클릭해보면 툴팁 같은 팝업이 뜨는 걸 알 수 있습니다.
바로 이렇게요.
입력 칸에 원하는 숫자를 넣으면 해당 페이지로 직접 이동하게 되는 거죠.
이 기능이 있는지 아셨나요?
ㅎㅎ 사실 이게 팁은 아니구요.
'페이지 직접 이동'을 해보신 분들은 여기서 GO 버튼을 누르고 나면 주소창이 상당히 지저분해지는 걸 경험해보셨을 겁니다.
일례로 XE타운 대문에서 저기 입력칸에 118이란 숫자를 넣어보면, 주소창은 이렇게 됩니다.
물론 기능상 지장이 있는 건 아닙니다.
하지만 우리처럼 깔끔한 성격에 주소창이 저렇게 되면 기분이 구리지 않겠습니까?
심지어 저 상태에서 페이지 직접 이동을 한번 더 하면 이렇게 됩니다.
11페이지로 가보죠.
어떻게 된 건지 아시겠죠?
error_return_url뿐만 아니라 act, vid, mid, category, search_keyword, search_target, list_style, page 등이 누적적으로 들러 붙는 거죠.
이런 식으로 페이지를 유목할 이용자가 얼마나 되겠습니까만, 자꾸 이렇게 되면 기분이 언짢아질 수밖에 없습니다.
이제부터 링크 주소를 정리해보겠습니다.
(각 태그들에 id나 class 속성은 없다고 가정할게요)
저는 페이지네이션 부분을 이렇게 처리했습니다.
<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 속성을 써서 처리하시면 되겠죠?)
요건 제가 직접 디자인해본 소스인데요.
암튼 여기서 5를 입력하고 페이지 이동을 해보면,
http://도메인주소/index.php?mid=blog&page=5
이렇게 깔끔하게 나오게 된답니다.
페이지 이동을 거듭하더라도 주소창엔 페이지 숫자만 바뀔 뿐이죠.
스케치북 스킨을 쓰고 있거나 다른 스킨에서 '페이지 직접 이동' 기능을 사용하고 있는데, 남들보다 깔끔한 성격을 가지신 분이라면 한번쯤 적용해보실 만한 팁이 아닐까 싶습니다.
![02.png [File Size:4.2KB/Download:4]](/files/download/link/686108/3ae0c72b9ec77110abacd58aaef658f2/02.png){kind=link}
![01.png [File Size:2.4KB/Download:3]](/files/download/link/686109/85896ca058c8ebc38a396d344c59a973/01.png){kind=link}
댓글 6
스케치북의 저 툴팁은 어차피 자바스크립트로 구현하는 거니까, 폼 태그를 사용하지 않고 주소의 다른 조건도 모두 그대로 유지하면서 페이지만 바꾸는 방법을 하나 더 알려 드릴게요.
location.href = location.href.setQuery("page", 123);
GO 버튼의 클릭 이벤트에서 페이지 값을 읽어와서 이렇게 자바스크립트 한줄 날려주면 훨씬 더 깔끔하게 구현할 수 있을 것 같네요.
정말 되네요?! 신기신기합니다.
위 소스에서 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());
}
});
이거야말로 정말 팁이네요 @.@
- 다른 곳에 input[name=page]가 또 있을지도 모르니까 검색 범위를 제한하는 게 안전할 것 같습니다. 툴팁 레이어에 적용되는 클래스를 찾아보세요.
요즘 라이믹스에 다른 게시판 스킨만 쓰다보니 요래 됐습니다ㅋㅋ
(아무튼 이 팁은 라이믹스에 통합되는 스케치북 스킨에도 반영되면 좋겠네요)
기존 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>
잘 작동 됩니다.
감사합니다. 잘 이용해 보겠습니다.