스킨 Customize 시작가이드

목차

1. 파일위치
2. 스킨에 대한 참조 얻기
3. 이벤트 콜백함수 사용
4. CSS Skinning 참조

파일위치

제공한 소스의 skin폴더의 skin.html 에서 수정합니다.

• html 수정 : skin/skin.html 요소수정및 스크립트 수정
• css수정할 폴더위치 : skin/_inc 하위 폴더 css를 수정합니다.
• 이미지수정 폴더위치 : skin/_images 하위폴더 이미지 수정합니다.
• 수정할 js 파일위치 : skin/mcplayer.js API 사용한 동작스크립트 수정

스킨에 대한 참조 얻기

skin.min.js 가 include 되어있습니다. 위 자바스크립트가 설정되어있다면

MCSkin 이란 인스턴스가 생성되어있습니다.

이 객체를 통해 아래에 있는 Skin API를 사용하여 이벤트발생시, 혹은 클릭시 등의 스크립트 변경을 통해

좀더 동적으로 Skin 을 커스텀 할수 있습니다.

이벤트 콜백함수 사용

skin api에는 전체적으로 parameter 맨 마지막 인수를 callback함수로 받습니다.

api를 사용할때 특정 동작스크립트를 사용하고 싶다면 다음과 같이 사용하면 됩니다.

재생/일시정지 토글예제

$('#버튼').click(function(){
    MCSkin.playPause(); //재생/일시정지 기능사용

});

재생/일시정지 토글 콜백함수 사용예제

MCSkin.playPause(function(state){
    alert('재생/일시정지토글시 skin 변화 로직 콜백함수입니다.');

    //예제 - state 값을 받아서 값에 따라 skin처리
    if(state == 'Playing'){
        $('#재생버튼').hide();
        ...
    } else if(state == 'Paused'){
        $('#일시정지버튼').hide();
        ...
    }

});

CSS Skinning 참조 객체

기능에 따른 html UI의 class명이 존재하고 mc-라는 prefix 규칙을 따르고 있습니다.
좀더 쉽게 사용가능하도록 jquery 변수로 미리 선언되어 있으며
jquery 변수는 $가 변수명앞에 붙는 규칙을 두고 있습니다.

스킨을 커스터마이징할때 미리존재하는 기능변수들을 사용하시면 좀더 쉽게 작업하실수 있습니다.

기능변수를 사용한 상세예제

//플레이 일시정지 토글버튼을 클릭했을때
$mcPlayToggle.click(function(){
    //아래와 같이 재생/일시정지 기능과 콜백함수사용
    MCSkin.playPause(function(state){
        alert('재생/일시정지토글시 skin 변화 로직 콜백함수입니다.');

         //예제 - state 값을 받아서 값에 따라 skin처리
        if(state == 'Playing'){
            $('#재생버튼').hide();
            ...
        } else if(state == 'Paused'){
            $('#일시정지버튼').hide();
            ...
        }
    });
});

기능에 따른 변수들의 상세표들은 아래와 같습니다.

control

volume

preview

default