버튼클릭 시 전체검색창을 보이게 하는 방법 정보
버튼클릭 시 전체검색창을 보이게 하는 방법첨부파일
본문
질문이 있길래 제가 사용하는 방법을 올려봅니다.
평상 시에는 버튼만 보이다가 버튼클릭 시 버튼 좌측으로 전체검색창을 보이게 하는 방법입니다.
한 번 더 클릭을 하면 검색창이 사라집니다.
그냥 차례대로 놓고 사용하셔도 됩니다.
1.
<!-- 검색창은 기본적으로 안 보이게 스타일설정 -->
<style>
#hd_sch #sch_stx { display:none; }
</style>
<!-- 검색창은 기본적으로 안 보이게 스타일설정 -->
2.
<!-- 토글에 대한 스크립트 삽입 -->
<script>
var now_layer_id = '';
function display_popLayer(id){
$("#"+id).toggle();
var obj = $('#'+id);
if(obj.css('display') == 'none'){
new_display = 'block';
now_layer_id = id;
}else if(obj.css('display') == 'block'){
new_display ='none';
now_layer_id = '';
}
}
</script>
<!-- 토글에 대한 스크립트 삽입 -->
3.
그리고, img폴더에 search.png 파일을 넣으신 후 사용하시면 됩니다.
search.png 파일도 첨부하였습니다.
<fieldset id="hd_sch">
<legend>사이트 내 전체검색</legend>
<form name="fsearchbox" method="get" action="<?php echo G5_BBS_URL ?>/search.php" onsubmit="return fsearchbox_submit(this);">
<input type="hidden" name="sfl" value="wr_subject||wr_content">
<input type="hidden" name="sop" value="and">
<label for="sch_stx" class="sound_only">검색어<strong class="sound_only"> 필수</strong></label>
<input type="text" name="stx" id="sch_stx" maxlength="20" placeholder="">
<input type=image onClick="display_popLayer('hd_sch #sch_stx');" src="<?php echo G5_IMG_URL ?>/search.png" width="22" height="20" border=0 onfocus="blur()" alt="전체검색" title="전체검색">
</form>
<script>
function fsearchbox_submit(f)
{
if (f.stx.value.length < 1) {
//alert("검색어는 두 글자 이상 입력하십시오.");
f.stx.select();
f.stx.focus();
return false;
}
// 검색에 많은 부하가 걸리는 경우 이 주석을 제거하세요.
var cnt = 0;
for (var i=0; i<f.stx.value.length; i++) {
if (f.stx.value.charAt(i) == ' ')
cnt++;
}
if (cnt > 10) {
alert("빠른 검색을 위하여 검색어에 공백은 한 개만 입력할 수 있습니다.");
f.stx.select();
f.stx.focus();
return false;
}
return true;
}
</script>
</fieldset>
4. 2023년 1월 1일 내용 추가 : 허접한 팁 하나 더~
참고로 다음과 같은 조치를 해주면 다른 영역에 클릭을 하게 되면 검색창이 보이지 않게 됩니다.
default.css에서
/* 전체 검색 */
#hd_sch #sch_stx {padding-left:7px;width:200px;height:24px;border:0;background:#fff;line-height:1.9em;background: none}을
다음처럼 추가해주시면 됩니다.
#hd_sch #sch_stx {padding-left:7px;width:200px;height:24px;border:0;background:#fff;line-height:1.9em;;background:#fff;border:0px solid #ccc}
감사합니다.
4