firstgarden/firstgarden-web-gnu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Activity

모바일 쇼핑몰 메인 swipe 기능 추가중

Browse Source
This commit is contained in:
chicpro
2013-10-14 08:54:56 +09:00
parent 39c6eddcbd
commit 95efcc2f2f
3 changed files with 121 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
css/mobile_shop.css
View File

@ -57,9 +57,11 @@ a.sanchor_on {background:#626870;color:#fff !important;text-decoration:none}
/* ########## 쇼핑몰 컨텐츠 ########## */ /* ########## 쇼핑몰 컨텐츠 ########## */
/* 인덱스 이미지 출력 */ /* 인덱스 이미지 출력 */
#sidx {padding:0} #sidx {padding:0}
.sidx {position:relative;width:100%;overflow:hidden;}
/* 인덱스 상품 */ /* 인덱스 상품 */
#slide_tab {display:none;margin:0;padding:0}
.slide_tab {display:block!important;position:relative;width:100%;height:50px;background-color:#eee;overflow:hidden}
#sidx_slide {position:relative;top:0;left:0;width:100%;overflow:hidden}
.sidx_slide {position:absolute;top:0;left:0;width:100%} .sidx_slide {position:absolute;top:0;left:0;width:100%}
/* 상품 목록 */ /* 상품 목록 */

21
js/jquery.slideview.js
View File

@ -2,19 +2,24 @@
$.fn.slideSwipe = function(option) $.fn.slideSwipe = function(option)
{ {
var cfg = { var cfg = {
element: "section", slide_wrap: "sidx_slide",
sidx_class: "sidx", slide: "section",
slide_tab: "slide_tab",
tab_class: "slide_tab",
slide_class: "sidx_slide", slide_class: "sidx_slide",
active_class: "slide_class", active_class: "slide_active",
duration: 300 duration: 300
}; };
if(typeof option == "object") if(typeof option == "object")
cfg = $.extend( cfg, option ); cfg = $.extend( cfg, option );
this.addClass(cfg.sidx_class);
var $this = this; var $this = this;
var $slides = this.find(cfg.element); var $wrap = this.find("#"+cfg.slide_wrap);
var $tab = this.find("#"+cfg.slide_tab);
var $slides = this.find(cfg.slide);
$tab.addClass(cfg.tab_class);
$slides.addClass(cfg.slide_class); $slides.addClass(cfg.slide_class);
var height; var height;
@ -33,7 +38,7 @@
$slides.not("."+cfg.active_class).css("left", width+"px"); $slides.not("."+cfg.active_class).css("left", width+"px");
height = $slides.eq(idx).height(); height = $slides.eq(idx).height();
$this.height(height); $wrap.height(height);
} }
function swipe_left() function swipe_left()
@ -48,7 +53,7 @@
width = $(window).width(); width = $(window).width();
height = $slides.eq(next).height(); height = $slides.eq(next).height();
$this.height(height); $wrap.height(height);
$slides.eq(idx).animate( $slides.eq(idx).animate(
{ left: "-="+width }, cfg.duration, { left: "-="+width }, cfg.duration,
@ -77,7 +82,7 @@
width = $(window).width(); width = $(window).width();
height = $slides.eq(next).height(); height = $slides.eq(next).height();
$this.height(height); $wrap.height(height);
$slides.eq(idx).animate( $slides.eq(idx).animate(
{ left: "+="+width }, cfg.duration, { left: "+="+width }, cfg.duration,

203
mobile/shop/index.php
View File

@ -12,105 +12,110 @@ include_once(G5_MSHOP_PATH.'/shop.head.php');
<div id="sidx"> <div id="sidx">
<section class="sct_wrap"> <ul id="slide_tab">
<header> </ul>
<h2>최신상품</h2>
<p class="sct_wrap_hdesc"><?php echo $config['cf_title']; ?> 최신상품 모음</p>
</header>
<?php
$list = new item_list();
$list->set_mobile(true);
$list->set_type(1);
$list->set_view('it_id', false);
$list->set_view('it_name', true);
$list->set_view('it_cust_price', false);
$list->set_view('it_price', true);
$list->set_view('it_icon', true);
$list->set_view('sns', true);
echo $list->run();
?>
<div><a href="<?php echo G5_SHOP_URL; ?>/listtype.php?type=3">더 보기</a></div>
</section>
<section class="sct_wrap"> <div id="sidx_slide">
<header> <section class="sct_wrap">
<h2>히트상품</h2> <header>
<p class="sct_wrap_hdesc"><?php echo $config['cf_title']; ?> 히트상품 모음</p> <h2>최신상품</h2>
</header> <p class="sct_wrap_hdesc"><?php echo $config['cf_title']; ?> 최신상품 모음</p>
<?php </header>
$list = new item_list(); <?php
$list->set_mobile(true); $list = new item_list();
$list->set_type(2); $list->set_mobile(true);
$list->set_view('it_id', false); $list->set_type(1);
$list->set_view('it_name', true); $list->set_view('it_id', false);
$list->set_view('it_cust_price', false); $list->set_view('it_name', true);
$list->set_view('it_price', true); $list->set_view('it_cust_price', false);
$list->set_view('it_icon', true); $list->set_view('it_price', true);
$list->set_view('sns', true); $list->set_view('it_icon', true);
echo $list->run(); $list->set_view('sns', true);
?> echo $list->run();
<div><a href="<?php echo G5_SHOP_URL; ?>/listtype.php?type=1">더 보기</a></div> ?>
</section> <div><a href="<?php echo G5_SHOP_URL; ?>/listtype.php?type=3">더 보기</a></div>
</section>
<section class="sct_wrap"> <section class="sct_wrap">
<header> <header>
<h2>추천상품</h2> <h2>히트상품</h2>
<p class="sct_wrap_hdesc"><?php echo $config['cf_title']; ?> 추천상품 모음</p> <p class="sct_wrap_hdesc"><?php echo $config['cf_title']; ?> 히트상품 모음</p>
</header> </header>
<?php <?php
$list = new item_list(); $list = new item_list();
$list->set_mobile(true); $list->set_mobile(true);
$list->set_type(3); $list->set_type(2);
$list->set_view('it_id', false); $list->set_view('it_id', false);
$list->set_view('it_name', true); $list->set_view('it_name', true);
$list->set_view('it_cust_price', false); $list->set_view('it_cust_price', false);
$list->set_view('it_price', true); $list->set_view('it_price', true);
$list->set_view('it_icon', true); $list->set_view('it_icon', true);
$list->set_view('sns', true); $list->set_view('sns', true);
echo $list->run(); echo $list->run();
?> ?>
<div><a href="<?php echo G5_SHOP_URL; ?>/listtype.php?type=2">더 보기</a></div> <div><a href="<?php echo G5_SHOP_URL; ?>/listtype.php?type=1">더 보기</a></div>
</section> </section>
<section class="sct_wrap"> <section class="sct_wrap">
<header> <header>
<h2>인기상품</h2> <h2>추천상품</h2>
<p class="sct_wrap_hdesc"><?php echo $config['cf_title']; ?> 인기상품 모음</p> <p class="sct_wrap_hdesc"><?php echo $config['cf_title']; ?> 추천상품 모음</p>
</header> </header>
<?php <?php
$list = new item_list(); $list = new item_list();
$list->set_mobile(true); $list->set_mobile(true);
$list->set_type(4); $list->set_type(3);
$list->set_view('it_id', false); $list->set_view('it_id', false);
$list->set_view('it_name', true); $list->set_view('it_name', true);
$list->set_view('it_cust_price', false); $list->set_view('it_cust_price', false);
$list->set_view('it_price', true); $list->set_view('it_price', true);
$list->set_view('it_icon', true); $list->set_view('it_icon', true);
$list->set_view('sns', true); $list->set_view('sns', true);
echo $list->run(); echo $list->run();
?> ?>
<div><a href="<?php echo G5_SHOP_URL; ?>/listtype.php?type=4">더 보기</a></div> <div><a href="<?php echo G5_SHOP_URL; ?>/listtype.php?type=2">더 보기</a></div>
</section> </section>
<section class="sct_wrap"> <section class="sct_wrap">
<header> <header>
<h2>할인상품</h2> <h2>인기상품</h2>
<p class="sct_wrap_hdesc"><?php echo $config['cf_title']; ?> 할인상품 모음</p> <p class="sct_wrap_hdesc"><?php echo $config['cf_title']; ?> 인기상품 모음</p>
</header> </header>
<?php <?php
$list = new item_list(); $list = new item_list();
$list->set_mobile(true); $list->set_mobile(true);
$list->set_type(5); $list->set_type(4);
$list->set_view('it_id', false); $list->set_view('it_id', false);
$list->set_view('it_name', true); $list->set_view('it_name', true);
$list->set_view('it_cust_price', false); $list->set_view('it_cust_price', false);
$list->set_view('it_price', true); $list->set_view('it_price', true);
$list->set_view('it_icon', true); $list->set_view('it_icon', true);
$list->set_view('sns', true); $list->set_view('sns', true);
echo $list->run(); echo $list->run();
?> ?>
<div><a href="<?php echo G5_SHOP_URL; ?>/listtype.php?type=5">더 보기</a></div> <div><a href="<?php echo G5_SHOP_URL; ?>/listtype.php?type=4">더 보기</a></div>
</section> </section>
<section class="sct_wrap">
<header>
<h2>할인상품</h2>
<p class="sct_wrap_hdesc"><?php echo $config['cf_title']; ?> 할인상품 모음</p>
</header>
<?php
$list = new item_list();
$list->set_mobile(true);
$list->set_type(5);
$list->set_view('it_id', false);
$list->set_view('it_name', true);
$list->set_view('it_cust_price', false);
$list->set_view('it_price', true);
$list->set_view('it_icon', true);
$list->set_view('sns', true);
echo $list->run();
?>
<div><a href="<?php echo G5_SHOP_URL; ?>/listtype.php?type=5">더 보기</a></div>
</section>
</div>
</div> </div>
@ -118,10 +123,12 @@ include_once(G5_MSHOP_PATH.'/shop.head.php');
$(function() { $(function() {
$("#sidx").slideSwipe( $("#sidx").slideSwipe(
{ {
element: "section.sct_wrap", el_class: "sidx",
sidx_class: "sidx", selector: "section.sct_wrap",
slide_tab: "slide_tab",
tab_class: "slide_tab",
slide_class: "sidx_slide", slide_class: "sidx_slide",
active_class: "slide_class", active_class: "slide_active",
duration: 300 duration: 300
} }
); );