태그 자료실 2516

회원로그인

무료회원가입 보안로그인

아이디/비밀번호찾기

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

13년 전

그누보드 기준

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');":"";?>>

첨부 :

img(2).zip (1.1 KB) (8) 파일 2

2009718857_gpvZQLhs_jy_selectbox.gif (1.2 KB) (4)

추천 목록

번호	제목
2,291	웹표준 TABLE (테이블)
2,290	웹표준 준수사항 22가지
2,289	internet Explorer8 에서 기존 사이트를 정상적으로 나오게 하는 메타태그
2,288	각 HTML버전별 DTD(Document Type Definition)
2,287	strict 유효성 검사에서 form name='name1' name속성 걸리는 문제
2,286	XHTML1.1 에서 일반적으로 범하기 쉬운 오류
2,285	웹표준에서 더이상 사용할수 없는 태그&속성
2,284	자바스크립트 정규표현식
2,283	전화번호 입력시 자동 하이픈 넣기
2,282	이벤트 핸들러 (Event Handler) 모음
2,281	DIV태그에서 상하정렬 스크립트
2,280	팝업 차단 여부 확인 스크립트
2,279	웹 접근성을 생각하는 자바스크립트
2,278	자동 로그인시 ****** 로 숨겨진 패스워드 알아내기
2,277	한글 체크 스크립트
2,276	이미지 없을때 대체 이미지 출력
2,275	자바스크립트 오브젝트 Opacity 제어
2,274	<![CDATA[ ]]> 이 구문은 무엇을 뜻하는 것일까요?
2,273	input 자릿수 체크로 포커스 이동
2,272	왼쪽 / 오른쪽 / 전체 공백 제거 스트립트 - Trim / LTrim / RTrim
2,271	웹표준 모든 애트리뷰트에는 값이 필요
2,270	웹표준으로 퍼블리싱할때 꼭 지켜야 할 사항들
2,269	dl dt dd 에 대해
2,268	자바스크립으로 플래쉬 메뉴처럼...
2,267	div 세로정렬
2,266	다중카테고리
2,265	다중 셀렉트
2,264	평 => m2
2,263	평수 구하기 (가로 x 세로)
2,262	텍스트 박스의 입력글자수 제한