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

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

Browse Source
This commit is contained in:
chicpro
2013-09-27 17:53:49 +09:00
parent 21ea906b81
commit 16fdd3d4e0
16 changed files with 216 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
.gitignore vendored
View File

@ -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

6
css/mobile_shop.css
View File

@ -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;}

6
js/shop.mobile.list.js → js/jquery.fancylist.js
View File

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

172
js/jquery.floatmenu.js Normal file
View File

@ -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));

19
mobile/shop/iteminfo.php
View File

@ -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');
?>

7
mobile/skin/shop/basic/item.form.skin.php
View File

@ -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();
});
// 바로구매, 장바구니 폼 전송

1
mobile/skin/shop/basic/iteminfo.change.skin.php
View File

@ -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>

1
mobile/skin/shop/basic/iteminfo.delivery.skin.php
View File

@ -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>

50
mobile/skin/shop/basic/iteminfo.info.skin.php
View File

@ -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 -->
<!--[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]-->
<!-- 상품설명 end -->

1
mobile/skin/shop/basic/iteminfo.itemqa.skin.php
View File

@ -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>

1
mobile/skin/shop/basic/iteminfo.itemuse.skin.php
View File

@ -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>

1
mobile/skin/shop/basic/iteminfo.relation.skin.php
View File

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

4
mobile/skin/shop/basic/list.10.skin.php
View File

@ -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>

4
mobile/skin/shop/basic/main.10.skin.php
View File

@ -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>

4
mobile/skin/shop/basic/relation.skin.php
View File

@ -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>

3
test.css Normal file
View File

@ -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; }