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-10-17 17:38:15 +09:00
parent c3eeade1ff
commit 000e5f7c76
5 changed files with 183 additions and 230 deletions
Download Patch File Download Diff File Expand all files Collapse all files

337
js/jquery.floatmenu.js
View File

@ -1,266 +1,159 @@
(function($) {
$.fn.topFloatMenu = function(timeout, duration, interval, count)
$.fn.floatTopMenu = function(option)
{
var cfg = {
timeout: 200,
duration: 300,
interval: 500,
count: 5
duration: 200
};
if(typeof timeout == "object") {
cfg = $.extend( cfg, timeout);
} else {
if(timeout) {
cfg = $.extend({ timeout: timeout });
}
if(duration) {
cfg = $.extend({ duration: duration });
}
if(interval) {
cfg = $.extend({ interval: interval });
}
if(count) {
cfg = $.extend({ count: count });
}
}
var $menu = this;
var $this = this;
var height = 0;
var scroll_y = 0;
var origin_y = 0;
var timeout = null;
var interval = null;
var height = parseInt($menu.height());
var interval_count = 0;
function init_menu()
{
hide_menu();
var methods = {
init: function(option)
{
if($this.data("animated") == true)
return;
timeout = setTimeout(function() {
$menu.css("top", (scroll_y - height)+"px").css("display", "block");
$menu.animate({ top: scroll_y }, cfg.duration);
$this.data("animated", true);
return;
}, cfg.timeout);
}
if(typeof option == "object") {
cfg = $.extend( cfg, option);
}
function float_menu()
{
hide_menu();
$this.data("cfg", cfg);
$this.css({ top: "-500px", display: "block" });
origin_y = $(window).scrollTop();
timeout = setTimeout(function() {
height = parseInt($menu.height());
height = parseInt($this.outerHeight());
scroll_y = $(window).scrollTop();
if(origin_y == scroll_y) {
$menu.css("top", (scroll_y - height)+"px").css("display", "block");
$menu.animate({ top: scroll_y }, cfg.duration);
$this
.css("display", "none")
.clearQueue()
.stop()
.css("top", (scroll_y - height)+"px").css("display", "block")
.animate({ top: scroll_y }, cfg.duration, function() { $this.data("animated", false); });
},
show: function()
{
if($this.data("animated") == true)
return;
$this.data("animated", true);
if($this.data("cfg")) {
cfg = $.extend( cfg, $this.data("cfg"));
}
}, cfg.timeout);
}
function hide_menu()
{
$menu.css("display", "none").clearQueue().stop().css("top", "-"+height+"px");
$this.css({ top: "-"+height+"px", display: "block" });
clearTimeout(timeout);
clearInterval(interval);
height = parseInt($this.outerHeight());
scroll_y = $(window).scrollTop();
interval_count = 0;
interval = setInterval(check_menu, cfg.interval);
}
function check_menu()
{
clearTimeout(timeout);
if(interval_count == parseInt(cfg.count)) {
clearInterval(interval);
interval_count = 0;
return;
} else {
interval_count++;
$this
.css("display", "none")
.css("top", (scroll_y - height)+"px").css("display", "block")
.animate({ top: scroll_y }, cfg.duration, function() { $this.data("animated", false); });
},
hide: function()
{
$this.css({ display: "none", top: "-"+height+"px" });
}
};
origin_y = $(window).scrollTop();
timeout = setTimeout(function() {
scroll_y = $(window).scrollTop();
if(origin_y == scroll_y) {
element_y = parseInt($menu.css("top"));
if(!$menu.is(":animated") && ($menu.is(":hidden") || (element_y - scroll_y) != 0)) {
float_menu();
}
}
}, cfg.timeout);
}
$(window).on("scroll",function(event) {
float_menu();
});
$(window).on("resize", function(event) {
if(origin_y != scroll_y)
float_menu();
});
$(window).on("load", function(event) {
init_menu();
});
document.addEventListener('touchmove', function(event) {
hide_menu();
}, false);
if (methods[option])
return methods[option].apply(this, Array.prototype.slice.call(arguments, 1));
else
return methods.init.apply(this, arguments);
}
$.fn.bottomFloatMenu = function(timeout, duration, interval, count)
$.fn.floatBottomMenu = function(option)
{
var cfg = {
timeout: 200,
duration: 300,
interval: 500,
count: 5
duration: 200
};
if(typeof timeout == "object") {
cfg = $.extend( cfg, timeout);
} else {
if(timeout) {
cfg = $.extend({ timeout: timeout });
}
if(duration) {
cfg = $.extend({ duration: duration });
}
if(interval) {
cfg = $.extend({ interval: interval });
}
if(count) {
cfg = $.extend({ count: count });
}
}
var $menu = this;
var $this = this;
var height = 0;
var scroll_y = 0;
var origin_y = 0;
var element_y = 0;
var timeout = null;
var interval = null;
var height = parseInt($menu.height());
var w_height = 0;
var interval_count = 0;
var element_y = 0;
function init_menu()
{
hide_menu();
var methods = {
init: function(option)
{
if($this.data("animated") == true)
return;
timeout = setTimeout(function() {
$this.data("animated", true);
if(typeof option == "object") {
cfg = $.extend( cfg, option);
}
$this.data("cfg", cfg);
$this.css({ top: "-500px", display: "block" });
height = parseInt($this.outerHeight());
scroll_y = $(window).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();
$this
.css("display", "none")
.clearQueue()
.stop()
.css({ top: element_y+"px", display: "block" })
.animate({ top: "-="+height }, cfg.duration, function() { $this.data("animated", false); });
},
show: function()
{
if($this.data("animated") == true)
return;
origin_y = $(window).scrollTop();
$this.data("animated", true);
timeout = setTimeout(function() {
if($this.data("cfg")) {
cfg = $.extend( cfg, $this.data("cfg"));
}
$this.css({ top: "-"+height+"px", display: "block" });
height = parseInt($this.outerHeight());
scroll_y = $(window).scrollTop();
w_height = $(window).height();
element_y = scroll_y + w_height;
if(origin_y == scroll_y) {
height = parseInt($menu.height());
w_height = $(window).height();
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));
}
if (/iP(hone|od|ad)/.test(navigator.platform)) {
if(window.innerHeight - $(window).outerHeight(true) > 0)
element_y += (window.innerHeight - $(window).outerHeight(true));
}
$menu.height(0).css("top", element_y+"px").css("display", "block");
$menu.animate({
$this
.css("display", "none")
.clearQueue()
.stop()
.height(0)
.css({top: element_y+"px", display: "block"})
.animate({
top: "-="+height,
height: "+="+height
}, cfg.duration);
}
}, cfg.timeout);
}
function hide_menu()
{
$menu.css("display", "none").css("top", (w_height + height)+"px").clearQueue().stop();
clearTimeout(timeout);
clearInterval(interval);
interval_count = 0;
interval = setInterval(check_menu, cfg.interval);
}
function check_menu()
{
clearTimeout(timeout);
if(interval_count == parseInt(cfg.count)) {
clearInterval(interval);
interval_count = 0;
return;
} else {
interval_count++;
}, cfg.duration,
function() {
$this.data("animated", false);
}
);
},
hide: function()
{
this.css({ display: "none", top: "-"+height+"px" });
}
};
origin_y = $(window).scrollTop();
timeout = setTimeout(function() {
scroll_y = $(window).scrollTop();
if(origin_y == scroll_y) {
w_height = $(window).height();
element_y = parseInt($menu.css("top"));
var h = 0;
if (/iP(hone|od|ad)/.test(navigator.platform)) {
if(window.innerHeight - $(window).outerHeight(true) > 0)
h = window.innerHeight - $(window).outerHeight(true);
}
if(!$menu.is(":animated") && ($menu.is(":hidden") || element_y != (scroll_y + w_height + h - height))) {
float_menu();
}
}
}, cfg.timeout);
}
$(window).on("scroll",function(event) {
float_menu();
});
$(window).on("load", function(event) {
init_menu();
});
$(window).on("resize", function(event) {
if(origin_y != scroll_y)
float_menu();
});
document.addEventListener('touchmove', function(event) {
hide_menu();
}, false);
if (methods[option])
return methods[option].apply(this, Array.prototype.slice.call(arguments, 1));
else
return methods.init.apply(this, arguments);
}
}(jQuery));

34
mobile/shop/iteminfo.php
View File

@ -101,7 +101,39 @@ switch($info) {
<script>
$(function() {
$("#info_top_layer").topFloatMenu();
var scroll_timeout = null;
var timeout = 200;
$(window).on("load", function(e) {
setTimeout(function() {
$("#info_top_layer").floatTopMenu();
}, timeout);
});
if(navigator.userAgent.toLowerCase().indexOf("android") > -1) {
$(window).on("resize", function(e) {
setTimeout(function() {
$(window).trigger("scroll");
}, timeout);
});
}
$(window).on("scroll", function(e) {
clearTimeout(scroll_timeout);
$("#info_top_layer").floatTopMenu("hide");
scroll_timeout = setTimeout(function() {
$("#info_top_layer").floatTopMenu("show");
}, timeout);
});
// scroll event enable
$(window).on("movestart", function(e) {
if ((e.distX > e.distY && e.distX < -e.distY) ||
(e.distX < e.distY && e.distX > -e.distY)) {
e.preventDefault();
}
});
});
</script>

BIN
mobile/skin/shop/basic/img/loading.gif
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.1 KiB

After

Width:  |  Height:  |  Size: 13 KiB

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

@ -385,9 +385,6 @@ $(function(){
return false;
});
// 하단 플로팅 메뉴
$("#form_btn_layer").bottomFloatMenu();
// 이전 다음상품 swipe
$(window)
.on("swipeleft", function(e) {
@ -490,6 +487,32 @@ $(function(){
<?php } ?>
});
var scroll_timeout = null;
var timeout = 200;
$(window).on("load", function(e) {
setTimeout(function() {
$("#form_btn_layer").floatBottomMenu();
}, timeout);
});
if(navigator.userAgent.toLowerCase().indexOf("android") > -1) {
$(window).on("resize", function(e) {
setTimeout(function() {
$(window).trigger("scroll");
}, timeout);
});
}
$(window).on("scroll", function(e) {
clearTimeout(scroll_timeout);
$("#form_btn_layer").floatBottomMenu("hide");
scroll_timeout = setTimeout(function() {
$("#form_btn_layer").floatBottomMenu("show");
}, timeout);
});
// scroll event enable
$(window).on("movestart", function(e) {
if ((e.distX > e.distY && e.distX < -e.distY) ||
@ -503,11 +526,16 @@ function load_message()
{
var w = $(window).width();
var h = $(window).height();
var img_w = 32;
var img_h = 32;
var img_w = 64;
var img_h = 64;
var top, left;
var scr_top = $(window).scrollTop();
if (/iP(hone|od|ad)/.test(navigator.platform)) {
if(window.innerHeight - $(window).outerHeight(true) > 0)
h += (window.innerHeight - $(window).outerHeight(true));
}
top = parseInt((h - img_h) / 2);
left = parseInt((w - img_w) / 2);

4
mobile/skin/shop/basic/style.css
View File

@ -80,5 +80,5 @@
/* 로딩안내 레이어 */
#loading_message {position:absolute;top:0;left:0;z-index:10000;background-color:#000;opacity:.5}
#loading_message img {position:relative}
#loading_message {position:absolute;top:0;left:0;z-index:10000;background-color:#eee;opacity:0.5}
#loading_message img {position:relative;opacity:1.0}