모바일 사용자 화면 UI 및 기능 개선
This commit is contained in:
chicpro
@ -443,7 +443,7 @@ function price_calculate()
|
||||
}
|
||||
});
|
||||
|
||||
$("#sit_tot_price").empty().html("총 금액 : "+number_format(String(total))+"원");
|
||||
$("#sit_tot_price").empty().html("<span>총 금액 :</span> "+number_format(String(total))+"원");
|
||||
}
|
||||
|
||||
// php chr() 대응
|
||||
|
||||
47
js/shop.mobile.list.js
Normal file
47
js/shop.mobile.list.js
Normal file
@ -0,0 +1,47 @@
|
||||
$(function() {
|
||||
$("#btn_more_item").on("click", function() {
|
||||
var $this = $(this);
|
||||
var url = $this.data("url");
|
||||
var page = $this.data("page");
|
||||
var $msg = $("#item_load_msg");
|
||||
|
||||
if($msg.is(":visible"))
|
||||
return false;
|
||||
|
||||
if($this.hasClass("no_more_item")) {
|
||||
alert("등록된 상품이 더 이상없습니다.");
|
||||
return false;
|
||||
}
|
||||
|
||||
$msg.css("display", "block");
|
||||
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
data: { page: page },
|
||||
url: url,
|
||||
cache: false,
|
||||
async: true,
|
||||
dataType: "json",
|
||||
success: function(data) {
|
||||
if(data.error != "") {
|
||||
alert(data.error);
|
||||
return false;
|
||||
}
|
||||
|
||||
var $items = $(data.item).find("li");
|
||||
var cnt = $items.size();
|
||||
|
||||
if(cnt < 1) {
|
||||
alert("등록된 상품이 더 이상없습니다.");
|
||||
$msg.css("display", "none");
|
||||
$this.addClass("no_more_item");
|
||||
return false;
|
||||
}
|
||||
|
||||
$("#sct_wrap").append($items);
|
||||
$this.data("page", data.page);
|
||||
$msg.css("display", "none");
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -3,18 +3,13 @@
|
||||
{
|
||||
var cfg = {
|
||||
slides: ".swipe-wrap > div",
|
||||
header: "header h2",
|
||||
tabWrap: "slide_tab",
|
||||
tabActive: "tab_active",
|
||||
buttons: ".mli_btn > button",
|
||||
tabOffset: 10,
|
||||
startSlide: 0,
|
||||
auto: 0,
|
||||
continuous: true,
|
||||
disableScroll: false,
|
||||
stopPropagation: false,
|
||||
callback: function(index, element) {
|
||||
tab_change(index);
|
||||
},
|
||||
transitionEnd: function(index, element) {
|
||||
set_height(index);
|
||||
idx = index;
|
||||
@ -26,94 +21,29 @@
|
||||
|
||||
var $wrap = this;
|
||||
var $slides = this.find(""+cfg.slides+"");
|
||||
var $tab = null;
|
||||
var $tabs;
|
||||
var $btns;
|
||||
|
||||
var idx = cfg.startSlide;
|
||||
var count = $slides.size();
|
||||
var width, height;
|
||||
var tabw_width = 0;
|
||||
var tab_width = 0;
|
||||
var pos_left = 0;
|
||||
var tab = null;
|
||||
|
||||
if(count < 1)
|
||||
return;
|
||||
|
||||
function tab_make()
|
||||
{
|
||||
var subj;
|
||||
var tabs = "";
|
||||
|
||||
$slides.each(function() {
|
||||
subj = $(this).find(""+cfg.header+"").text();
|
||||
if(subj.length < 1)
|
||||
subj = " ";
|
||||
|
||||
tabs += "<li><button type=\"button\">"+subj+"</button></li>\n";
|
||||
});
|
||||
|
||||
if(tabs != "") {
|
||||
tabs = "<ul id=\""+cfg.tabWrap+"\">\n"+tabs+"</ul>";
|
||||
$wrap.before(tabs);
|
||||
|
||||
$tab = $("#"+cfg.tabWrap);
|
||||
$tabs = $tab.find("li");
|
||||
$btns = $tab.find("button");
|
||||
|
||||
$tabs.each(function() {
|
||||
$(this)
|
||||
.css("width", $(this).width())
|
||||
.data("width", $(this).width());
|
||||
});
|
||||
|
||||
$btns.off("click");
|
||||
}
|
||||
}
|
||||
|
||||
function set_tab_width(idx)
|
||||
{
|
||||
$tabs.each(function() {
|
||||
$(this).css("width", $(this).data("width"));
|
||||
});
|
||||
|
||||
$tabs.eq(idx).css("width", "+="+cfg.tabOffset);
|
||||
}
|
||||
|
||||
function tab_position(idx)
|
||||
{
|
||||
$tabs.removeClass(""+cfg.tabActive+" tab_listed tab_left").css("left", "-"+tabw_width+"px");
|
||||
|
||||
var $tab_l = $tabs.eq(idx - 1);
|
||||
var $tab_c = $tabs.eq(idx);
|
||||
var $tab_r = $tabs.eq((idx + 1) % count);
|
||||
var w_c = $tab_c.outerWidth();
|
||||
var w_r = $tab_r.outerWidth();
|
||||
|
||||
var pl = 0;
|
||||
var pc = parseInt((tabw_width - w_c) / 2);
|
||||
var pr = tabw_width - w_r;
|
||||
|
||||
$tab_l.addClass("tab_listed").css("left", pl);
|
||||
$tab_c.addClass(""+cfg.tabActive+" tab_listed").css("left", pc);
|
||||
$tab_r.addClass("tab_listed").css("left", pr);
|
||||
}
|
||||
|
||||
function tab_change(idx)
|
||||
{
|
||||
if(count < 2)
|
||||
return;
|
||||
|
||||
set_height(idx);
|
||||
set_tab_width(idx);
|
||||
if(tab == null) {
|
||||
tab = "<div class=\"mli_btn\"><button type=\"button\" class=\"mli_pre\">이전 리스트</button><button type=\"button\" class=\"mli_next\">다음 리스트</button></div>";
|
||||
|
||||
if(count == 2) {
|
||||
$tabs.eq(0).css("left", 0);
|
||||
$tabs.eq(1).css("right", 0);
|
||||
$tabs.removeClass(""+cfg.tabActive+"");
|
||||
$tabs.eq(idx).addClass(""+cfg.tabActive+"");
|
||||
} else if(count >= 3) {
|
||||
tab_position(idx);
|
||||
$slides.each(function() {
|
||||
$(this).find("header").append(tab);
|
||||
});
|
||||
|
||||
$btns = $wrap.find(""+cfg.buttons+"");
|
||||
}
|
||||
}
|
||||
|
||||
@ -127,26 +57,8 @@
|
||||
|
||||
function init()
|
||||
{
|
||||
if($tab == null)
|
||||
if(tab == null)
|
||||
tab_make();
|
||||
|
||||
width = $wrap.width();
|
||||
tabw_width = $tab.width();
|
||||
|
||||
set_tab_width(idx);
|
||||
|
||||
if(count == 1) {
|
||||
tab_width = $tabs.eq(0).outerWidth();
|
||||
pos_left = parseInt((tabw_width - tab_width) / 2);
|
||||
$tabs.eq(0).css("left", pos_left).addClass(""+cfg.tabActive+"");
|
||||
} else if(count == 2) {
|
||||
$tabs.eq(0).css("left", 0);
|
||||
$tabs.eq(1).css("right", 0);
|
||||
$tabs.removeClass(""+cfg.tabActive+"");
|
||||
$tabs.eq(idx).addClass(""+cfg.tabActive+"");
|
||||
} else if(count >= 3) {
|
||||
tab_position(idx);
|
||||
}
|
||||
}
|
||||
|
||||
init();
|
||||
@ -161,21 +73,84 @@
|
||||
transitionEnd: cfg.transitionEnd
|
||||
});
|
||||
|
||||
$(window).on("resize", function() {
|
||||
$("#"+cfg.tabWrap).remove();
|
||||
$tab = null;
|
||||
|
||||
init();
|
||||
});
|
||||
|
||||
if(count > 0 && mySwipe) {
|
||||
$btns.on("click", function() {
|
||||
if($(this).parent().hasClass(""+cfg.tabActive+""))
|
||||
return false;
|
||||
if($(this).hasClass("mli_next")) {
|
||||
idx = (idx + 1) % count;
|
||||
} else {
|
||||
idx = (idx - 1);
|
||||
if(idx == -1)
|
||||
idx = count - 1;
|
||||
}
|
||||
|
||||
idx = $btns.index($(this));
|
||||
mySwipe.slide(idx);
|
||||
});
|
||||
}
|
||||
}
|
||||
}(jQuery));
|
||||
|
||||
(function($) {
|
||||
$.fn.bannerSlide = function(option)
|
||||
{
|
||||
var cfg = {
|
||||
wrap: ".slide-wrap",
|
||||
slides: ".slide-wrap > li",
|
||||
buttons: ".silde_btn > button",
|
||||
btnActive: "bn_sl",
|
||||
startSlide: 0,
|
||||
auto: 0,
|
||||
continuous: true,
|
||||
disableScroll: false,
|
||||
stopPropagation: false,
|
||||
callback: function(index, element) {
|
||||
button_change(index);
|
||||
},
|
||||
transitionEnd: function(index, element) {
|
||||
idx = index;
|
||||
}
|
||||
};
|
||||
|
||||
if(typeof option == "object")
|
||||
cfg = $.extend( cfg, option );
|
||||
|
||||
var $wrap = this.find(""+cfg.wrap+"");
|
||||
var $slides = this.find(""+cfg.slides+"");
|
||||
var $btns = this.find(""+cfg.buttons+"");
|
||||
|
||||
var idx = cfg.startSlide;
|
||||
var count = $slides.size();
|
||||
var width, outerW;
|
||||
|
||||
if(count < 2)
|
||||
return;
|
||||
|
||||
function button_change(idx)
|
||||
{
|
||||
if(count < 2)
|
||||
return;
|
||||
|
||||
$btns.removeClass(cfg.btnActive)
|
||||
.eq(idx).addClass(cfg.btnActive);
|
||||
}
|
||||
|
||||
window.bnSwipe = Swipe(this[0], {
|
||||
startSlide: cfg.startSlide,
|
||||
auto: cfg.auto,
|
||||
continuous: cfg.continuous,
|
||||
disableScroll: cfg.disableScroll,
|
||||
stopPropagation: cfg.stopPropagation,
|
||||
callback: cfg.callback,
|
||||
transitionEnd: cfg.transitionEnd
|
||||
});
|
||||
|
||||
if(count > 0 && bnSwipe) {
|
||||
$btns.on("click", function() {
|
||||
if($(this).hasClass(""+cfg.btnActive+""))
|
||||
return false;
|
||||
|
||||
idx = $btns.index($(this));
|
||||
bnSwipe.slide(idx);
|
||||
});
|
||||
}
|
||||
}
|
||||
}(jQuery));
|
||||
Reference in New Issue
Block a user