모바일 | 그누보드5 모바일에서 영카트5 모바일의 swipe 기능 사용하기
페이지 정보
작성자 YJNet 작성일14-09-17 11:54 조회15,962회 댓글0건본문
영카트5 모바일에 있는 swipe(화면을 좌우로 밀어서 전환)기능을 그누보드5에서 사용하는 방법입니다.
1. 영카트5 js폴더에 있는 swipe.js, shop.mobile.main.js 파일을 그누보드5 js 폴더에 업로드 합니다.
2. mobile/index.php 파일에 아래 소스 적용
<script src="<?php echo G5_JS_URL; ?>/swipe.js"></script>
<script src="<?php echo G5_JS_URL; ?>/shop.mobile.main.js"></script>
<script src="<?php echo G5_JS_URL; ?>/shop.mobile.main.js"></script>
<div id="sidx" class="swipe">
<div id="sidx_slide" class="swipe-wrap">
<div class="sct_wrap">
<header>
<h2>페이지1</h2>
<p class="sct_wrap_hdesc">페이지1</p>
</header>
페이지1 내용
<header>
<h2>페이지1</h2>
<p class="sct_wrap_hdesc">페이지1</p>
</header>
페이지1 내용
</div>
<div class="sct_wrap">
<header>
<h2>페이지2</h2>
<p class="sct_wrap_hdesc">페이지2</p>
</header>
페이지2 내용
<header>
<h2>페이지2</h2>
<p class="sct_wrap_hdesc">페이지2</p>
</header>
페이지2 내용
</div>
<div class="sct_wrap">
<header>
<h2>페이지3</h2>
<p class="sct_wrap_hdesc">페이지3</p>
</header>
페이지3 내용
<header>
<h2>페이지3</h2>
<p class="sct_wrap_hdesc">페이지3</p>
</header>
페이지3 내용
</div>
</div>
</div>
<script>
$(function() {
$("#sidx").swipeSlide({
slides: ".swipe-wrap > div",
header: "header h2",
tabWrap: "slide_tab",
tabActive: "tab_active",
tabOffset: 10,
startSlide: 0,
auto: 0
});
});
</script>
$(function() {
$("#sidx").swipeSlide({
slides: ".swipe-wrap > div",
header: "header h2",
tabWrap: "slide_tab",
tabActive: "tab_active",
tabOffset: 10,
startSlide: 0,
auto: 0
});
});
</script>
3. css/mobile.css 파일에 css 추가
/* 인덱스 이미지 출력 */
#sidx {padding:0}
#sidx {padding:0}
/* 인덱스 상품 */
#slide_tab {position:relative;margin:-10px 0 30px;padding:0;width:100%;height:40px;background:#383838;list-style:none;overflow:hidden}
#slide_tab li {position:absolute;top:0;text-align:center}
#slide_tab button {margin:0;padding:0 15px;height:40px;border:0;background:#585858;color:#fff}
#slide_tab .tab_active button {background:transparent;font-weight:bold}
#sidx_slide {position:relative;top:0;left:0;width:100%;overflow:hidden}
.sidx_slide {position:absolute;top:0;left:0;width:100%}
#slide_tab {position:relative;margin:-10px 0 30px;padding:0;width:100%;height:40px;background:#383838;list-style:none;overflow:hidden}
#slide_tab li {position:absolute;top:0;text-align:center}
#slide_tab button {margin:0;padding:0 15px;height:40px;border:0;background:#585858;color:#fff}
#slide_tab .tab_active button {background:transparent;font-weight:bold}
#sidx_slide {position:relative;top:0;left:0;width:100%;overflow:hidden}
.sidx_slide {position:absolute;top:0;left:0;width:100%}
.swipe {
overflow: hidden;
visibility: hidden;
position: relative;
}
.swipe-wrap {
overflow: hidden;
position: relative;
}
.swipe-wrap > div {
float:left;
width:100%;
position: relative;
}
overflow: hidden;
visibility: hidden;
position: relative;
}
.swipe-wrap {
overflow: hidden;
position: relative;
}
.swipe-wrap > div {
float:left;
width:100%;
position: relative;
}
댓글목록
등록된 댓글이 없습니다.
