비동기 사용시 리스트 배경색 넣기
관련링크
본문
뷰페이지에 리스트 스킨을 사용하여 작업하고 있습니다.
반 나눠서 왼쪽엔 리스트 오른쪽엔 뷰페이지를 보여주는데
오른쪽 뷰페이지는 왼쪽에 제목 을 누르면 ajax로 불러 와 집니다
여기서 제가 하고싶은건 현재 보여지고 있는 게시글을
왼쪽 리스트에 배경색을 넣어 주고 싶습니다.
위쪽 ajax 쪽에 CSS코드를 넣으면 될까 싶긴합니다
혹시 몰라서 링크도 첨부하였습니다
list2.skin.php
<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
// 선택옵션으로 인해 셀합치기가 가변적으로 변함
$colspan = 5;
if ($is_checkbox) $colspan++;
if ($is_good) $colspan++;
if ($is_nogood) $colspan++;
// add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨
add_stylesheet('<link rel="stylesheet" href="'.$board_skin_url.'/style.css">', 0);
?>
<!-- 게시판 목록 시작 { -->
<div id="bo_list" style="width:<?php echo $width; ?>">
<!-- 게시판 카테고리 시작 { -->
<?php if ($is_category) { ?>
<nav id="bo_cate">
<h2><?php echo $board['bo_subject'] ?> 카테고리</h2>
<ul id="bo_cate_ul">
<?php echo $category_option ?>
</ul>
</nav>
<?php } ?>
<!-- } 게시판 카테고리 끝 -->
<form name="fboardlist" id="fboardlist" action="<?php echo G5_BBS_URL; ?>/board_list_update.php" onsubmit="return fboardlist_submit(this);" method="post">
<input type="hidden" name="bo_table" value="<?php echo $bo_table ?>">
<input type="hidden" name="sfl" value="<?php echo $sfl ?>">
<input type="hidden" name="stx" value="<?php echo $stx ?>">
<input type="hidden" name="spt" value="<?php echo $spt ?>">
<input type="hidden" name="sca" value="<?php echo $sca ?>">
<input type="hidden" name="sst" value="<?php echo $sst ?>">
<input type="hidden" name="sod" value="<?php echo $sod ?>">
<input type="hidden" name="page" value="<?php echo $page ?>">
<input type="hidden" name="sw" value="">
<!-- 게시판 페이지 정보 및 버튼 시작 { -->
<div id="bo_btn_top">
<div id="bo_list_total">
<span>Total <?php echo number_format($total_count) ?>건</span>
<?php echo $page ?> 페이지
</div>
<!--<ul class="btn_bo_user">
<?php if ($admin_href) { ?><li><a href="<?php echo $admin_href ?>" class="btn_admin btn" title="관리자"><i class="fa fa-cog fa-spin fa-fw"></i><span class="sound_only">관리자</span></a></li><?php } ?>
<?php if ($rss_href) { ?><li><a href="<?php echo $rss_href ?>" class="btn_b01 btn" title="RSS"><i class="fa fa-rss" aria-hidden="true"></i><span class="sound_only">RSS</span></a></li><?php } ?>
<li>
<button type="button" class="btn_bo_sch btn_b01 btn" title="게시판 검색"><i class="fa fa-search" aria-hidden="true"></i><span class="sound_only">게시판 검색</span></button>
</li>
<li><a href="<?php echo $list_href ?>" class="btn_b01 btn" title="목록"><i class="fa fa-list" aria-hidden="true"></i><span class="sound_only">목록</span></a></li>
<?php if ($reply_href) { ?><li><a href="<?php echo $reply_href ?>" class="btn_b01 btn" title="답변"><i class="fa fa-reply" aria-hidden="true"></i><span class="sound_only">답변</span></a></li><?php } ?>
<?php if ($scrap_href) { ?><li><a href="<?php echo $scrap_href ?>" class="btn_b01 btn" title="스크랩"><i class="fa fa-bookmark" aria-hidden="true"></i><span class="sound_only">스크랩</span></a></li><?php } ?>
<?php if ($write_href) { ?><li><a href="<?php echo $write_href ?>" class="btn_b01 btn" title="글쓰기"><i class="fa fa-pencil" aria-hidden="true"></i><span class="sound_only">글쓰기</span></a></li><?php } ?>
<?php if ($is_admin == 'super' || $is_auth) { ?>
<li>
<button type="button" class="btn_more_opt is_list_btn btn_b01 btn" title="게시판 리스트 옵션"><i class="fa fa-ellipsis-v" aria-hidden="true"></i><span class="sound_only">게시판 리스트 옵션</span></button>
<?php if ($is_checkbox) { ?>
<ul class="more_opt is_list_btn">
<li><button type="submit" name="btn_submit" value="선택삭제" onclick="document.pressed=this.value"><i class="fa fa-trash-o" aria-hidden="true"></i> 선택삭제</button></li>
<li><button type="submit" name="btn_submit" value="선택복사" onclick="document.pressed=this.value"><i class="fa fa-files-o" aria-hidden="true"></i> 선택복사</button></li>
<li><button type="submit" name="btn_submit" value="선택이동" onclick="document.pressed=this.value"><i class="fa fa-arrows" aria-hidden="true"></i> 선택이동</button></li>
</ul>
<?php } ?>
</li>
<?php } ?>
</ul>-->
</div>
<!-- } 게시판 페이지 정보 및 버튼 끝 -->
<!-- 반반 추가 -->
<div class="banban">
<!-- 반반 추가 아래 스타일추가
style="float:left;width:50%;max-width:50%;overflow:hidden;
-->
<div class="tbl_head01 tbl_wrap" style="float:left;width:25%;max-width:25%;overflow:hidden;height:1100px;">
<table>
<caption><?php echo $board['bo_subject'] ?> 목록</caption>
<thead>
<tr>
<?php if ($is_checkbox) { ?>
<th scope="col" class="all_chk chk_box">
<input type="checkbox" id="chkall" onclick="if (this.checked) all_checked(true); else all_checked(false);" class="selec_chk">
<label for="chkall">
<span></span>
<b class="sound_only">현재 페이지 게시물 전체선택</b>
</label>
</th>
<?php } ?>
<th scope="col">분류</th>
<th scope="col">제목</th>
</tr>
</thead>
<tbody>
<?php
for ($i=0; $i<count($list); $i++) {
if ($i%2==0) $lt_class = "even";
else $lt_class = "";
if ($wr_id == $list[$i]['wr_id'])
$stile = "style = 'background : #ffeb94'";
else
$stile = "";
?>
<tr class="<?php if ($list[$i]['is_notice']) echo "bo_notice"; ?> <?php echo $lt_class ?>" <?php echo $stile?>>
<?php if ($is_checkbox) { ?>
<td class="td_chk chk_box">
<input type="checkbox" name="chk_wr_id[]" value="<?php echo $list[$i]['wr_id'] ?>" id="chk_wr_id_<?php echo $i ?>" class="selec_chk">
<label for="chk_wr_id_<?php echo $i ?>">
<span></span>
<b class="sound_only"><?php echo $list[$i]['subject'] ?></b>
</label>
</td>
<?php } ?>
<!--<td class="td_num2">
<?php
if ($list[$i]['is_notice']) // 공지사항
echo '<strong class="notice_icon">공지</strong>';
else if ($wr_id == $list[$i]['wr_id'])
echo "<span class=\"bo_current\">열람중</span>";
else
echo $list[$i]['num'];
?>
</td>-->
<td class="td_cate" >
<?php
if ($is_category && $list[$i]['ca_name']) {
?>
<div class="bo_cate_link"><?php echo $list[$i]['ca_name'] ?></div>
<?php } ?>
</td>
<td class="td_subject" style="padding-left:<?php echo $list[$i]['reply'] ? (strlen($list[$i]['wr_reply'])*10) : '0'; ?>px">
<a class="bo_tit" data-id="<?php echo $list[$i]['wr_id']; ?>" data-table="<?php echo $bo_table; ?>">
<?php echo $list[$i]['icon_reply'] ?>
<?php
if (isset($list[$i]['icon_secret'])) echo rtrim($list[$i]['icon_secret']);
?>
<?php echo $list[$i]['subject'] ?>
<?php
if ($list[$i]['icon_new']) echo "<span class=\"new_icon\">N<span class=\"sound_only\">새글</span></span>";
// if ($list[$i]['file']['count']) { echo '<'.$list[$i]['file']['count'].'>'; }
if (isset($list[$i]['icon_hot'])) echo rtrim($list[$i]['icon_hot']);
if (isset($list[$i]['icon_file'])) echo rtrim($list[$i]['icon_file']);
if (isset($list[$i]['icon_link'])) echo rtrim($list[$i]['icon_link']);
?>
<?php if ($list[$i]['comment_cnt']) { ?><span class="sound_only">댓글</span><span class="cnt_cmt"><?php echo $list[$i]['wr_comment']; ?></span><span class="sound_only">개</span><?php } ?>
</a>
</td>
</tr>
<?php } ?>
<?php if (count($list) == 0) { echo '<tr><td colspan="'.$colspan.'" class="empty_table">게시물이 없습니다.</td></tr>'; } ?>
</tbody>
</table>
<!-- 페이지 -->
<?php echo $write_pages; ?>
<!-- 페이지 -->
</div>
<!-- 반반 추가 -->
<div class="view_content">
<?php include_once(G5_BBS_PATH."/view.php");?> <!-- 기본 화면 표시 -->
</div>
</div>
<script>
$(document).on('click', '.bo_tit', function(e){
$.ajax({
url:'<?php echo $board_skin_url?>/view_ajax.php',
type:'POST',
data:'bo_table='+$(this).attr('data-table')+'&wr_id='+$(this).attr('data-id')+'&page='+<?php echo $page?>,
dataType:'html',
success : function(data){
$('.view_content').html(data);
}
});
});
</script>
<script>
function listAjax(no){
$.ajax({
type: "POST",
url: "<?=$board_skin_url?>/ajax_list.php",
data: "bo_table=<?=$bo_table?>&page="+ no + "&sop=<?=$sop?>&stx=<?=$stx?>&sca=<?=$sca?>&sfl=<?=$sfl?>&wr_id=<?=$wr_id?>",
cache: false,
success: function(data){
$('.tbl_head01.tbl_wrap').html(data);
}
});
}
</script>
<!-- 반반 추가 -->
view_ajax.php
<?php
include_once('../../../../../common.php');
include_once('../common.php');
$bo_table = $_POST["bo_table"];
$wr_id = $_POST["wr_id"];
$page = $_POST['page'];
$sop = $_POST['sop'];
$stx = $_POST['stx'];
$sca = $_POST['sca'];
$sfl = $_POST['sfl'];
$view_sql="select * from g5_write_".$bo_table." where wr_id=".$wr_id;
$view_row=sql_fetch($view_sql);
$ca_name = $view_row['ca_name'];
?>
<?php include_once(G5_BBS_PATH."/view.php");?>
답변 2
$(document).on('click', '.bo_tit', function(e){
$(".td_subject").css("background","");//기존에 클릭되었던 제목 배경 지우고
$(this).closest(".td_subject").css("background","#c80000");//현재 제목에 배경 추가
댓글 감사합니다 !
ajax로 페이지를 넘어갔다 오면 다시 초기화 상태가 되는데 혹시 살릴 방법이 있을까요..?
ajax_list.php에서
리스트 나오는 부분에
<?php if($wr_id == $list[$i]['wr_id']) {
// 배경 색상 추가
}
?>
이런 식으로 추가하면 될것 같습니다
답변을 작성하시기 전에 로그인 해주세요.
