모바일 쇼핑몰 메인 swipe 및 클릭을 통한 상품탭 이동 추가

css/mobile_shop.css

@@ -61,6 +61,7 @@ a.sanchor_on {background:#626870;color:#fff !important;text-decoration:none}
 /* 인덱스 상품 */
 #slide_tab {margin:0;padding:0;list-style:none;position:relative;width:100%;height:50px;background-color:#eee;overflow:hidden}
 #slide_tab li {position:absolute;top:0;left:0;width:80px;text-align:center}
+#slide_tab .tab_active {color:red}
 #sidx_slide {position:relative;top:0;left:0;width:100%;overflow:hidden}
 .sidx_slide {position:absolute;top:0;left:0;width:100%}
 

js/jquery.slideview.js

@@ -8,7 +8,7 @@
                 slide_class: "sidx_slide",
                 active_class: "slide_active",
                 tab_active: "tab_active",
-                duration: 300
+                duration: 500
             };
 
         if(typeof option == "object")
@@ -18,200 +18,223 @@
         var $wrap = this.find("#"+cfg.slide_wrap);
         var $tab = null;
         var $tabs;
+        var $btns;
         var $slides = this.find(cfg.slide);
+        var count = $slides.size();
+
+        if(count < 1)
+            return;
 
         $slides.addClass(cfg.slide_class);
 
         var height;
-        var width = $(window).width();
+        var width;
-        var count = $slides.size();
         var idx = next = 0;
         var tabw_width = 0;
-        var tabs_count = 0;
         var tab_width = 0;
         var li_left = 0;
         var pos_left = 0;
