어디에서나 바로가기 기능을 사용하실 수 있습니다. 주메뉴 이동은 알트 키 플러스 1 키이고, 부메뉴 이동은 알트 키 플러스 2 키이고, 본문 이동은 알트 키 플러스 3 키입니다. 알트 키 플러스 J 키는 일반모드와 텍스트모드로 전환합니다.
본문 바로가기 주메뉴 바로가기 부메뉴 바로가기
현재위치
HOME > 배우기 > 자바스크립트(JS)
본문 영역
M9CONTROLLBOX 설정 상세보기
box 속성값
변수명
그룹
기본값
설명
polder
전체
1
이미지 폴더명
opacity
전체
100
버튼들 투명값
btn
① 1
PRE,NEXT버튼 출력여부(0,1)
btn_type
① 0
PRE,NEXT버튼 출력타입(0,1)
btn_in
① 0
PRE,NEXT버튼 위치(0,1)
btn_padding
① 20
PRE,NEXT버튼 padding값
btn_play
② 1
PLAY,STOP버튼 출력여부(0,1)
btn_goto
③ 1
GOTO버튼 출력여부(0,1)
btn_goto_in
③ 0
GOTO버튼 위치(0,1)
btn_goto_pos
③ 3
GOTO버튼 위치(1,2,3,4,5,6)
btn_goto_padding
③ 20
GOTO버튼 padding값
ControllBox 에서
polder 은 "
버튼들의 폴더명 "을 뜻한다.
./m9_img/etc/player/ poder 안에 저장되어있다.
ControllBox 의 모든 버튼들은 이미지로 구성되어있고, 이미지들은 모두
PNG파일 로 제작되어 있습니다.
새로운 폴더를 만들고
polder 속성값으로 주면, 자신만의
ControllBox 세트 를 만들 수 있습니다.
polder 파일값
종류
파일명
설명
play
play.png
마우스 아웃시 PLAY 버튼
play_on.png
마우스 오버시 PLAY 버튼
stop
stop.png
마우스 아웃시 STOP 버튼
stop_on.png
마우스 오버시 STOP 버튼
left
left.png
마우스 아웃시 LEFT 버튼
left_on.png
마우스 오버시 LEFT 버튼
right
right.png
마우스 아웃시 RIGHT 버튼
right_on.png
마우스 오버시 RIGHT 버튼
goto
goto.png
마우스 아웃시 GOTO 버튼
goto_on.png
마우스 오버시 GOTO 버튼
기본으로 3가지 폴더가 있습니다. 폴더명은
(1,2,3) 입니다.
숫자로된 폴더명 입니다. 추가되는 폴더명은 4번부터 쭉갑니다.
사용자는 자신만의 폴더명을 만들어 사용하세요.
<div ani_type="slide(auto:0)" controll_type="polder:1,btn_type:1" class="slide">
<div slide_type="slide" class="slide blue">slide1</div>
<div slide_type="slide" class="slide red none">slide2</div>
<div slide_type="slide" class="slide orange none">slide3</div>
</div>
<div class="alram_box">polder:1</div>
[속성중 폴더명1] 예제소스보기
<div ani_type="slide(auto:0)" controll_type="polder:2,btn_type:1" class="slide">
<div slide_type="slide" class="slide blue">slide1</div>
<div slide_type="slide" class="slide red none">slide2</div>
<div slide_type="slide" class="slide orange none">slide3</div>
</div>
<div class="alram_box">polder:2</div>
[속성중 폴더명2] 예제소스보기
<div ani_type="slide(auto:0)" controll_type="polder:3,btn_type:1" class="slide">
<div slide_type="slide" class="slide blue">slide1</div>
<div slide_type="slide" class="slide red none">slide2</div>
<div slide_type="slide" class="slide orange none">slide3</div>
</div>
<div class="alram_box">polder:3</div>
[속성중 폴더명3] 예제소스보기
※ 위 예제는 btn_type:1로, "항상 나타남" 설정되어 있습니다.
btn/btn_play/btn_goto버튼 출력여부 설정
btn:0,btn_play:0,btn_goto:0
<div ani_type="slide(auto:1,delay:2000)" controll_type="btn:0,btn_play:0,btn_goto:0" class="slide">
<div slide_type="slide" class="slide blue">slide1</div>
<div slide_type="slide" class="slide red none">slide2</div>
<div slide_type="slide" class="slide orange none">slide3</div>
</div>
<div class="alram_box">btn:0,btn_play:0,btn_goto:0</div>
[btn:0,btn_play:0,btn_goto:0] 예제소스보기
btn:1,btn_play:0,btn_goto:0
<div ani_type="slide(auto:1,delay:2000)" controll_type="btn:1,btn_play:0,btn_goto:0" class="slide">
<div slide_type="slide" class="slide blue">slide1</div>
<div slide_type="slide" class="slide red none">slide2</div>
<div slide_type="slide" class="slide orange none">slide3</div>
</div>
<div class="alram_box">btn:1,btn_play:0,btn_goto:0</div>
[btn:1,btn_play:0,btn_goto:0] 예제소스보기
btn:0,btn_play:1,btn_goto:0
<div ani_type="slide(auto:1,delay:2000)" controll_type="btn:0,btn_play:1,btn_goto:0" class="slide">
<div slide_type="slide" class="slide blue">slide1</div>
<div slide_type="slide" class="slide red none">slide2</div>
<div slide_type="slide" class="slide orange none">slide3</div>
</div>
<div class="alram_box">btn:0,btn_play:1,btn_goto:0</div>
[btn:0,btn_play:1,btn_goto:0] 예제소스보기
btn:0,btn_play:0,btn_goto:1
<div ani_type="slide(auto:1,delay:2000)" controll_type="btn:0,btn_play:0,btn_goto:1" class="slide">
<div slide_type="slide" class="slide blue">slide1</div>
<div slide_type="slide" class="slide red none">slide2</div>
<div slide_type="slide" class="slide orange none">slide3</div>
</div>
<div class="alram_box">btn:0,btn_play:0,btn_goto:1</div>
[btn:0,btn_play:0,btn_goto:1] 예제소스보기
<div id="btn_test1" ani_type="slide(auto:0)" controll_type="btn_play:0,btn_goto:0" class="slide2">
<div slide_type="slide" class="slide2 blue">slide1</div>
<div slide_type="slide" class="slide2 red none">slide2</div>
<div slide_type="slide" class="slide2 orange none">slide3</div>
</div>
[btn버튼 속성 설정해보기] 예제소스보기
prev,next버튼 을
btn_in :
0(안쪽)
1(바깥쪽)
에
보이는 타입을
btn_type :
0(마우스 오버시)
1(항상 나타남)
으로 설정합니다.
이 때,
padding 값으로
btn_padding :
0
10
20
30
50
을 주고,
투명 값으로
opacity :
10
20
30
40
50
60
70
80
90
100
을 줍니다.
btn버튼 속성설정 예제 초기값 복원
btn_goto 는 10개 이하여야합니다.
10개 이상일 경우, 출력되지 않습니다.
<div id="goto_test1" ani_type="slide(auto:0)" controll_type="btn:0,btn_play:0" class="slide2">
<div slide_type="slide" class="slide2 blue">slide1</div>
<div slide_type="slide" class="slide2 red none">slide2</div>
<div slide_type="slide" class="slide2 orange none">slide3</div>
</div>
예제소스보기
goto버튼 을
btn_goto_in :
0(안쪽)
1(바깥쪽)
에 기준해서,
위치 를
btn_goto_pos :
1(상단/좌측)
2(상단/중앙)
3(상단/우측)
4(하단/좌측)
5(하단/중앙)
6(하단/우측)
으로 설정합니다.
이 때,
padding 값으로
btn_goto_padding :
0
10
20
30
50
을 주고,
투명 값으로
opacity :
10
20
30
40
50
60
70
80
90
100
을 줍니다.
goto버튼 속성설정 예제 초기값 복원
만약 자신의 코드(자바스크립트)를 만들어, 이 콘트롤과 연동하시길 원하실 때 사용하시면 됩니다.
<script type="text/javascript" src="./m9_data/javascript/m9slide.js"></script>
<div id="test1 " class="slide2 orange"></div>
자바스크립트로 세팅해주세요. 콘트롤 박스 세팅은 페이지가 모두 로드된 후, 세팅되어야하므로 jquery의 $(function() { ... } 형식으로 제작한다.
콜백함수 : 콘트롤 버튼들이 눌러졌을(이벤트 발생시)때, 실행될 코드
// 콘트롤 세팅적용할 오브젝트 ,총수 ,자동여부 ,콜백함수 );
<style>
.slide { width:250px;height:200px;font-size:45pt;line-height:200px;text-align:center; }
.slide2 { width:400px;height:200px;font-size:45pt;line-height:200px;text-align:center; }
.none { display:none; }
.blue { background:blue; }
.red { background:red; }
.orange { background:orange; }
.alram_box { font-size:20px;font-weight:bold;padding:10px; }
</style>
<div id="test1" class="slide2 orange">333333</div>
<script>
$(function() {
Delay_fuc2("test1",2000,function() {
var Cid = _get_object("test1"); // 오브젝트 전환
// 콘트롤 세팅(총수:5,자동:0)
M9CONTROLLBOX.setting(Cid,5,0,function(Did,Dtype){ user_func(Did,Dtype); });
});
// 사용자 콜백함수 선언
function user_func(Did,Dtype) {
var Cid = _get_object(Did); // 오브젝트 전환
if (check_num(Dtype)) { // 숫자일 경우
alert("눌러진 goto 버튼은 " + Dtype + "번이고, 자동여부는 " + Cid._ControllBox_Auto);
M9CONTROLLBOX.change_btn_goto(Cid._ControllBox,(Dtype-1)); // goto 버튼 변경
} else {
alert("눌러진 버튼은 " + Dtype + "이고, 자동여부는 " + Cid._ControllBox_Auto);
}
}
});
</script>
[M9CONTROLLBOX 응용] 예제소스보기
4. controll_type을 주어 속성을 설정하기
<div id="test1 " controll_type ="btn:1,btn_play:1,btn_goto:1 "></div>
TOP
등록일: 2013-10-29 01:27:14
마지막 수정일: 2015-08-27 22:22:11
자바스크립트(JS)
