그누보드 - 최근게시물 ajax 로 불러오기

최근게시물 ajax 로 불러오기 정보

최근게시물 ajax 로 불러오기

첨부파일

latest.ajax.php (1.5K) 341회 다운로드 2012-01-05 11:30:30

본문

* 최신글을 출력할 곳에 아래 구조형태로 HTML을 넣으시고 CSS로 꾸미시면 됩니다.

<ul class="bbs">

<li class="current"><a href="#" class="freeboard">자유게시판</a></li>

<li><a href="#" class="notice">공지사항</a></li>

</ul>

최신글 로딩 시 ul.bbs > li 구조 내에 ul > li 구조가 다시 생성됩니다.

이는 표준화작업 중 구조화(순차적 접근)에 맞게 설계를 한 것입니다.

CSS를 다룰 줄 아시는 분들께서는 크게 문제될 것은 없지만, 조금 다루기 힘드실 수 있습니다.

참고하실 수 있는 탭형 CSS를 추가 해드립니다.

.bbs{position:relative; float:left; width:647px; margin:22px 12px 0 0; border-bottom:1px solid #e5e5e5;}

.bbs li{float:left;}

.bbs li a{display:block;}

.bbs li.last-child{background:none;}

.bbs li a:hover,

.bbs li.current a{color:#59626e;}

.bbs ul{position:absolute; top:40px; left:0; padding:0 8px 0 0;}

.bbs ul li{width:295px; margin:0 0 0 13px; padding:0 0 0 8px; letter-spacing:-1px; line-height:1.85em;}

.bbs ul li span{margin:0 5px 0 0; font-weight:normal; color:#a2b068; font-size:11px; font-family:dotum;}

.bbs li.current ul a,

.bbs li ul a{display:inline; padding:0; font-weight:normal; color:#999; font-size:11px; font-family:dotum; background:none; border:0;}

아래 스크립트는 불러올 페이지 아무데나 넣어두셔도 됩니다~

<script type="text/javascript">

//<![CDATA[

$(function() {

$('ul.bbs > li > a').click(function() {

$(this).parent().css('background', 'url(/images/load_black.gif) 0 8px no-repeat'); //탭에 로딩이미지 표시

getLatest($(this));

return false;

});

var getLatest = function($this) {

$.ajax({

async: false,

cache: false,

type: "POST",

dataType: 'json',

url: "<?php echo $g4['path'];?>/latest.ajax.php",

data: {

'bo_table': $this.attr('className'), //게시판ID

'sst': 'wr_datetime', //order by $sst $sod

'sod': 'desc',

'count': 8, //limit

'subject_cut': 60, //제목길이

success: function(data) {

if(data == 'Fail') {

alert('요청 오류!!');

$this.parent().css('background', 'none');

return false;

}

if(data != null) {

$('ul.bbs > li > ul').remove();

var list_li = '';

$.each(data, function(i, v) {

idNum = i + 1;

var img = '';

if(i == 0) $this.parent().append('<ul></ul>');

list_li += '<li id="bbs_'+ idNum +'"><span class="date">[ ' + v.wr_datetime + ' ]</span><a href="/bbs/board.php?bo_table=' + $this.attr('className') + '&wr_id=' + v.wr_id + '">' + v.subject + '</a></li>';

});

$('ul.bbs > li > ul').append(list_li);

$('ul.bbs > li').removeClass('current');

$this.parent().addClass('current'); //클릭한 탭 li에 current클래스 추가

} else {

alert('요청하신 데이터가 존재하지 않습니다.');

}

$this.parent().css('background', 'none'); //로딩 완료 후 로딩이미지 제거

}

});

};

getLatest($('ul.bbs > li:first > a')); //페이지 로딩시 첫번째 탭 자동으로 로드

//]]>

</script>

기타 질문이나 버그는 댓글로 남겨주세요~

댓글 14개

cshop 자기소개 아이디로 검색 전체게시물 회원게시물

자기소개 아이디로 검색 전체게시물 회원게시물

12.01.05 14:06:49

와!!! 감사합니다.

저는 제가 사용하기에 그누보드의 기능이 너무 많아서 쇼핑카트 제품후기 등록용으로만 아주 간단한 php 게시판을 직접 만들어 별도로 설치했습니다. 그 게시판도 tutorial 에 jQuery 로 출력물을 보여주게 되어 있어서 전체적인 느낌이 동일하지 않아 고민중 이었는데, 이 source를 적용을 하면 동일한 느낌이 나겠네요...

정말 감사합니다!!!!!!!!!!!!!!