마우스오버 이벤트를 넣고싶어요.. 정보
마우스오버 이벤트를 넣고싶어요..본문
마우스 클릭대신 제목부분 넘어갈때( 이미지 )
마우스오버를 하면 바로 볼수있었음합니다.
latest파일을 올려봅니다 ( 그룹탭입니다 )
<style>
.tab_list{height:160px}
.tab_list ul{position:relative;margin:0;padding:0;border-bottom:1px solid #ccc;font-family:Tahoma, Sans-serif;font-size:12px;list-style:none;*zoom:1}
.tab_list ul:after{display:block;clear:both;content:""}
.tab_list li{float:left;margin-bottom:-1px}
.tab_list li a{float:left;position:relative;border:1px solid #eee;border-bottom-color:#ccc;background:#fafafa;color:#666;text-decoration:none}
.tab_list li a span{display:inline-block;padding:6px 23px 6px 23px;letter-spacing:-1px;cursor:pointer}
.tab_list li ul{display:none;position:absolute;top:40px;left:0;width:535px;margin:0;padding:0;border:0;list-style:none;*zoom:1}
.tab_list li ul:after{display:block;clear:both;content:""}
.tab_list li li{float:none;position:relative;margin:0 0 8px 8px;color:#999}
.tab_list li li a{float:none;margin:0;padding:0;border:0 !important;background:transparent;font-weight:normal;color:#333 !important;letter-spacing:normal;}
.tab_list li li a:hover,
.tab_list li li a:active,
.tab_list li li a:focus{color:#000 !important;text-decoration:none;}
.tab_list li li a.board{float:none;margin:0;padding:0;border:0 !important;background:transparent;font-size:11px;font-weight:normal;color:#999 !important;letter-spacing:normal;}
.tab_list li li a.board:hover,
.tab_list li li a.board:active,
.tab_list li li a.board:focus{color:#666 !important;text-decoration:none}
.tab_list li li a.commnet{float:none;margin:0;padding:0;border:0 !important;background:transparent;font-size:10px;font-weight:normal;color:#666 !important;letter-spacing:normal}
.tab_list li li a.commnet:hover,
.tab_list li li a.commnet:active,
.tab_list li li a.commnet:focus{color:#666 !important;text-decoration:underline}
.tab_list li li.more{font-family:돋움;font-size:11px;position:absolute;top:-30px;right:0;border:0 !important;background:transparent}
.tab_list li li span.datetime{font-family:돋움;font-size:11px;position:absolute;top:0px;right:0;border:0 !important;background:transparent}
.tab_list.m1 .m1 a,
.tab_list.m2 .m2 a,
.tab_list.m3 .m3 a,
.tab_list.m4 .m4 a,
.tab_list.m5 .m5 a,
.tab_list.m6 .m6 a{margin-top:-1px;border:1px solid #ccc;border-bottom:1px solid #fff;background:transparent;color:#333}
.tab_list.m1 .m1 a span,
.tab_list.m2 .m2 a span,
.tab_list.m3 .m3 a span,
.tab_list.m4 .m4 a span,
.tab_list.m5 .m5 a span,
.tab_list.m6 .m6 a span{padding-top:7px;font-weight:bold}
.tab_list.m1 .m1 ul,
.tab_list.m2 .m2 ul,
.tab_list.m3 .m3 ul,
.tab_list.m4 .m4 ul,
.tab_list.m5 .m5 ul,
.tab_list.m6 .m6 ul{display:block}
.tab_list.js_off{height:auto}
.tab_list.js_off ul{border:0}
.tab_list.js_off li{float:none;position:relative}
.tab_list.js_off li a{display:block;float:none;border:1px solid #eee !important;border-bottom-color:#ccc !important;background:#fafafa !important;font-weight:bold;color:#333}
.tab_list.js_off li ul{position:static;display:block;left:0;top:0;padding:5px 0}
.tab_list.js_off li li a{display:inline;border:0 !important;background:none !important;font-weight:normal}
.tab_list.js_off li li.more{top:7px;right:15px}
</style>
<div style="height:106px" class="tab_list m1">
<ul>
<?
for($m=0; $m<count($gr_id); $m++) {
$num = $m+1;
?>
<li class="m<?=$num?>">
<a href="#" jquery16408452460570924265="<?=$num?>">
<span><?=$gr[$m][gr_subject]?></span>
</a>
<ul>
<?
$empty_row = $rows - count($list[$m]);
$new_datetime = date("Y-m-d H:i:s", $g4[server_time] - (60*60*24)); // 24시간
for($n=0; $n<count($list[$m]); $n++) {
// new 표시 - 시작
$sql = "select count(wr_id) as cnt from $g4[write_prefix]{$list[$m][$n][bo_table]} where wr_datetime > '$new_datetime'";
$row = sql_fetch($sql);
if ($row[cnt]) {
$icon_new = " <img src='/images/new.gif' align=absmiddle>"; // new 아이콘
} else {
$icon_new = "";
}
// new 표시 - 끝
echo "<li>";
echo "<a class=\"board\" href=\"{$g4[bbs_path]}/board.php?bo_table={$list[$m][$n][bo_table]}\">[{$list[$m][$n][bo_subject]}] </a>";
echo "<div style=\"position:absolute; left:100px; top:0px; margin-left:0px; margin-top:0px \"><a href=\"{$list[$m][$n]['href']}\">{$list[$m][$n][subject]}</a>";
if (!$list[$m][$n]['comment_cnt'])
echo $icon_new."</div>";
if ($list[$m][$n]['comment_cnt'])
echo " <a class=\"commnet\" href=\"{$list[$m][$n]['comment_href']}\">{$list[$m][$n]['comment_cnt']}</a>".$icon_new."</div>";
echo "<span class=\"datetime\">{$list[$m][$n][datetime]}</span>";
/* 아이콘 사용시 본 주석을 삭제하고, 활성화 시켜주세요.
echo " " . $list[$m][$n]['icon_new'];
echo " " . $list[$m][$n]['icon_file'];
echo " " . $list[$m][$n]['icon_link'];
echo " " . $list[$m][$n]['icon_hot'];
echo " " . $list[$m][$n]['icon_secret'];
*/
echo "</li>";
}
for($l=0; $l<$empty_row; $l++) {
echo "<li> <a href='#'>".$gr[$m][gr_subject]."탭의 최신글이 더 없습니다.</a></li>";
}
?>
<li class="more"> <a href="<?=$g4[bbs_path]?>/group.php?gr_id=<?=$gr_id[$m]?>"><font color="#FFFFFF">.</font></a>
</li>
</ul>
</li>
<? } ?>
</ul>
</div>
<script type="text/javascript">
jQuery(function($){
var tab = $('.tab_list');
tab.removeClass('js_off');
tab.css('height', tab.find('>ul>li>ul:visible').height()+40);
function onSelectTab(){
var t = $(this);
var myClass = t.parent('li').attr('class');
t.parents('.tab_list:first').attr('class', 'tab_list '+myClass);
tab.css('height', t.next('ul').height()+40);
}
tab.find('>ul>li>a').click(onSelectTab).focus(onSelectTab);
});
</script>
--------------------------------------
이건 lib파일입니다.
<?
if (!defined("_GNUBOARD_")) exit;
function latest_tab_group($group="", $rows=10, $subject_len=40, $skin="latest_tab_group", $option="")
{
global $g4;
$ltg_path = $g4[path]."/skin/latest";
$ltg_skin_path = $ltg_path."/".$skin;
$gr_id = explode("|", $group);
$gr = array();
$list = array();
for($i=0; $i<count($gr_id); $i++) {
$gr[$i] = sql_fetch("select gr_subject from $g4[group_table] where gr_id = '$gr_id[$i]'");
$sql = " select bo_table from $g4[board_table] where gr_id='$gr_id[$i]'";
$result = sql_query($sql);
$cnt = 0;
for ($j=0; $row=sql_fetch_array($result); $j++) {
$tmp_board_table = $g4['write_prefix'] . $row[bo_table];
$sql2 = "select * from $tmp_board_table where wr_is_comment = 0 order by wr_num limit 0, $rows";
$result2 = sql_query($sql2);
for($k=0; $row2=sql_fetch_array($result2); $k++) {
$ar[$i][$cnt] = $row2[wr_datetime];
$bo = sql_fetch("select bo_table, bo_subject from $g4[board_table] where bo_table = '$row[bo_table]'");
$list[$i][$cnt] = get_list($row2, $bo, $ltg_skin_path, $subject_len);
$list[$i][$cnt][bo_subject] = $bo[bo_subject];
$list[$i][$cnt][bo_table] = $bo[bo_table];
$cnt = $cnt + 1;
}
}
array_multisort($ar[$i], SORT_DESC, $list[$i]);
if($cnt>$rows) array_splice($list[$i], $rows);
}
ob_start();
include_once("$ltg_skin_path/latest.skin.php");
$content = ob_get_contents();
ob_end_clean();
return $content;
}
?>
예를 들면 '그누보드4'에서 '지블로그'로 갈때 ( 제목만요 )
마우스오버를 하면 바로 볼수있었음합니다.
latest파일을 올려봅니다 ( 그룹탭입니다 )
<style>
.tab_list{height:160px}
.tab_list ul{position:relative;margin:0;padding:0;border-bottom:1px solid #ccc;font-family:Tahoma, Sans-serif;font-size:12px;list-style:none;*zoom:1}
.tab_list ul:after{display:block;clear:both;content:""}
.tab_list li{float:left;margin-bottom:-1px}
.tab_list li a{float:left;position:relative;border:1px solid #eee;border-bottom-color:#ccc;background:#fafafa;color:#666;text-decoration:none}
.tab_list li a span{display:inline-block;padding:6px 23px 6px 23px;letter-spacing:-1px;cursor:pointer}
.tab_list li ul{display:none;position:absolute;top:40px;left:0;width:535px;margin:0;padding:0;border:0;list-style:none;*zoom:1}
.tab_list li ul:after{display:block;clear:both;content:""}
.tab_list li li{float:none;position:relative;margin:0 0 8px 8px;color:#999}
.tab_list li li a{float:none;margin:0;padding:0;border:0 !important;background:transparent;font-weight:normal;color:#333 !important;letter-spacing:normal;}
.tab_list li li a:hover,
.tab_list li li a:active,
.tab_list li li a:focus{color:#000 !important;text-decoration:none;}
.tab_list li li a.board{float:none;margin:0;padding:0;border:0 !important;background:transparent;font-size:11px;font-weight:normal;color:#999 !important;letter-spacing:normal;}
.tab_list li li a.board:hover,
.tab_list li li a.board:active,
.tab_list li li a.board:focus{color:#666 !important;text-decoration:none}
.tab_list li li a.commnet{float:none;margin:0;padding:0;border:0 !important;background:transparent;font-size:10px;font-weight:normal;color:#666 !important;letter-spacing:normal}
.tab_list li li a.commnet:hover,
.tab_list li li a.commnet:active,
.tab_list li li a.commnet:focus{color:#666 !important;text-decoration:underline}
.tab_list li li.more{font-family:돋움;font-size:11px;position:absolute;top:-30px;right:0;border:0 !important;background:transparent}
.tab_list li li span.datetime{font-family:돋움;font-size:11px;position:absolute;top:0px;right:0;border:0 !important;background:transparent}
.tab_list.m1 .m1 a,
.tab_list.m2 .m2 a,
.tab_list.m3 .m3 a,
.tab_list.m4 .m4 a,
.tab_list.m5 .m5 a,
.tab_list.m6 .m6 a{margin-top:-1px;border:1px solid #ccc;border-bottom:1px solid #fff;background:transparent;color:#333}
.tab_list.m1 .m1 a span,
.tab_list.m2 .m2 a span,
.tab_list.m3 .m3 a span,
.tab_list.m4 .m4 a span,
.tab_list.m5 .m5 a span,
.tab_list.m6 .m6 a span{padding-top:7px;font-weight:bold}
.tab_list.m1 .m1 ul,
.tab_list.m2 .m2 ul,
.tab_list.m3 .m3 ul,
.tab_list.m4 .m4 ul,
.tab_list.m5 .m5 ul,
.tab_list.m6 .m6 ul{display:block}
.tab_list.js_off{height:auto}
.tab_list.js_off ul{border:0}
.tab_list.js_off li{float:none;position:relative}
.tab_list.js_off li a{display:block;float:none;border:1px solid #eee !important;border-bottom-color:#ccc !important;background:#fafafa !important;font-weight:bold;color:#333}
.tab_list.js_off li ul{position:static;display:block;left:0;top:0;padding:5px 0}
.tab_list.js_off li li a{display:inline;border:0 !important;background:none !important;font-weight:normal}
.tab_list.js_off li li.more{top:7px;right:15px}
</style>
<div style="height:106px" class="tab_list m1">
<ul>
<?
for($m=0; $m<count($gr_id); $m++) {
$num = $m+1;
?>
<li class="m<?=$num?>">
<a href="#" jquery16408452460570924265="<?=$num?>">
<span><?=$gr[$m][gr_subject]?></span>
</a>
<ul>
<?
$empty_row = $rows - count($list[$m]);
$new_datetime = date("Y-m-d H:i:s", $g4[server_time] - (60*60*24)); // 24시간
for($n=0; $n<count($list[$m]); $n++) {
// new 표시 - 시작
$sql = "select count(wr_id) as cnt from $g4[write_prefix]{$list[$m][$n][bo_table]} where wr_datetime > '$new_datetime'";
$row = sql_fetch($sql);
if ($row[cnt]) {
$icon_new = " <img src='/images/new.gif' align=absmiddle>"; // new 아이콘
} else {
$icon_new = "";
}
// new 표시 - 끝
echo "<li>";
echo "<a class=\"board\" href=\"{$g4[bbs_path]}/board.php?bo_table={$list[$m][$n][bo_table]}\">[{$list[$m][$n][bo_subject]}] </a>";
echo "<div style=\"position:absolute; left:100px; top:0px; margin-left:0px; margin-top:0px \"><a href=\"{$list[$m][$n]['href']}\">{$list[$m][$n][subject]}</a>";
if (!$list[$m][$n]['comment_cnt'])
echo $icon_new."</div>";
if ($list[$m][$n]['comment_cnt'])
echo " <a class=\"commnet\" href=\"{$list[$m][$n]['comment_href']}\">{$list[$m][$n]['comment_cnt']}</a>".$icon_new."</div>";
echo "<span class=\"datetime\">{$list[$m][$n][datetime]}</span>";
/* 아이콘 사용시 본 주석을 삭제하고, 활성화 시켜주세요.
echo " " . $list[$m][$n]['icon_new'];
echo " " . $list[$m][$n]['icon_file'];
echo " " . $list[$m][$n]['icon_link'];
echo " " . $list[$m][$n]['icon_hot'];
echo " " . $list[$m][$n]['icon_secret'];
*/
echo "</li>";
}
for($l=0; $l<$empty_row; $l++) {
echo "<li> <a href='#'>".$gr[$m][gr_subject]."탭의 최신글이 더 없습니다.</a></li>";
}
?>
<li class="more"> <a href="<?=$g4[bbs_path]?>/group.php?gr_id=<?=$gr_id[$m]?>"><font color="#FFFFFF">.</font></a>
</li>
</ul>
</li>
<? } ?>
</ul>
</div>
<script type="text/javascript">
jQuery(function($){
var tab = $('.tab_list');
tab.removeClass('js_off');
tab.css('height', tab.find('>ul>li>ul:visible').height()+40);
function onSelectTab(){
var t = $(this);
var myClass = t.parent('li').attr('class');
t.parents('.tab_list:first').attr('class', 'tab_list '+myClass);
tab.css('height', t.next('ul').height()+40);
}
tab.find('>ul>li>a').click(onSelectTab).focus(onSelectTab);
});
</script>
--------------------------------------
이건 lib파일입니다.
<?
if (!defined("_GNUBOARD_")) exit;
function latest_tab_group($group="", $rows=10, $subject_len=40, $skin="latest_tab_group", $option="")
{
global $g4;
$ltg_path = $g4[path]."/skin/latest";
$ltg_skin_path = $ltg_path."/".$skin;
$gr_id = explode("|", $group);
$gr = array();
$list = array();
for($i=0; $i<count($gr_id); $i++) {
$gr[$i] = sql_fetch("select gr_subject from $g4[group_table] where gr_id = '$gr_id[$i]'");
$sql = " select bo_table from $g4[board_table] where gr_id='$gr_id[$i]'";
$result = sql_query($sql);
$cnt = 0;
for ($j=0; $row=sql_fetch_array($result); $j++) {
$tmp_board_table = $g4['write_prefix'] . $row[bo_table];
$sql2 = "select * from $tmp_board_table where wr_is_comment = 0 order by wr_num limit 0, $rows";
$result2 = sql_query($sql2);
for($k=0; $row2=sql_fetch_array($result2); $k++) {
$ar[$i][$cnt] = $row2[wr_datetime];
$bo = sql_fetch("select bo_table, bo_subject from $g4[board_table] where bo_table = '$row[bo_table]'");
$list[$i][$cnt] = get_list($row2, $bo, $ltg_skin_path, $subject_len);
$list[$i][$cnt][bo_subject] = $bo[bo_subject];
$list[$i][$cnt][bo_table] = $bo[bo_table];
$cnt = $cnt + 1;
}
}
array_multisort($ar[$i], SORT_DESC, $list[$i]);
if($cnt>$rows) array_splice($list[$i], $rows);
}
ob_start();
include_once("$ltg_skin_path/latest.skin.php");
$content = ob_get_contents();
ob_end_clean();
return $content;
}
?>
예를 들면 '그누보드4'에서 '지블로그'로 갈때 ( 제목만요 )
댓글 전체
tab.find('>ul>li>a').click(onSelectTab).focus(onSelectTab);
▼
tab.find('>ul>li>a').hover(onSelectTab).focus(onSelectTab);
▼
tab.find('>ul>li>a').hover(onSelectTab).focus(onSelectTab);
너무나 감사합니다!!!! ^__________________________^
그리구요~~ 혹시 그룹 제목을 클릭하면 원하는 링크로 가게 할수도있나요?
<li class="m<?=$num?>">
<a href="<?=$g4[bbs_path]?>/group.php?gr_id=<?=$gr_id[$m]?>" jquery16408452460570924265="<?=$num?>">
위 내용은 해당 그룹
링크 변경시 <a href="<?=$g4[bbs_path]?>/group.php?gr_id=<?=$gr_id[$m]?>"> 수정
<a href="<?=$g4[bbs_path]?>/group.php?gr_id=<?=$gr_id[$m]?>" jquery16408452460570924265="<?=$num?>">
위 내용은 해당 그룹
링크 변경시 <a href="<?=$g4[bbs_path]?>/group.php?gr_id=<?=$gr_id[$m]?>"> 수정
오른쪽 옆에 더보기 부분을 말씀하시는것같습니다.. 제목을 클릭하면 원하는 링크로 가는걸 원해요~ ^^
위치를 잘못 찾으신듯..
css 마지막 바로 아래 입니다.
<div style="height:106px" class="tab_list m1">
<ul>
<?
for($m=0; $m<count($gr_id); $m++) {
$num = $m+1;
?>
<li class="m<?=$num?>">
<!-- <a href="#" jquery16408452460570924265="<?=$num?>"> -->
<a href="<?=$g4[bbs_path]?>/group.php?gr_id=<?=$gr_id[$m]?>" jquery16408452460570924265="<?=$num?>"> <!-- 수정 -->
<span><?=$gr[$m][gr_subject]?></span>
</a>
위 내용 동일 위치에 붙여넣기 후 확인 해 보세요.
원본 → <a href="#" jquery16408452460570924265="<?=$num?>">
수정 → # 부분에 <?=$g4[bbs_path]?>/group.php?gr_id=<?=$gr_id[$m]?> 만 추가 함
css 마지막 바로 아래 입니다.
<div style="height:106px" class="tab_list m1">
<ul>
<?
for($m=0; $m<count($gr_id); $m++) {
$num = $m+1;
?>
<li class="m<?=$num?>">
<!-- <a href="#" jquery16408452460570924265="<?=$num?>"> -->
<a href="<?=$g4[bbs_path]?>/group.php?gr_id=<?=$gr_id[$m]?>" jquery16408452460570924265="<?=$num?>"> <!-- 수정 -->
<span><?=$gr[$m][gr_subject]?></span>
</a>
위 내용 동일 위치에 붙여넣기 후 확인 해 보세요.
원본 → <a href="#" jquery16408452460570924265="<?=$num?>">
수정 → # 부분에 <?=$g4[bbs_path]?>/group.php?gr_id=<?=$gr_id[$m]?> 만 추가 함
너무 감사드립니다! 다른 줄에서 변경하고있었네요