웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
셀렉트 박스를 이용한 콘트롤 만들기 ( 아래로 이동 )
2006.10.30 20:56
전편에 이어 선택한 객체를 아래로 이동하는 부분을 하겠습니다
else
if(type == "down") {
}//type == "down"
아래로 이동은 위에 있는 소스만 다듬으면 되겠죠
아래로 이동할시 생각해야될 상황은 두가지입니다
첫번째는 셀렉트를 선택하지 않았을때의 상황
두번째는 셀렉트를 선했헀을 경우의 상황
두번째도 다시 한번 나눌수 있습니다 셀렉트를 선택했을 때 이동할수 있는 상황
이동할 수 없는 상황
그래서 아래의 상황 코드를 만들어 넣을수 있습니다
else
if(type == "down") {
if() {// 셀렉트를 선택하지 않았을 때;
}
else{// 셀렉트를 선택했을 때;
if(){ //마지막 항목일 때
}else{ // 움직일 수있는 항목 선택했을 때;
}
}// 셀렉트를 선택했을 때 ;
}//type == "down"
상황에 따라 나눠줬습니다
그럼 그안에 맞는 대처를 해야겠죠
if() {// 셀렉트를 선택하지 않았을 때;
}
처음 if문 안에 들어갈 조건문은
설렉트를 선택하지 않았을 경우이니 sindex<0 라고 써 주시면 됩니다
sindex는 전편 그러니까 펑션 안에서 정의해줬던 지역 변수이며
var f=document.getElementById('board_no');
var sindex=f.selectedIndex;
와 같이 정의해 줬습니다
즉 sindex는 셀렉트 박스 안에서 선택되어진 객체를
의미합니다
선택되어진 곳이 0보다 작다라는 것은
셀렉트의 첫번째 인덱스 값이 0부터 시작하기 때문입니다
첫번째 항목 즉 "날마다 여는 창"의 인덱스 값은 0
마지막 다섯번째 값인 "팁코리아"는 인덱스 값이 4가 됩니다
또한 선택되지 않았을때의 값은 -1이 됩니다
그러니 선택되지 않았다는 조건문을 만들려면
-1과 같다거나 혹은 0보다 작다로 상황문을 만들면 되기에 위와 같이 상황문을 만들면 됩니다
더불어 중괄호 안에서 작동할 기능은 알러트입니다
선택하지 않고 아래로 버튼을 눌렀으니 선택하지 않아서 선택한다는 알러트를
사용자에게 보여주면 되겠죠
그래서 만들어진 코드는 아래와 같습니다
if(sindex<0) {// 셀렉트를 선택하지 않았을 때
alert('선택된게 없으니 제일 처음 항목을 선택합니다.');
f.selectedIndex = 0;
return;
}
더 설명을 한다면 알러트를 보여주고 셀렉트의 첫번째인 곳을 선택하게 한후 더이상
코드 진행을 하지 않고 리턴 시킵니다
if(){ //마지막 항목일 때
이부분의 상황문은 마지막 항목을 알아서 이프문을 만들어주면 되겠죠
마지막 항목은 셀렉트이름.options.length-1 과 같이 하면 됩니다
셀렉트내의 옵션개수를 파악해 거기서 1을 빼주면 마지막 값이 됩니다
마지막 항목을 더 내릴려고 하니 더 이상 기능 수행을 할수 없게 만들고
알러트로 상황을 알려주면 되며 아래와 같이 코드를 넣어주면 됩니다
if(f.options.selectedIndex == f.options.length-1) {
alert('마지막 항목입니다 nn더 이상 이동할 수 없습니다. ');
return;
}
선택한 곳이 마지막과 같다면 알러트로 알려준후 코드 진행을 하지 않고 처음으로 리턴 시킵니다
else{
}
}// 셀렉트를 선택했을 때
이 부분만 남았습니다
이부분이 실질적으로 셀렉트의 값들을 아래로 이동시키는 부분입니다
들어갈 코드는 아래와 같습니다
else{
var savedValue=f.options[sindex].value;
var savedText=f.options[sindex].text;
f.options[sindex].value=f.options[sindex+1].value;
f.options[sindex].text=f.options[sindex+1].text;
f.options[sindex+1].value=savedValue;
f.options[sindex+1].text=savedText;
f.options[sindex+1].selected=true;
f.options[sindex].selected=false;
}
}// 셀렉트를 선택했을 때
var savedValue=f.options[sindex].value;
var savedText=f.options[sindex].text;
선택된 곳의 value 값과 셀렉트에 표기되는 보여지는 텍스트 값을 먼저
변수로 정의해 둡니다
f.options[sindex].value=f.options[sindex+1].value;
f.options[sindex].text=f.options[sindex+1].text;
선택되어진 곳을 한칸 아래로 움직이기 위해서 인텍스 값에 1씩 더해줍니다
f.options[sindex+1].value=savedValue;
f.options[sindex+1].text=savedText;
선택해서 한칸 내렸으니 선택한 곳의 한칸 아래값은 당연히 선택되어졌던 곳으로
올려져야 눈으로 보기에 선택한 곳이 한칸씩 내려오는 효과가 이뤄지겠죠
그러기 위해서 한칸 아래의 값은 이전 값을 미리 변수로 받아 두었었던
savedValue savedText
로 맞춰주면 됩니다
f.options[sindex].text으로 맞춰주지 않은것은
이전 수행한 현재의 값이 1씩 더하기가 되었기 때문에
이미 현재 위치값을 벗어난 형태가 되었기 때문입니다
(형을 형이라 부르지 못하고 아버지를 아버지라 부르지 못하는 형태 ㅡㅡ; )
그래서 첫머리에 현재의 값을 변수를 만들어 거기에 등록을 시켜 뒀던겁니다
f.options[sindex+1].selected=true;
f.options[sindex].selected=false;
셀렉트 선택부분을 이후로 돌려주고 현재의 값은 셀렉트되어진 값을 지워줍니다
완성된 소스는 아래와 같습니다
else
if(type == "down") {
if(sindex<0) {// 셀렉트를 선택하지 않았을 때
alert('선택된게 없으니 제일 처음 항목을 선택합니다.');
f.selectedIndex = 0;
return;
}
else{// 셀렉트를 선택했을 때
//처음 게시판일 때
if(f.options.selectedIndex == f.options.length-1) {
alert('마지막 항목입니다 nn더 이상 이동할 수 없습니다. ');
return;
}else{
var savedValue=f.options[sindex].value;
var savedText=f.options[sindex].text;
f.options[sindex].value=f.options[sindex+1].value;
f.options[sindex].text=f.options[sindex+1].text;
f.options[sindex+1].value=savedValue;
f.options[sindex+1].text=savedText;
f.options[sindex+1].selected=true;
f.options[sindex].selected=false;
}
}// 셀렉트를 선택했을 때
}//type == "down"
else
if(type == "down") {
}//type == "down"
아래로 이동은 위에 있는 소스만 다듬으면 되겠죠
아래로 이동할시 생각해야될 상황은 두가지입니다
첫번째는 셀렉트를 선택하지 않았을때의 상황
두번째는 셀렉트를 선했헀을 경우의 상황
두번째도 다시 한번 나눌수 있습니다 셀렉트를 선택했을 때 이동할수 있는 상황
이동할 수 없는 상황
그래서 아래의 상황 코드를 만들어 넣을수 있습니다
else
if(type == "down") {
if() {// 셀렉트를 선택하지 않았을 때;
}
else{// 셀렉트를 선택했을 때;
if(){ //마지막 항목일 때
}else{ // 움직일 수있는 항목 선택했을 때;
}
}// 셀렉트를 선택했을 때 ;
}//type == "down"
상황에 따라 나눠줬습니다
그럼 그안에 맞는 대처를 해야겠죠
if() {// 셀렉트를 선택하지 않았을 때;
}
처음 if문 안에 들어갈 조건문은
설렉트를 선택하지 않았을 경우이니 sindex<0 라고 써 주시면 됩니다
sindex는 전편 그러니까 펑션 안에서 정의해줬던 지역 변수이며
var f=document.getElementById('board_no');
var sindex=f.selectedIndex;
와 같이 정의해 줬습니다
즉 sindex는 셀렉트 박스 안에서 선택되어진 객체를
의미합니다
선택되어진 곳이 0보다 작다라는 것은
셀렉트의 첫번째 인덱스 값이 0부터 시작하기 때문입니다
첫번째 항목 즉 "날마다 여는 창"의 인덱스 값은 0
마지막 다섯번째 값인 "팁코리아"는 인덱스 값이 4가 됩니다
또한 선택되지 않았을때의 값은 -1이 됩니다
그러니 선택되지 않았다는 조건문을 만들려면
-1과 같다거나 혹은 0보다 작다로 상황문을 만들면 되기에 위와 같이 상황문을 만들면 됩니다
더불어 중괄호 안에서 작동할 기능은 알러트입니다
선택하지 않고 아래로 버튼을 눌렀으니 선택하지 않아서 선택한다는 알러트를
사용자에게 보여주면 되겠죠
그래서 만들어진 코드는 아래와 같습니다
if(sindex<0) {// 셀렉트를 선택하지 않았을 때
alert('선택된게 없으니 제일 처음 항목을 선택합니다.');
f.selectedIndex = 0;
return;
}
더 설명을 한다면 알러트를 보여주고 셀렉트의 첫번째인 곳을 선택하게 한후 더이상
코드 진행을 하지 않고 리턴 시킵니다
if(){ //마지막 항목일 때
이부분의 상황문은 마지막 항목을 알아서 이프문을 만들어주면 되겠죠
마지막 항목은 셀렉트이름.options.length-1 과 같이 하면 됩니다
셀렉트내의 옵션개수를 파악해 거기서 1을 빼주면 마지막 값이 됩니다
마지막 항목을 더 내릴려고 하니 더 이상 기능 수행을 할수 없게 만들고
알러트로 상황을 알려주면 되며 아래와 같이 코드를 넣어주면 됩니다
if(f.options.selectedIndex == f.options.length-1) {
alert('마지막 항목입니다 nn더 이상 이동할 수 없습니다. ');
return;
}
선택한 곳이 마지막과 같다면 알러트로 알려준후 코드 진행을 하지 않고 처음으로 리턴 시킵니다
else{
}
}// 셀렉트를 선택했을 때
이 부분만 남았습니다
이부분이 실질적으로 셀렉트의 값들을 아래로 이동시키는 부분입니다
들어갈 코드는 아래와 같습니다
else{
var savedValue=f.options[sindex].value;
var savedText=f.options[sindex].text;
f.options[sindex].value=f.options[sindex+1].value;
f.options[sindex].text=f.options[sindex+1].text;
f.options[sindex+1].value=savedValue;
f.options[sindex+1].text=savedText;
f.options[sindex+1].selected=true;
f.options[sindex].selected=false;
}
}// 셀렉트를 선택했을 때
var savedValue=f.options[sindex].value;
var savedText=f.options[sindex].text;
선택된 곳의 value 값과 셀렉트에 표기되는 보여지는 텍스트 값을 먼저
변수로 정의해 둡니다
f.options[sindex].value=f.options[sindex+1].value;
f.options[sindex].text=f.options[sindex+1].text;
선택되어진 곳을 한칸 아래로 움직이기 위해서 인텍스 값에 1씩 더해줍니다
f.options[sindex+1].value=savedValue;
f.options[sindex+1].text=savedText;
선택해서 한칸 내렸으니 선택한 곳의 한칸 아래값은 당연히 선택되어졌던 곳으로
올려져야 눈으로 보기에 선택한 곳이 한칸씩 내려오는 효과가 이뤄지겠죠
그러기 위해서 한칸 아래의 값은 이전 값을 미리 변수로 받아 두었었던
savedValue savedText
로 맞춰주면 됩니다
f.options[sindex].text으로 맞춰주지 않은것은
이전 수행한 현재의 값이 1씩 더하기가 되었기 때문에
이미 현재 위치값을 벗어난 형태가 되었기 때문입니다
(형을 형이라 부르지 못하고 아버지를 아버지라 부르지 못하는 형태 ㅡㅡ; )
그래서 첫머리에 현재의 값을 변수를 만들어 거기에 등록을 시켜 뒀던겁니다
f.options[sindex+1].selected=true;
f.options[sindex].selected=false;
셀렉트 선택부분을 이후로 돌려주고 현재의 값은 셀렉트되어진 값을 지워줍니다
완성된 소스는 아래와 같습니다
else
if(type == "down") {
if(sindex<0) {// 셀렉트를 선택하지 않았을 때
alert('선택된게 없으니 제일 처음 항목을 선택합니다.');
f.selectedIndex = 0;
return;
}
else{// 셀렉트를 선택했을 때
//처음 게시판일 때
if(f.options.selectedIndex == f.options.length-1) {
alert('마지막 항목입니다 nn더 이상 이동할 수 없습니다. ');
return;
}else{
var savedValue=f.options[sindex].value;
var savedText=f.options[sindex].text;
f.options[sindex].value=f.options[sindex+1].value;
f.options[sindex].text=f.options[sindex+1].text;
f.options[sindex+1].value=savedValue;
f.options[sindex+1].text=savedText;
f.options[sindex+1].selected=true;
f.options[sindex].selected=false;
}
}// 셀렉트를 선택했을 때
}//type == "down"
댓글 0
제목 | 글쓴이 | 날짜 |
---|---|---|
context menu - 마리홈 이름 팝업 레이어 [3] | 예뜨락 | 2006.10.30 |
셀렉트 박스를 이용한 콘트롤 만들기 ( 아래로 이동 ) | 예뜨락 | 2006.10.30 |
셀렉트 박스를 이용한 콘트롤 만들기 ( 위로 이동 ) [1] | 예뜨락 | 2006.10.30 |
고글검색하기!! [7] | 김민환 | 2006.10.30 |
앗!! 내별!! 내별날라가네 [3] | 김민환 | 2006.10.14 |
홈페이지의 필수!! 뮤직 플레이어!! [3] | 김민환 | 2006.10.14 |
졸리시면 이것을 한번 써보세요.......(큰창 필수!!)지진이다 [2] | 김민환 | 2006.10.14 |
앗 불꽃놀이다 구경가자 [3] | 김민환 | 2006.10.14 |
즐겨찾기 추가방법 [2] | 김민환 | 2006.10.10 |
당신은~째 방문자 이십니다.<카운터> [11] | 김민환 | 2006.10.10 |
위의 메뉴에 마우스를 올리면 밑에 메뉴가 나오는 소스 [1] | 김민환 | 2006.10.10 |
일반 시간...... [1] | 김민환 | 2006.10.10 |
{로그인}관리자 로그인 폼 간단함 [2] | 김민환 | 2006.10.10 |
배경 음악 연주기(다기능/스틱형) [1] | 이민주 | 2006.10.09 |
로또 번호 생성기 허접..ㅋㅋ [5] | 삐따기 | 2006.10.04 |
텍스트 선택하기 | 행복한고니 | 2006.09.06 |
로또 번호 추출기 [3] | 왜,그러지 | 2006.07.27 |
배경색을 마우스로 크릭하여 지정하여 준다. | 왜,그러지 | 2006.07.27 |
자바스크립트로 만든 테트리스 일명 자트리스 ^^;; [12] | beMax | 2006.07.27 |
날라서 붙는 텍스트 [1] | 왜,그러지 | 2006.07.17 |