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-25 14:47:55 +09:00
parent 75cbbe6c0e
commit 13925904f2
3 changed files with 80 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
js/shop.mobile.list.js Normal file
View File

@ -0,0 +1,61 @@
(function($) {
$.fn.itemList = function(element, clear)
{
var cfg = {
element: "li.sct_li",
clear: "sct_clear"
};
if(typeof element == "object")
cfg = $.extend( cfg, element );
else {
if(element)
cfg = $.extend( cfg, { element: element } );
if(clear)
cfg = $.extend( cfg, { clear: clear } );
}
var $element = this.find(cfg.element);
var $this = this;
function item_arrange()
{
var $el = $element.filter(":first");
var padding = 0;
if($el.data("padding-right") == undefined) {
padding = parseInt($el.css("padding-right"));
$el.data("padding-right", padding);
}
else
padding = $el.data("padding-right");
$element.css("padding-left", 0).css("padding-right", padding);
$element.filter("."+cfg.clear).removeClass(cfg.clear);
var wrap_width = parseInt($this.width());
var item_width = parseInt($el.outerWidth());
var line_count = parseInt((wrap_width + padding) / item_width);
if(line_count == 0)
return;
var space = parseInt(wrap_width % item_width);
if((space + padding) < item_width) {
var new_padding = parseInt((space + padding) / (line_count * 2));
if(new_padding > padding)
$element.css("padding-left", new_padding+"px").css("padding-right", new_padding);
}
$element.filter(":nth-child("+line_count+"n)").css("padding-right", 0);
$element.filter(":nth-child("+line_count+"n+1)").addClass(cfg.clear);
}
item_arrange();
$(window).resize(function() {
item_arrange();
});
}
}(jQuery));

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

@ -3,15 +3,16 @@ 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>
<!-- 상품진열 10 시작 { -->
<?php
for ($i=0; $row=sql_fetch_array($result); $i++) {
if ($i == 0) {
if ($this->css) {
echo "<ul class=\"{$this->css}\">\n";
echo "<ul id=\"sct_wrap\" class=\"{$this->css}\">\n";
} else {
echo "<ul class=\"sct sct_10\">\n";
echo "<ul id=\"sct_wrap\" class=\"sct sct_10\">\n";
}
}
@ -72,43 +73,6 @@ if($i == 0) echo "<p class=\"sct_noitem\">등록된 상품이 없습니다.</p>\
<script>
$(function() {
set_list_margin();
$("#sct_wrap").itemList("li.sct_li", "sct_clear");
});
$(window).resize(function() {
set_list_margin();
});
function set_list_margin()
{
var li_padding = 0;
if($("li.sct_li:first").data("padding-right") == undefined) {
li_padding = parseInt($("li.sct_li:first").css("padding-right"));
$("li.sct_li:first").data("padding-right", li_padding);
}
else
li_padding = $("li.sct_li:first").data("padding-right");
$("li.sct_li").css("padding-left", 0).css("padding-right", li_padding);
$("li.sct_clear").removeClass("sct_clear");
var ul_width = parseInt($("ul.sct").width());
var li_width = parseInt($("li.sct_li:first").outerWidth());
var li_count = parseInt((ul_width + li_padding) / li_width);
if(li_count == 0)
return;
var space = parseInt(ul_width % li_width);
if((space + li_padding) < li_width) {
var new_padding = parseInt((space + li_padding) / (li_count * 2));
if(new_padding > li_padding)
$("li.sct_li").css("padding-left", new_padding+"px").css("padding-right", new_padding);
}
$("li.sct_li:nth-child("+li_count+"n)").css("padding-right", 0);
$("li.sct_li:nth-child("+li_count+"n+1)").addClass("sct_clear");
}
</script>

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

@ -3,27 +3,20 @@ 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>
<!-- 상품진열 10 시작 { -->
<?php
for ($i=1; $row=sql_fetch_array($result); $i++) {
if ($this->list_mod >= 2) { // 1줄 이미지 : 2개 이상
if ($i%$this->list_mod == 0) $sct_last = ' sct_last'; // 줄 마지막
else if ($i%$this->list_mod == 1) $sct_last = ' sct_clear'; // 줄 첫번째
else $sct_last = '';
} else { // 1줄 이미지 : 1개
$sct_last = ' sct_clear';
}
if ($i == 1) {
for ($i=0; $row=sql_fetch_array($result); $i++) {
if ($i == 0) {
if ($this->css) {
echo "<ul class=\"{$this->css}\">\n";
echo "<ul class=\"sct_wrap {$this->css}\">\n";
} else {
echo "<ul class=\"sct sct_10\">\n";
echo "<ul class=\"sct_wrap sct sct_10\">\n";
}
}
echo "<li class=\"sct_li{$sct_last}\">\n";
echo "<li class=\"sct_li\">\n";
if ($this->href) {
echo "<a href=\"{$this->href}{$row['it_id']}\" class=\"sct_a\">\n";
@ -72,8 +65,14 @@ for ($i=1; $row=sql_fetch_array($result); $i++) {
echo "</li>\n";
}
if ($i > 1) echo "</ul>\n";
if ($i > 0) echo "</ul>\n";
if($i == 1) echo "<p class=\"sct_noitem\">등록된 상품이 없습니다.</p>\n";
if($i == 0) echo "<p class=\"sct_noitem\">등록된 상품이 없습니다.</p>\n";
?>
<!-- } 상품진열 10 끝 -->
<!-- } 상품진열 10 끝 -->
<script>
$(function() {
$(".sct_wrap").itemList("li.sct_li", "sct_clear");
});
</script>