그누보드5 모바일에서 영카트5 모바일의 swipe 기능 사용하기 > 그누보드5 팁

본문 바로가기
사이트 내 전체검색


회원로그인

최신 게시글
  • 게시물이 없습니다.

그누보드5 팁

 > 그누보드5 > 그누보드5 팁

그누보드5 팁

모바일 | 그누보드5 모바일에서 영카트5 모바일의 swipe 기능 사용하기

페이지 정보

작성자 YJNet 작성일14-09-17 11:54 조회15,833회 댓글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>
 
<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 내용
      </div>
 
      <div class="sct_wrap">
          <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 내용
      </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>
 
3. css/mobile.css 파일에 css 추가
/* 인덱스 이미지 출력 */
#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%}
.swipe {
  overflow: hidden;
  visibility: hidden;
  position: relative;
}
.swipe-wrap {
  overflow: hidden;
  position: relative;
}
.swipe-wrap > div {
  float:left;
  width:100%;
  position: relative;
}
 

댓글목록

등록된 댓글이 없습니다.

그누보드5 팁 목록

Total 54건 2 페이지
게시물 검색

접속자집계

오늘
93
어제
485
최대
4,468
전체
1,797,117
그누보드5
회사소개 개인정보취급방침 서비스이용약관    Copyright © www.g-it.kr. All rights reserved.