모바일 플로팅 메뉴 스크립트 추가

.gitignore

@@ -1,12 +1,9 @@
-<<<<<<< HEAD
 dbconfig.php
 log
 .htaccess
 data
-=======
 /.htaccess
 data/
->>>>>>> g5
 test
 config.php
 sirgle
@@ -16,16 +13,9 @@ skin/latest/basic2
 rankiss*
 thumb.lib.php
 test.php
-<<<<<<< HEAD
-g4s_tree
-=======
->>>>>>> g5
 itzimara*
 nemoluv*
 cheditor*
 *.key
-<<<<<<< HEAD
 g5_tree
-=======
 *.sh
->>>>>>> g5

css/mobile_shop.css

@@ -629,4 +629,8 @@ td.empty_table {padding:5em 0;text-align:center}
 .pg_page, .qa_page {background:#f9f9f9;text-decoration:none}
 .pg_start, .pg_prev, .qa_start, .qa_prev {border-right:1px solid #cfded8}
 .pg_end, .pg_next, .qa_end, .qa_next {border-left:1px solid #cfded8}
-.pg_current {background:#333;color:#fff;font-weight:bold}
+.pg_current {background:#333;color:#fff;font-weight:bold}
+
+/* 상품상세 메뉴 floating */
+#info_top_layer {display:none;position:absolute; top:0; left:0; width:100%; background-color: #eee;}
+#form_btn_layer { display:none;position:absolute; top:0; left: 0; width: 100%; height: 60px; background-color: #eee;}

js/jquery.fancylist.js

@@ -1,9 +1,9 @@
 (function($) {
-    $.fn.itemList = function(element, clear)
+    $.fn.fancyList = function(element, clear)
     {
         var cfg = {
-                element: "li.sct_li",
+                element: "li",
-                clear: "sct_clear"
+                clear: "clear"
             };
 
         if(typeof element == "object")

js/jquery.floatmenu.js

@@ -0,0 +1,172 @@
+(function($) {
+    $.fn.topFloatMenu = function(timeout, duration)
+    {
+        var cfg = {
+                timeout: 300,
+                duration: 300
+            };
+
+        if(typeof timeout == "object") {
+            cfg = $.extend( cfg, timeout);
+        } else {
+            if(timeout) {
+                cfg = $.extend({ timeout: timeout });
+            }
+
+            if(duration) {
+                cfg = $.extend({ duration: duration });
+            }
+        }
+
+        var $menu = this;
+        var scroll_y = 0;
+        var timeout = null;
+        var height = parseInt($menu.height());
+        var move_timeout = null;
+
+        function init_menu()
+        {
+            hide_menu();
+
+            timeout = setTimeout(function() {
+                $menu.css("top", (scroll_y - height)+"px").css("display", "block");
+                $menu.animate({ top: scroll_y }, cfg.duration);
+
+                return;
+            }, cfg.timeout);
+        }
+
+        function float_menu()
+        {
+            hide_menu();
+
+            timeout = setTimeout(function() {
+                scroll_y = parseInt(document.body.scrollTop);
+                $menu.css("top", (scroll_y - height)+"px").css("display", "block");
+                $menu.animate({ top: scroll_y }, cfg.duration);
+
+                return;
+            }, cfg.timeout);
+        }
+
+        function hide_menu()
+        {
+            clearTimeout(timeout);
+            $menu.clearQueue().stop().hide().css("top", "-"+height+"px");
+        }
+
+        $(window).on("scroll",function(event) {
+            float_menu();
+        });
+
+        $(window).on("resize", function(event) {
+            $(window).trigger("scroll");
+        });
+
+        $(window).on("load", function(event) {
+            init_menu();
+        });
+
+        $(window).on("touchstart", function(event) {
+            hide_menu();
+        });
+
+        if(navigator.userAgent.toLowerCase().indexOf("android") > -1) {
+            $(window).on("touchend", function(event) {
+                $(window).trigger("scroll");
+            });
+        }
+    }
+
+    $.fn.bottomFloatMenu = function(timeout, duration)
+    {
+        var cfg = {
+                timeout: 300,
+                duration: 300
+            };
+
+        if(typeof timeout == "object") {
+            cfg = $.extend( cfg, timeout);
+        } else {
+            if(timeout) {
+                cfg = $.extend({ timeout: timeout });
+            }
+
+            if(duration) {
+                cfg = $.extend({ duration: duration });
+            }
+        }
+
+        var $menu = this;
+        var scroll_y = 0;
+        var move_y = 0;
+        var element_y = 0;
+        var top_pos = 0;
+        var timeout = null;
+        var height = parseInt($menu.height());
+        var w_height = 0;
+
+        function init_menu()
+        {
+            hide_menu();
+
+            timeout = setTimeout(function() {
+                scroll_y = parseInt(document.body.scrollTop);
+                w_height = $(window).height();
+                element_y = scroll_y + w_height;
+                $menu.css("top", element_y+"px").css("display", "block");
+                $menu.clearQueue().stop().animate({ top: "-="+height }, cfg.duration);
+            }, cfg.timeout);
+        }
+
+        function float_menu()
+        {
+            hide_menu();
+
+            w_height = $(window).height();
+            scroll_y = parseInt(document.body.scrollTop);
+            element_y = scroll_y + w_height;
+
+            if (/iP(hone|od|ad)/.test(navigator.platform)) {
+                if(window.innerHeight - $(window).outerHeight(true) > 0)
+                    element_y += (window.innerHeight - $(window).outerHeight(true));
+            }
+
+            timeout = setTimeout(function() {
+                $menu.height(0).css("top", element_y+"px").css("display", "block");
+                $menu.animate({
+                    top: "-="+height,
+                    height: "+="+height
+                }, cfg.duration);
+            }, cfg.timeout);
+        }
+
+        function hide_menu()
+        {
+            clearTimeout(timeout);
+            $menu.css("top", (w_height + height)+"px").clearQueue().stop().css("display", "none");
+        }
+
+        $(window).on("scroll",function(event) {
+            float_menu();
+        });
+
+        $(window).on("load", function(event) {
+            init_menu();
+        });
+
+        $(window).on("resize", function(event) {
+            $(window).trigger("scroll");
+        });
+
+        $(window).on("touchstart", function(event) {
+            hide_menu();
+        });
+
+        if(navigator.userAgent.toLowerCase().indexOf("android") > -1) {
+            $(window).on("touchend", function(event) {
+                $(window).trigger("scroll");
+            });
+        }
+    }
+}(jQuery));

mobile/shop/iteminfo.php

@@ -64,7 +64,17 @@ function pg_anchor($info) {
     </ul>
 <?php
 }
+?>
 
+<script src="<?php echo G5_JS_URL ?>/jquery.floatmenu.js"></script>
+
+<div id="info_top_layer">
+    <h2>상품 정보</h2>
+    <?php echo pg_anchor($info); ?>
+</div>
+
+<div id="info_content">
+<?php
 switch($info) {
     case 'use':
         include_once(G5_MSHOP_SKIN_PATH.'/iteminfo.itemuse.skin.php');
@@ -85,6 +95,15 @@ switch($info) {
         include_once(G5_MSHOP_SKIN_PATH.'/iteminfo.info.skin.php');
         break;
 }
+?>
+</div>
 
+<script>
+$(function() {
+    $("#info_top_layer").topFloatMenu();
+});
+</script>
+
+<?php
 include_once(G5_PATH.'/tail.sub.php');
 ?>

mobile/skin/shop/basic/item.form.skin.php

@@ -39,6 +39,7 @@ if ($row['it_id']) {
 ?>
 
 <link rel="stylesheet" href="<?php echo G5_MSHOP_SKIN_URL; ?>/style.css">
+<script src="<?php echo G5_JS_URL ?>/jquery.floatmenu.js"></script>
 
 <form name="fitem" action="<?php echo $action_url; ?>" method="post" onsubmit="return fitem_submit(this);">
 <input type="hidden" name="it_id[]" value="<?php echo $it['it_id']; ?>">
@@ -390,6 +391,10 @@ $href = G5_SHOP_URL.'/iteminfo.php?it_id='.$it_id;
     </ul>
 </div>
 
+<div id="form_btn_layer">
+ddd
+</div>
+
 <script>
 $(function(){
     // 상품이미지 크게보기
@@ -402,6 +407,8 @@ $(function(){
 
         return false;
     });
+
+    $("#form_btn_layer").bottomFloatMenu();
 });
 
 // 바로구매, 장바구니 폼 전송

mobile/skin/shop/basic/iteminfo.change.skin.php

@@ -6,7 +6,6 @@ if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
 
 <section id="sit_ex">
     <h2>교환/반품</h2>
-    <?php echo pg_anchor($info); ?>
 
     <?php echo conv_content($default['de_change_content'], 1); ?>
 </section>

mobile/skin/shop/basic/iteminfo.delivery.skin.php

@@ -6,7 +6,6 @@ if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
 
 <section id="sit_dvr">
     <h2>배송정보</h2>
-    <?php echo pg_anchor($info); ?>
 
     <?php echo conv_content($default['de_baesong_content'], 1); ?>
 </section>

mobile/skin/shop/basic/iteminfo.info.skin.php

@@ -7,9 +7,6 @@ include_once(G5_LIB_PATH.'/iteminfo.lib.php');
 <link rel="stylesheet" href="<?php echo G5_MSHOP_SKIN_URL; ?>/style.css">
 
 <section id="sit_inf">
-    <h2>상품 정보</h2>
-    <?php echo pg_anchor($info); ?>
-
     <?php if ($it['it_basic']) { // 상품 기본설명 ?>
     <div id="sit_inf_basic">
          <?php echo $it['it_basic']; ?>
@@ -52,49 +49,4 @@ include_once(G5_LIB_PATH.'/iteminfo.lib.php');
     <?php } //if?>
 
 </section>
-<!-- 상품설명 end -->
+<!-- 상품설명 end -->
-
-<!--[if lte IE 6]>
-<script>
-// 이미지 등비율 리사이징
-$(window).load(function() {
-    view_image_resize();
-});
-
-function view_image_resize()
-{
-    var $img = $("#sit_inf_explan img");
-    var img_wrap = $("#sit_inf_explan").width();
-    var win_width = $(window).width() - 35;
-    var res_width = 0;
-
-    if(img_wrap < win_width)
-        res_width = img_wrap;
-    else
-        res_width = win_width;
-
-    $img.each(function() {
-        var img_width = $(this).width();
-        var img_height = $(this).height();
-        var this_width = $(this).data("width");
-        var this_height = $(this).data("height");
-
-        if(this_width == undefined) {
-            $(this).data("width", img_width); // 원래 이미지 사이즈
-            $(this).data("height", img_height);
-            this_width = img_width;
-            this_height = img_height;
-        }
-
-        if(this_width > res_width) {
-            $(this).width(res_width);
-            var res_height = Math.round(res_width * $(this).data("height") / $(this).data("width"));
-            $(this).height(res_height);
-        } else {
-            $(this).width(this_width);
-            $(this).height(this_height);
-        }
-    });
-}
-</script>
-<![endif]-->

mobile/skin/shop/basic/iteminfo.itemqa.skin.php

@@ -6,7 +6,6 @@ if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
 
 <section id="sit_qa">
     <h2>상품문의</h2>
-    <?php echo pg_anchor($info); ?>
 
     <div id="itemqa"><?php include_once('./itemqa.php'); ?></div>
 </section>

mobile/skin/shop/basic/iteminfo.itemuse.skin.php

@@ -6,7 +6,6 @@ if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
 
 <section id="sit_use">
     <h2>사용후기</h2>
-    <?php echo pg_anchor($info); ?>
 
     <div id="itemuse"><?php include_once('./itemuse.php'); ?></div>
 </section>

mobile/skin/shop/basic/iteminfo.relation.skin.php

@@ -6,7 +6,6 @@ if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
 
 <section id="sit_rel">
     <h2>관련상품</h2>
-    <?php echo pg_anchor($info); ?>
 
     <div class="sct_wrap">
         <?php

mobile/skin/shop/basic/list.10.skin.php

@@ -3,7 +3,7 @@ if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
 ?>
 
 <link rel="stylesheet" href="<?php echo G5_MSHOP_SKIN_URL; ?>/style.css">
-<script src="<?php echo G5_JS_URL ?>/shop.mobile.list.js"></script>
+<script src="<?php echo G5_JS_URL ?>/jquery.fancylist.js"></script>
 
 <!-- 상품진열 10 시작 { -->
 <?php
@@ -73,6 +73,6 @@ if($i == 0) echo "<p class=\"sct_noitem\">등록된 상품이 없습니다.</p>\
 
 <script>
 $(function() {
-    $("#sct_wrap").itemList("li.sct_li", "sct_clear");
+    $("#sct_wrap").fancyList("li.sct_li", "sct_clear");
 });
 </script>

mobile/skin/shop/basic/main.10.skin.php

@@ -3,7 +3,7 @@ if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
 ?>
 
 <link rel="stylesheet" href="<?php echo G5_MSHOP_SKIN_URL; ?>/style.css">
-<script src="<?php echo G5_JS_URL ?>/shop.mobile.list.js"></script>
+<script src="<?php echo G5_JS_URL ?>/jquery.fancylist.js"></script>
 
 <!-- 상품진열 10 시작 { -->
 <?php
@@ -73,6 +73,6 @@ if($i == 0) echo "<p class=\"sct_noitem\">등록된 상품이 없습니다.</p>\
 
 <script>
 $(function() {
-    $(".sct_wrap").itemList("li.sct_li", "sct_clear");
+    $(".sct_wrap").fancyList("li.sct_li", "sct_clear");
 });
 </script>

mobile/skin/shop/basic/relation.skin.php

@@ -3,7 +3,7 @@ if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
 ?>
 
 <link rel="stylesheet" href="<?php echo G5_MSHOP_SKIN_URL; ?>/style.css">
-<script src="<?php echo G5_JS_URL ?>/shop.mobile.list.js"></script>
+<script src="<?php echo G5_JS_URL ?>/jquery.fancylist.js"></script>
 
 <!-- 상품진열 10 시작 { -->
 <?php
@@ -73,6 +73,6 @@ if($i == 0) echo "<p class=\"sct_noitem\">등록된 상품이 없습니다.</p>\
 
 <script>
 $(function() {
-    $("#sct_wrap").itemList("li.sct_li", "sct_clear");
+    $("#sct_wrap").fancyList("li.sct_li", "sct_clear");
 });
 </script>

test.css

@@ -0,0 +1,3 @@
+#topFloatMenu { position:absolute; top:0; left:0; z-index: 100; width:100%; height: 60px; line-height: 60px; text-align: center; background-color: #eee; }
+#bottomFloatMenu { display:none; position:absolute; top:0; left: 0; z-index: 100; width: 100%; height: 60px; line-height: 60px; text-align: center; background-color: #eee; }
+#Content { width: 100%; height: 2000px; }