웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
행복한고니님의 체크박스를 이미지로 사용하기를 보고... 체크박스옆에 텍스트 부치기
2004.10.29 23:49
처음 고니님의 함수들 보고 정말 놀랬더랬습니다.
이런것도 있구나하구요..^^;;
msdn 들가보니까 있긴있더라구요..-ㅁ-;
그래서 함따라해봤습니다.
고니님이 하신건 체크박스를 이미지로 교체해서 표현하는거구요
저는 라이오 박스나 체크박스를 그냥 쓰되 바로엽에 글자를 넣어서 글자를 클릭해도 선택이 되게한겁니다.
아직 이런식으로 해본 경험이 없던 터라..많이 부족할겁니다.
사용방법은
<input type="radio" name="a" text="여기다 표시할 문자를 넣습니다.">
<input type="checkbox" name="b" text="여기다 표시할 문자를 넣습니다.">
스크립트는 가급적 <head>와 ~ </head> 사이에 넣으시구요
<body onload="LabelChoice()"> 하시거나
<input 태그가 마지막으로 끝나는 다음에
<script> LabelChoice() </script>
를 넣어주세요.
예제 ) http://maxpond.netcci.net/etc/LabelChoice.html
<script Language="JavaScript" type="text/JavaScript">
<!--
/* 라디오 버튼이나 체크박스를 찾아 변환 */
function LabelChoice(){
var choice, span;
inputs = document.getElementsByTagName( "INPUT" ); // 현재 문서의 엘리먼트중 input 태그만 가져오기
for( i=0; i<inputs.length; i++ ){ // 가져온 인풋태그를 모두 확인
if( inputs[i].type != "radio" && inputs[i].type != "checkbox" ) continue; // 뭘 확인? 라디오 버튼인지 체크버튼인지
if( inputs[i].getAttribute("text") == null ) continue; // text라는 어트리뷰트가 있는지
LabelChoice.choiceBox[LabelChoice.choiceBox.length] = choice = inputs[i]; // 이벤트 처리를 위한 객체를 배열로 넣어둠
LabelChoice.spans[LabelChoice.spans.length] = span = document.createElement( "SPAN" ); // 라벨을 위한 span 태그를 하나 만듬
// span 태그의 글자를 text 어트리뷰트로 정의된 문자열로 채움
span.innerHTML = choice.getAttribute("text");
span.style.cursor = "hand"; // span 태그 커서를 손모양으로
if( choice.checked ) // 기본값 확인
span.style.fontWeight = "bold"; // 체크됬으면 볼드체
choice.oldOnClick = choice.getAttribute( "onclick" ); // 이미 지정된 onclick 이벤트 저장
// 새 onclick 이벤트 등록
span.onclick = new Function( "LabelChoice.onclick('"+(LabelChoice.choiceBox.length-1)+"', 1);" );
choice.onclick = new Function( "LabelChoice.onclick('"+(LabelChoice.choiceBox.length-1)+"', 0);" );
// 체크박스 또는 라디오 버튼 옆에 span 태그를 넣음
choice.insertAdjacentElement( "afterEnd", span );
}
}
/* span 이나 라디오 버튼 클릭시 */
LabelChoice.onclick = function( idx, flag ){
if( flag ){ // span 태그의 onclick 이벤트 발생시
if( LabelChoice.choiceBox[idx].type == "checkbox" ) // 변환된 객체가 체크박스라면
LabelChoice.choiceBox[idx].checked = !LabelChoice.choiceBox[idx].checked; // 반전체크
else
LabelChoice.choiceBox[idx].checked = true; // 라디오 버튼이면 항상 체크
LabelChoice.choiceBox[idx].fireEvent( "onclick" ); // 라디오 또는 체크박스를 대상으로 onclick 이벤트 발생
return;
}
choice = LabelChoice.choiceBox[idx];
choiceSpan = LabelChoice.spans[idx];
choice.oldOnClick(); // 기본으로 등록된 onclick 이벤트 먼저 실행
if( choice.type == "radio" ){ // 라디오 버튼이면
for( i=0; i<LabelChoice.choiceBox.length; i++ ){
if( choice.name != LabelChoice.choiceBox[i].name ) continue; // 이벤트를 발생시킨 객체와 다른 그룹의 라디오 버튼이면 쌩~
LabelChoice.spans[i].style.fontWeight=""; // 아니면 span 태그의 글자체를 default 값으로
}
}
choice.checked = choice.checked;
if( choice.checked )
choiceSpan.style.fontWeight = "bold"; //볼드체로
else
choiceSpan.style.fontWeight = ""; // default 로
}
LabelChoice.choiceBox = [];
LabelChoice.spans = [];
//-->
</script>
<style>
body, span, input { font-size:12px }
</style>
<body onload="LabelChoice()">
<input type="radio" name="A" text="A 그룹 선택하기1"><br>
<input type="radio" name="A" text="A 그룹 선택하기2" checked><br>
<input type="radio" name="A" text="A 그룹 선택하기3"><br>
<p>
<input type="radio" name="B" text="B 그룹 선택하기1"><br>
<input type="radio" name="B" text="B 그룹 선택하기2"><br>
<input type="radio" name="B" text="B 그룹 선택하기3"><br>
<p>
<input type="checkbox" name="checkbox[]" text="이번엔 체크박스1"><br>
<input type="checkbox" name="checkbox[]" text="이번엔 체크박스2"><br>
<input type="checkbox" name="checkbox[]" text="이번엔 체크박스3"><br>
이런것도 있구나하구요..^^;;
msdn 들가보니까 있긴있더라구요..-ㅁ-;
그래서 함따라해봤습니다.
고니님이 하신건 체크박스를 이미지로 교체해서 표현하는거구요
저는 라이오 박스나 체크박스를 그냥 쓰되 바로엽에 글자를 넣어서 글자를 클릭해도 선택이 되게한겁니다.
아직 이런식으로 해본 경험이 없던 터라..많이 부족할겁니다.
사용방법은
<input type="radio" name="a" text="여기다 표시할 문자를 넣습니다.">
<input type="checkbox" name="b" text="여기다 표시할 문자를 넣습니다.">
스크립트는 가급적 <head>와 ~ </head> 사이에 넣으시구요
<body onload="LabelChoice()"> 하시거나
<input 태그가 마지막으로 끝나는 다음에
<script> LabelChoice() </script>
를 넣어주세요.
예제 ) http://maxpond.netcci.net/etc/LabelChoice.html
<script Language="JavaScript" type="text/JavaScript">
<!--
/* 라디오 버튼이나 체크박스를 찾아 변환 */
function LabelChoice(){
var choice, span;
inputs = document.getElementsByTagName( "INPUT" ); // 현재 문서의 엘리먼트중 input 태그만 가져오기
for( i=0; i<inputs.length; i++ ){ // 가져온 인풋태그를 모두 확인
if( inputs[i].type != "radio" && inputs[i].type != "checkbox" ) continue; // 뭘 확인? 라디오 버튼인지 체크버튼인지
if( inputs[i].getAttribute("text") == null ) continue; // text라는 어트리뷰트가 있는지
LabelChoice.choiceBox[LabelChoice.choiceBox.length] = choice = inputs[i]; // 이벤트 처리를 위한 객체를 배열로 넣어둠
LabelChoice.spans[LabelChoice.spans.length] = span = document.createElement( "SPAN" ); // 라벨을 위한 span 태그를 하나 만듬
// span 태그의 글자를 text 어트리뷰트로 정의된 문자열로 채움
span.innerHTML = choice.getAttribute("text");
span.style.cursor = "hand"; // span 태그 커서를 손모양으로
if( choice.checked ) // 기본값 확인
span.style.fontWeight = "bold"; // 체크됬으면 볼드체
choice.oldOnClick = choice.getAttribute( "onclick" ); // 이미 지정된 onclick 이벤트 저장
// 새 onclick 이벤트 등록
span.onclick = new Function( "LabelChoice.onclick('"+(LabelChoice.choiceBox.length-1)+"', 1);" );
choice.onclick = new Function( "LabelChoice.onclick('"+(LabelChoice.choiceBox.length-1)+"', 0);" );
// 체크박스 또는 라디오 버튼 옆에 span 태그를 넣음
choice.insertAdjacentElement( "afterEnd", span );
}
}
/* span 이나 라디오 버튼 클릭시 */
LabelChoice.onclick = function( idx, flag ){
if( flag ){ // span 태그의 onclick 이벤트 발생시
if( LabelChoice.choiceBox[idx].type == "checkbox" ) // 변환된 객체가 체크박스라면
LabelChoice.choiceBox[idx].checked = !LabelChoice.choiceBox[idx].checked; // 반전체크
else
LabelChoice.choiceBox[idx].checked = true; // 라디오 버튼이면 항상 체크
LabelChoice.choiceBox[idx].fireEvent( "onclick" ); // 라디오 또는 체크박스를 대상으로 onclick 이벤트 발생
return;
}
choice = LabelChoice.choiceBox[idx];
choiceSpan = LabelChoice.spans[idx];
choice.oldOnClick(); // 기본으로 등록된 onclick 이벤트 먼저 실행
if( choice.type == "radio" ){ // 라디오 버튼이면
for( i=0; i<LabelChoice.choiceBox.length; i++ ){
if( choice.name != LabelChoice.choiceBox[i].name ) continue; // 이벤트를 발생시킨 객체와 다른 그룹의 라디오 버튼이면 쌩~
LabelChoice.spans[i].style.fontWeight=""; // 아니면 span 태그의 글자체를 default 값으로
}
}
choice.checked = choice.checked;
if( choice.checked )
choiceSpan.style.fontWeight = "bold"; //볼드체로
else
choiceSpan.style.fontWeight = ""; // default 로
}
LabelChoice.choiceBox = [];
LabelChoice.spans = [];
//-->
</script>
<style>
body, span, input { font-size:12px }
</style>
<body onload="LabelChoice()">
<input type="radio" name="A" text="A 그룹 선택하기1"><br>
<input type="radio" name="A" text="A 그룹 선택하기2" checked><br>
<input type="radio" name="A" text="A 그룹 선택하기3"><br>
<p>
<input type="radio" name="B" text="B 그룹 선택하기1"><br>
<input type="radio" name="B" text="B 그룹 선택하기2"><br>
<input type="radio" name="B" text="B 그룹 선택하기3"><br>
<p>
<input type="checkbox" name="checkbox[]" text="이번엔 체크박스1"><br>
<input type="checkbox" name="checkbox[]" text="이번엔 체크박스2"><br>
<input type="checkbox" name="checkbox[]" text="이번엔 체크박스3"><br>
댓글 2
-
beMax
2005.04.02 09:13
-
잠수부
2005.01.14 19:24
헛참.. 죄송해서..
<input type="radio" id="test"><label for="test">테스트</label>
제목 | 글쓴이 | 날짜 |
---|---|---|
스킨 시스템 구축.(1탄 읽어오기) [11] | 씨파개 | 2003.05.13 |
Wake On Lan 기능 사용하기... [3] | sMokaHallo | 2003.05.17 |
썸네일 자동생성하고 이미지 사이즈 자동 줄이기... [6] | sMokaHallo | 2003.05.21 |
홈페이지의 내용을 DB에 담기 [15] | 세죠위그이 | 2003.05.30 |
체크박스등으로 배열로 변수를 넘길때.. [1] | myself2 | 2003.06.06 |
php 로 기존 문서 포함시키기 [10] | 이성헌 | 2003.06.08 |
PHP 익히기 1 [24] | 구리구리 | 2003.06.09 |
PHP 익히기 2 [9] | 구리구리 | 2003.06.10 |
PHP 익히기 3 [11] | 구리구리 | 2003.06.17 |
이미 인클루드된 파일은 다시 인클루드하지 않기 [14] | 김병희 | 2003.06.20 |
htmlspecialchars 사용하시는 분들 [5] | holies | 2003.07.11 |
Thumbnail 생성하기 - 수정^^; [9] | holies | 2003.07.11 |
'와 "의 속도 차이?! [6] | holies | 2003.07.12 |
초간단 php 랜덤 이미지 및 랜덤 배경이미지 소스 [6] | 거금도 | 2003.07.24 |
다른 사이트에 있는 파일 읽어오기 [50] | 김규백 | 2003.07.25 |
스킨 시스템 사용하기 [2] | 김규백 | 2003.07.25 |
제로보드 + MSN 메신저 (작성글에 리플이나 코멘트가 달리면 MSN으로 알려준다?)
[18]
![]() | HungryMania | 2003.08.01 |
체널을 응용해서 tmain.php?tdb=test&db=src 식으로 쓰기 [12] | 9000㎒ | 2003.08.01 |
$i++ !== $i += 1 [14] | 플로렐라 | 2003.08.04 |
개판 오분전 정규식(4) | 미친개 | 2003.08.07 |
>>ㅑ~
이런게 있었다니..;;-_-;;
코멘트에는 추천없나..-ㅁ-;;;;;;;;;;;;;;;;
잠수부님 감사요..^^;;