셀렉트박스를 div+css 로 변경하기 > 그누4 팁자료실

매출이 오르면 내리는 수수료! 지금 수수료센터에서 전자결제(PG)수수료 비교견적 신청해 보세요!

그누4 팁자료실

그누보드4와 관련된 팁을 여러분들과 함께 공유하세요.
나누면 즐거움이 커집니다.

셀렉트박스를 div+css 로 변경하기 정보

셀렉트박스를 div+css 로 변경하기

첨부파일

img.zip (1.1K) 419회 다운로드 2010-01-04 23:09:51

본문



미리보기 : http://jysoft.co.kr/bbs/board.php?bo_table=notice

※ 게시판 카테고리 변경법입니다.


1. 이미지(첨부) 를 ../skin/board/스킨폴더/ 에 폴더채로 업로드


2. php 코드 추가

skin/게시판/list.skin.php 15줄의 ?> 위에 아래 코드 추가

// 카테고리 div
$category_location = "./board.php?bo_table=$bo_table$sty&sca=";

if ($board[bo_use_category]) {
    if($sca) $option = "<li><a href=\"$category_location\">전체</a></li>";

    $arr = explode("|", $board[bo_category_list]);
    for ($i=0; $i<count($arr); $i++) {
        if(trim($arr[$i])) {
            if($sca == $arr[$i]) $jy_class = "class=\"_ed\"";
            else $jy_class = "";
            $option .= "<li $jy_class><a href=\"$category_location{$arr[$i]}\">$arr[$i]</a></li>";
        }
    }
}

if(!$sca) $jy_sca = "전체";
else $jy_sca = $sca;



3. style 추가

스타일 시트에 아래코드를 추가
스킨폴더글자를 폴더이름으로 변경


/* 셀렉트박스 */
.jy_select {position:relative; float:left; width:120px; margin-left:5px;}
.jy_select * {margin:0; padding:0;}
.jy_select p {float:left; width:113px; height:20px; line-height:20px; padding-left:5px; border:1px solid #BDBDBD; background:#F6F9F5 url(../skin/board/스킨폴더/img/btn_category.gif) no-repeat right top; font-size:11px; cursor:pointer;}
.jy_select p.ed {background-position:bottom right;}
.jy_select ul {position:absolute; top:21px; left:0; list-style-type:none; border:1px solid #BDBDBD;}
.jy_select ul li {display:inline; height:20px; line-height:20px;}
.jy_select ul li a {width:113px; padding-left:5px; display:block; text-decoration:none; font-size:11px; background-color:#F6F9F5; color:#666666; font-size:11px;}
.jy_select ul li._ed a,
.jy_select ul li a:hover {background-color:#60686E; color:#FFFFFF !important;}


4. 스크립트 추가

적당한 위치에 스크립트를 추가


<script type="text/javascript" language="javascript">
// div 샐랙트 펼치기
function jySelectOpen(option, selected)
{
    var selectDisplay = document.getElementById(option).style.display;

    if(selectDisplay == "none"){
        document.getElementById(option).style.display = "";
        document.getElementById(selected).className = "ed";
    } else {
        jySelectClose(option, selected);
    }
}

// div 샐랙트 닫기
function jySelectClose(option, selected)
{
        document.getElementById(option).style.display = "none";
        document.getElementById(selected).className = selected;
}
</script>


5. html 추가

카테고리박스를 나타낼 부분에 추가

<div class="jy_select">
    <p id="sed" onclick="jySelectOpen('jy_select', 'sed')"><?=$jy_sca?></p>
    <ul id="jy_select" style="display:none;"><?=$option?></ul>
</div>


6. 기존 셀렉트박스 감추기

style="display:none;" 를 추가

<select name=sca onchange="location='<?=$category_location?>'+this.value;" style="display:none;">


7. 리스트에 마우스오버시 div 닫히기

skin/게시판/list.skin.php 89줄에 onmouseover="<?=$is_category?"jySelectClose('jy_select', 'sed');":"";?> 추가

<table cellspacing="0" cellpadding="0" class="board_list" onmouseover="<?=$is_category?"jySelectClose('jy_select', 'sed');":"";?>>



도움 ㅤㄷㅚㅆ으면 추천추천 부탁드려요~~~~~~!!!

추천
11

댓글 5개

jy소프트님이 제작하신 게시판은 웹표준에 맞게 제작되어
정상적으로 적용이 된것 같더라구요
그러나 그누보드 베이직 게시판에 적용해 보니
스타일이 제대로 적용이 안되네요 ^^
전체 5 |RSS
그누4 팁자료실 내용 검색
  • 개별 목록 구성 번호 제목 작성자 작성일 추천 조회
  • 게시물이 없습니다.

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT