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-15 16:37:44 +09:00
parent b66eda10dc
commit 0dc34805d8
3 changed files with 166 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

199
js/jquery.slideview.js
View File

@ -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 count = $slides.size();
var width;
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)
return;
var subj;
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;
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();
}
$slides.eq(idx).addClass(cfg.active_class);
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) {
$tab.remove();
return;
}
$slides.not("."+cfg.active_class).css("left", "-"+width+"px");
if(tabs_count < 3) {
li_left = parseInt((tabw_width - (tab_width * tabs_count)) / (tabs_count + 1));
if(count < 3) {
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).addClass("tab_listed").css({left: pos_left+"px", display: "block"}).addClass(cfg.tab_active);
$tabs.eq((idx + 1) % count).addClass("tab_listed").css({left: pos_right+"px", display: "block"});
$tabs.eq(idx - 1).addClass("tab_listed").css("left", "0px");
$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");
$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).addClass("tab_listed").css({left: pos_left+"px", display: "block"});
$tabs.eq((next + 1) % count).addClass("tab_listed").css({left: pos_right+"px", display: "block"});
$tabs.not(".tab_listed").css("left", tabw_width+"px");
$tabs.eq(next - 1).addClass("tab_listed").css("left", "0px");
$tabs.eq(next).addClass("tab_listed").css("left", pos_left+"px");
$tabs.eq((next + 1) % count).addClass("tab_listed").css("left", pos_right+"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).addClass("tab_listed").css({left: pos_left+"px", display: "block"});
$tabs.eq((next + 1) % count).addClass("tab_listed").css({left: pos_right+"px", display: "block"});
$tabs.not(".tab_listed").css("left", "-"+tab_width+"px");
$tabs.eq(next - 1).addClass("tab_listed").css("left", "0px");
$tabs.eq(next).addClass("tab_listed").css("left", pos_left+"px");
$tabs.eq((next + 1) % count).addClass("tab_listed").css("left", pos_right+"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();
})