+        var touchstartX, touchstartY, touchendX, touchendY, touchoffsetX, touchoffsetY;
 
         function tab_make()
         {
-            if(count < 1)
+            var subj;
-                return;
+            var tabs = "";
+
+            $slides.each(function() {
+                subj = $(this).find("header h2").text();
+                if(subj.length < 1)
+                    subj = "&nbsp;";
+
+                tabs += "<li><button type=\"button\">"+subj+"</button></li>\n";
+            });
+
+            if(tabs != "") {
+                tabs = "<ul id=\""+cfg.slide_tab+"\">\n"+tabs+"</ul>";
+                $wrap.before(tabs);
+
+                $tab = $this.find("#"+cfg.slide_tab);
+                $tabs = $tab.find("li");
+                $btns = $tab.find("button");
+
+                $btns.on("click", function() {
+                    tab_click($(this));
+                });
+            }
+        }
+
+        function swipe_init()
+        {
+            if($tab == null)
+                tab_make();
 
             idx = $slides.index($slides.filter("."+cfg.active_class));
             if(idx == -1)
                 idx = 0;
 
-            var subj;
+            $slides.eq(idx).addClass(cfg.active_class);
-            var tabs = "";
-
-            if($tab == null) {
-                $slides.each(function() {
-                    subj = $(this).find("header h2").text();
-                    if(subj.length < 1)
-                        subj = "&nbsp;";
-
-                    tabs += "<li>"+subj+"</li>\n";
-                });
-
-                if(tabs != "") {
-                    tabs = "<ul id=\""+cfg.slide_tab+"\">\n"+tabs+"</ul>";
-                    $wrap.before(tabs);
-
-                    $tab = $this.find("#"+cfg.slide_tab);
-                    $tabs = $tab.find("li");
-                }
-
-                tabs_count = $tabs.size();
-            }
 
+            width = $wrap.width();
             tabw_width = $tab.width();
-            tab_width = $tabs.eq(idx).width();
+            tab_width = $tabs.eq(0).width();
+            height = $slides.eq(idx).height();
+            $wrap.height(height);
 
-            if(tabs_count < 1) {
+            $slides.not("."+cfg.active_class).css("left", "-"+width+"px");
-                $tab.remove();
-                return;
-            }
 
-            if(tabs_count < 3) {
+            if(count < 3) {
-                li_left = parseInt((tabw_width - (tab_width * tabs_count)) / (tabs_count + 1));
+                pos_left = 0;
+                li_left = parseInt((tabw_width - (tab_width * count)) / (count + 1));
 
                 $tabs.each(function(index) {
                     pos_left += (li_left + (tab_width * index));
                     $(this).css("left", pos_left);
                 });
 
+                $tabs.removeClass(cfg.tab_actie);
                 $tabs.eq(idx).addClass(cfg.tab_active);
             } else {
                 li_left = parseInt((tabw_width - (tab_width * 3)) / 2);
                 pos_left = tab_width + li_left;
                 pos_right = tabw_width - tab_width;
 
-                $tabs.css("display", "none").removeClass("tab_listed");
+                $tabs.removeClass(cfg.tab_actie+" tab_listed").css("left", "-"+tab_width+"px");
 
-                $tabs.eq(idx - 1).addClass("tab_listed").css({left: "0px", display: "block"});
+                $tabs.eq(idx - 1).addClass("tab_listed").css("left", "0px");
-                $tabs.eq(idx).addClass("tab_listed").css({left: pos_left+"px", display: "block"}).addClass(cfg.tab_active);
+                $tabs.eq(idx).addClass(cfg.tab_active+" tab_listed").css("left", pos_left+"px");
-                $tabs.eq((idx + 1) % count).addClass("tab_listed").css({left: pos_right+"px", display: "block"});
+                $tabs.eq((idx + 1) % count).addClass("tab_listed").css("left", pos_right+"px");
 
-                $tabs.not(".tab_listed").css("left", "-"+tab_width+"px");
+                $slides.eq((idx - 1)).css("left", "-"+width+"px");
+                $slides.eq((idx + 1) % count).css("left", width+"px");
             }
         }
 
-        function swipe_init()
-        {
-            idx = $slides.index($slides.filter("."+cfg.active_class));
-            if(idx == -1)
-                idx = 0;
-
-            width = $(window).width();
-            $slides.eq(idx).addClass(cfg.active_class);
-            $slides.not("."+cfg.active_class).css("left", width+"px");
-
-            height = $slides.eq(idx).height();
-            $wrap.height(height);
-        }
-
         function swipe_left()
         {
+            if(count < 2)
+                return;
+
             if(check_animated())
                 return;
 
             idx = $slides.index($slides.filter("."+cfg.active_class));
             next = (idx + 1) % count;
 
-            $slides.not("."+cfg.active_class).css("left", width+"px");
-
-            width = $(window).width();
             height = $slides.eq(next).height();
             $wrap.height(height);
 
-            $slides.eq(idx).animate(
+            $slides.eq(next).css("left", width+"px");
+            $tabs.removeClass(cfg.tab_active);
+
+            $slides.eq(idx).clearQueue().animate(
                 { left: "-="+width }, cfg.duration,
                 function() {
-                    $slides.eq(idx).removeClass(cfg.active_class);
+                    $slides.eq(idx).css("left", width+"px");
                 }
             );
 
-            $slides.eq(next).animate(
+            $slides.eq(next).clearQueue().animate(
                 { left: "-="+width }, cfg.duration,
                 function() {
-                    $slides.eq(next).addClass(cfg.active_class);
-
                     if(count >= 3) {
-                        $tabs.removeClass("tab_listed").css("display", "none");
+                        $tabs.removeClass("tab_listed").css("left", "-"+tab_width+"px");
 
-                        $tabs.eq(next - 1).addClass("tab_listed").css({left: "0px", display: "block"});
+                        $tabs.eq(next - 1).addClass("tab_listed").css("left", "0px");
-                        $tabs.eq(next).addClass("tab_listed").css({left: pos_left+"px", display: "block"});
+                        $tabs.eq(next).addClass("tab_listed").css("left", pos_left+"px");
-                        $tabs.eq((next + 1) % count).addClass("tab_listed").css({left: pos_right+"px", display: "block"});
+                        $tabs.eq((next + 1) % count).addClass("tab_listed").css("left", pos_right+"px");
-
-                        $tabs.not(".tab_listed").css("left", tabw_width+"px");
                     }
 
-                    $tabs.removeClass(cfg.tab_active);
                     $tabs.eq(next).addClass(cfg.tab_active);
                 }
             );
+
+            $slides.eq(idx).removeClass(cfg.active_class);
+            $slides.eq(next).addClass(cfg.active_class);
         }
 
         function swipe_right()
         {
+            if(count < 2)
+                return;
+
             if(check_animated())
                 return;
 
             idx = $slides.index($slides.filter("."+cfg.active_class));
-            next = idx - 1
+            next = idx - 1;
+            if(next < 0)
+                next = count - 1;
 
-            $slides.not("."+cfg.active_class).css("left", "-"+width+"px");
-
-            width = $(window).width();
             height = $slides.eq(next).height();
             $wrap.height(height);
 
-            $slides.eq(idx).animate(
+            $slides.eq(next).css("left", "-"+width+"px");
+            $tabs.removeClass(cfg.tab_active);
+
+            $slides.eq(idx).clearQueue().animate(
                 { left: "+="+width }, cfg.duration,
                 function() {
-                    $slides.eq(idx).removeClass(cfg.active_class);
+                    $slides.eq(idx).css("left", "-"+width+"px");
                 }
             );
 
-            $slides.eq(next).animate(
+            $slides.eq(next).clearQueue().animate(
                 { left: "+="+width }, cfg.duration,
                 function() {
-                    $slides.eq(next).addClass(cfg.active_class);
-
                     if(count >= 3) {
-                        $tabs.css("display", "none").removeClass("tab_listed");
+                        $tabs.removeClass("tab_listed").css("left", "-"+tab_width+"px");
 
-                        $tabs.eq(next - 1).addClass("tab_listed").css({left: "0px", display: "block"});
+                        $tabs.eq(next - 1).addClass("tab_listed").css("left", "0px");
-                        $tabs.eq(next).addClass("tab_listed").css({left: pos_left+"px", display: "block"});
+                        $tabs.eq(next).addClass("tab_listed").css("left", pos_left+"px");
-                        $tabs.eq((next + 1) % count).addClass("tab_listed").css({left: pos_right+"px", display: "block"});
+                        $tabs.eq((next + 1) % count).addClass("tab_listed").css("left", pos_right+"px");
-
-                        $tabs.not(".tab_listed").css("left", "-"+tab_width+"px");
                     }
 
-                    $tabs.removeClass(cfg.tab_active);
                     $tabs.eq(next).addClass(cfg.tab_active);
                 }
             );
+
+            $slides.eq(idx).removeClass(cfg.active_class);
+            $slides.eq(next).addClass(cfg.active_class);
         }
 
         function check_animated()
         {
             if($slides.filter(":animated").size())
                 return true;
+            else
+                return false;
+        }
+
+        function tab_click($el)
+        {
+            if(check_animated())
+                return;
+
+            if($el.parent().hasClass(cfg.tab_active))
+                return;
+
+            idx = $slides.index($slides.filter("."+cfg.active_class));
+
+            var idx_pos = parseInt($tabs.eq(idx).css("left"));
+            var btn_pos = parseInt($el.parent().css("left"));
+
+            if(idx_pos > btn_pos)
+                swipe_right();
+            else(idx_pos < btn_pos)
+                swipe_left();
         }
 
         $(window).on("load", function(e) {
-            tab_make();
             swipe_init();
         });
 
         $(window).on("resize", function(e) {
-            tab_make();
             swipe_init();
         });
 
+
         // swipe event
-        $this
+        this
          .on("swipeleft", function(e) {
              swipe_left();
          })

mobile/shop/index.php

@@ -54,61 +54,61 @@ include_once(G5_MSHOP_PATH.'/shop.head.php');
         </section>
 
         <section class="sct_wrap">
-        <header>
+            <header>
-            <h2><a href="<?php echo G4_SHOP_URL; ?>/listtype.php?type=2">추천상품</a></h2>
+                <h2><a href="<?php echo G4_SHOP_URL; ?>/listtype.php?type=2">추천상품</a></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(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();
-        ?>
+            ?>
-    </section>
+        </section>
 
-    <section class="sct_wrap">
+        <section class="sct_wrap">
-        <header>
+            <header>
-            <h2><a href="<?php echo G4_SHOP_URL; ?>/listtype.php?type=4">인기상품</a></h2>
+                <h2><a href="<?php echo G4_SHOP_URL; ?>/listtype.php?type=4">인기상품</a></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(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();
-        ?>
+            ?>
-    </section>
+        </section>
 
-    <section class="sct_wrap">
+        <section class="sct_wrap">
-        <header>
+            <header>
-            <h2><a href="<?php echo G4_SHOP_URL; ?>/listtype.php?type=5">할인상품</a></h2>
+                <h2><a href="<?php echo G4_SHOP_URL; ?>/listtype.php?type=5">할인상품</a></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(5);
-        $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();
-        ?>
+            ?>
-    </section>
+        </section>
 
     </div>
 
@@ -124,7 +124,7 @@ $(function() {
             slide_class: "sidx_slide",
             active_class: "slide_active",
             tab_active: "tab_active",
-            duration: 300
+            duration: 500
         }
     );
 });