최근게시물 ajax 로 불러오기
* 최신글을 출력할 곳에 아래 구조형태로 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
13년 전
와!!! 감사합니다.
저는 제가 사용하기에 그누보드의 기능이 너무 많아서 쇼핑카트 제품후기 등록용으로만 아주 간단한 php 게시판을 직접 만들어 별도로 설치했습니다. 그 게시판도 tutorial 에 jQuery 로 출력물을 보여주게 되어 있어서 전체적인 느낌이 동일하지 않아 고민중 이었는데, 이 source를 적용을 하면 동일한 느낌이 나겠네요...
정말 감사합니다!!!!!!!!!!!!!!
저는 제가 사용하기에 그누보드의 기능이 너무 많아서 쇼핑카트 제품후기 등록용으로만 아주 간단한 php 게시판을 직접 만들어 별도로 설치했습니다. 그 게시판도 tutorial 에 jQuery 로 출력물을 보여주게 되어 있어서 전체적인 느낌이 동일하지 않아 고민중 이었는데, 이 source를 적용을 하면 동일한 느낌이 나겠네요...
정말 감사합니다!!!!!!!!!!!!!!
June44
13년 전
latest.ajax.php 파일을 응용하시면 게시글을 다양하게 변형하여 뽑으실 수 있습니다~
13년 전
추천합니다~ 감사합니다.
June44
13년 전
추천감사합니다^^ 잘 사용하시길~!
13년 전
유용한 정보감사합니다
제네시스옥션
13년 전
좋은 정보 감사합니다.
아무개724
13년 전
감사합니다. 잘 쓸게요
13년 전
전 잘 안되는데 시간 나시면 조언 부탁드려요. erm00@nate.com
12년 전
오오 직접 답변해주시다니 정말 감사해욧 ^^;;;;
June44
12년 전
^^ 도움이 필요하시면 종종 질문 하셔도됩니다~
10년 전
첨부파일 디폴트,
스크립트 헤드
<ul class="게시판아이디">
<li class="current"><a href="#" class="최신게시판 스킨">자유게시판</a></li>
</ul>
적용방법 부탁드립니다 ㅠ
스크립트 헤드
<ul class="게시판아이디">
<li class="current"><a href="#" class="최신게시판 스킨">자유게시판</a></li>
</ul>
적용방법 부탁드립니다 ㅠ
10년 전
좋은 팁 고맙습니다. 근데,
요거 적용법이 어떻게 되나요? 초보자가 따라하기엔...... ㅜㅜ
latest.ajax.php 파일은 어디에 넣고, 본문에 적어주신 소스는 또 어디에 넣어야 하는지?
요거 적용법이 어떻게 되나요? 초보자가 따라하기엔...... ㅜㅜ
latest.ajax.php 파일은 어디에 넣고, 본문에 적어주신 소스는 또 어디에 넣어야 하는지?
June44
10년 전
latest.ajax.php 파일은 config.php 파일이 있는 폴더에 넣으시면 됩니다.
10년 전
설명 고맙습니다. 주말 잘 보내세요. ^^
게시판 목록
그누4 팁자료실
그누보드4와 관련된 팁을 여러분들과 함께 공유하세요.
나누면 즐거움이 커집니다.
나누면 즐거움이 커집니다.
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 3169 | 12년 전 | 11447 | ||
| 3168 | 12년 전 | 8361 | ||
| 3167 | 12년 전 | 9517 | ||
| 3166 | 12년 전 | 8616 | ||
| 3165 | 12년 전 | 3847 | ||
| 3164 | 12년 전 | 5777 | ||
| 3163 | 12년 전 | 5483 | ||
| 3162 | 12년 전 | 7510 | ||
| 3161 |
다케미카코
|
12년 전 | 5655 | |
| 3160 | 12년 전 | 5977 | ||
| 3159 | 12년 전 | 5819 | ||
| 3158 | 12년 전 | 4210 | ||
| 3157 |
izabella
|
12년 전 | 8329 | |
| 3156 | 12년 전 | 6297 | ||
| 3155 | 12년 전 | 3780 | ||
| 3154 | 12년 전 | 8912 | ||
| 3153 | 12년 전 | 3590 | ||
| 3152 |
다케미카코
|
12년 전 | 6557 | |
| 3151 | 12년 전 | 5426 | ||
| 3150 |
 jsPark700 |
12년 전 | 4800 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기