웹마스터 팁
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>
제목 | 글쓴이 | 날짜 |
---|---|---|
크롬리스 완벽해결! IE.2.0부터 Netscape까지 작동가능!! [13] | 김민호 | 2002.12.16 |
오른쪽 클릭 메뉴 [6] | 디아릭스 | 2002.12.16 |
select form 으로 새창띄우기(수정:2002-12-19) [3] | dolufy | 2002.12.11 |
홈페이지에 머무른 시간을 알림창으로 나타내기. [3] | 시즌오브드림 | 2002.12.10 |
출렁이며 내려오는 공지창.. [3] | 아벨라 | 2002.12.10 |
아래 새창에 맞게 이미지 띄우기 더더 업그레이드 판! [6] | ATply | 2002.12.09 |
이동 메뉴 (Netscape 가능 NZEO.com 소스) [9] | 박영창 | 2002.12.08 |
아래 이미지크기에 맞게 새창띄우는 소스(기능개선판) (-_-) v [10] | 행복한고니 | 2002.12.07 |
[re] 오류 아닌 오류 나시는 분덜... | 임병찬 | 2003.04.22 |
이미지 크기에 맞게 새창띄우는 자바소스인데요~ [3] | 새벽이슬 | 2002.12.07 |
정말 쉬운 이미지 롤오버 [3] | Nopedy Lee | 2002.12.05 |
엔지오처럼 메뉴가 아래위로 움직이는 소스[steelheart님 만듬]. [10] | 김태경 | 2002.11.23 |
iframe 내용에 맞게 자동으로 크기 조절하기 [36] | 행복한고니 | 2002.11.21 |
[파파스 1] 즐겨찾기 추가기능 소스 [5] | 파파스 | 2002.11.20 |
제로님 Select Box 조금 바꾼거... [5] | 행복한고니 | 2002.11.18 |
아래 행복한고니님의 할아버지 소스의 업글(?) 버젼입니다. [7] | (づ_-) 커터칼 | 2002.11.18 |
[re] 아래 행복한고니님의 할아버지 소스의 업글(?) 버젼입니다. [2] | Mahican | 2002.12.02 |
이미지 변환함수(롤오버) [3] | 행복한고니 | 2002.11.18 |
글상자글적으면 적은수가 숫자로 표시(글제한할때좋죠). [2] | 아벨라 | 2002.11.18 |
레이어를 원하는 곳에 고정하기입니다. [7] | 아벨라 | 2002.11.14 |
>>ㅑ~
이런게 있었다니..;;-_-;;
코멘트에는 추천없나..-ㅁ-;;;;;;;;;;;;;;;;
잠수부님 감사요..^^;;