게시판 목록을 아래로 하나씩 롤링해주는 기능을 적용할 수 있어요.
자세히 알아보기
메인 게시판 목록에 적용하기
- 스마트디자인 편집창에서 좌측 하단에서 [화면추가]를 선택해 주세요.
- 게시판 롤링 관련 css, js 파일을 추가해 주세요. (css, js소스는 아래에 있어요)
- 하단 소스를 활용하여 css, js 파일을 만든 후 쇼핑몰 메인(index.html)에서 게시판 영역을 클릭해 해당 소스로 이동해 주세요.
- 아래 이미지의 2번과 같이 소스를 추가해 주세요.
- 주황색 소스: 추가한 css, js 파일을 로드 시켜줘요.
- 파란색 소스: js가 적용되도록 id값을 부여해줘요.
<div id="boardArea"><!--@css(/css/module/layout/boardVerSlide.css)--><!--@js(/js/module/layout/boardVerSlide.js)--><div id="boardVerticalSlide_1" module="board_listpackage_5">
CSS 파일 - [/css/module/layout/boardVerSlide.css]
/*
메인 > 자유 게시판 롤링
*/
.boardVerSlideArea { overflow:hidden; position:relative; }
.boardVerSlideArea .list { position:absolute; left:0px; width:100%; }
JS 파일 - [/js/module/layout/boardVerSlide.js]
/*
게시판 롤링
*/
$.fn.boardVerSlide = function (settings) {
settings = $.extend({
view : 5,
direction : 'up',
delay : 5000
}, settings);
var option = [];
option = $.extend({}, $.fn.boardVerSlide.defaults, settings);
return this.each(function () {
$.fn.extend(this, boardVerSlide);
this.wrap = $(this);
this.option = option;
this.direction = this.option.direction;
this.delay = this.option.delay;
this.view = this.option.view;
this.init();
});
};
var boardVerSlide = {
init : function(){
var direction = this.direction;
var delay = this.delay;
var table = this.wrap.find('table');
var tbody = table.find('> tbody');
var view = this.view;
var tableHeight = table.outerHeight();
var trLength = tbody.find('> tr').length;
var trHeight = tbody.find('> tr').outerHeight();
var boardVerSlideAreaHeight = trHeight * view;
table.wrap('<div class="boardVerSlideArea" style="height:'+ boardVerSlideAreaHeight +'px;" />');
table.wrap('<div class="list" />');
var boardVerSlideArea = this.wrap.find('.boardVerSlideArea');
var list = this.wrap.find('.list');
table.find('caption').remove();
table.find('thead').remove();
if ($.browser.webkit) {
var tdBorderBottom = parseInt(tbody.find('tr > td').css('border-bottom-width'));
var padddingBottom = (view * tdBorderBottom) + 1;
boardVerSlideArea.css({'paddingBottom': padddingBottom + 'px'});
}
function action() {
switch(direction){
case "up":
var item = tbody.find('> tr:first-child');
var itemClone = item.clone();
tbody.append(itemClone);
if ($.browser.opera || $.browser.webkit) {
list.css({'marginTop':'-1px'});
}
list.css({'top':0}).animate({'top': '-' + trHeight +'px'}, function(){
list.css({'top': 0});
item.remove();
});
break;
case "down":
var item = tbody.find('> tr:last-child');
var itemClone = item.clone();
tbody.prepend(itemClone);
list.css({'bottom':0}).animate({'bottom': '-' + trHeight +'px'}, function(){
list.css({'bottom': 0});
item.remove();
});
break;
}
}
var timer;
var timerStart = function(){
timer = setInterval(function(){
action();
},delay );
}
timerStart();
this.wrap.mouseenter(function(){
clearTimeout(timer);
});
this.wrap.mouseleave(function(){
timerStart();
});
}
}
$(function(){
/*
메인 > 자유 게시판 롤링 옵션 설정
- direction : up(위로)
- delay : 타이머(기본 5초 == 5000)
- view : 보여질 개수
*/
$("#boardVerticalSlide_1").boardVerSlide({
direction : 'up',
delay : 3000,
view : 5
});
});
롤링 옵션 설정 변경하기
boardVerSlide.js 에서 롤링 옵션 설정 부분을 변경하면 롤링되는 시간과 보여지는 아이템 개수를 수정할 수 있어요.
이 때, view :5 의 숫자와 게시판 모듈의 $count = 5 변수의 숫자가 동일해야 해요.
JS 파일 - boardVerSlide.js
#상단생략
$(function(){
/*
메인 > 자유 게시판 롤링 옵션 설정
- direction : up(위로)
- delay : 타이머(기본 5초 == 5000)
- view : 보여질 개수
*/
$("#boardVerticalSlide_2").boardVerSlide({
direction : 'up',
delay : 3000,
view : 5
});
});
html 파일 - index.html
#
상단생략
<tbody module="board_list_5">
<!--
$count = 5
$main_list = yes
$subject_cut = 25
$main_list_reply_view = no
-->
<tr>
다수의 게시판에 활용하기
롤링 스크립트를 다수의 게시판에 활용하는 방법이에요. boardVerSlide.js 의 아래 소스 부분을 복사해서 추가로 붙여넣어 주세요.
붙여넣은 소스에서 #boardVerSlide_1 이 값을 #boardVerSlide_2 또는 #boardVerSlide_3으로 변경해주세요.
JS 파일 - boardVerSlide.js
... 생략
/* ***** 복사 ***** */
$(function(){
/*
메인 > 자유 게시판 롤링 옵션 설정
- direction : up(위로)
- delay : 타이머(기본 5초 == 5000)
- view : 보여질 개수
*/
$("#boardVerticalSlide_1").boardVerSlide({
direction : 'up',
delay : 3000,
view : 5
});
}); /* ***** 복사 ***** */
/* ***** 붙여넣기 ***** */
$(function(){
/*
메인 > 자유 게시판 롤링 옵션 설정
- direction : up(위로)
- delay : 타이머(기본 5초 == 5000)
- view : 보여질 개수
*/
$("#boardVerticalSlide_2").boardVerSlide({
direction : 'up',
delay : 3000,
view : 5
});
});
롤링 효과를 적용하고 싶은 게시판 모듈에 추가한 id값을 넣어 주세요.
이와 같이 소스를 추가하면 2개의 게시판 목록에 롤링 효과가 적용되어요.
<div id="boardArea">
<!--@css(/css/module/layout/boardVerSlide.css)-->
<!--@js(/js/module/layout/boardVerSlide.js)-->
<div id="boardVerticalSlide_2" module="board_listpackage_5">