이번 포스팅은 제이쿼리 플러그인 만들기다.
웹 페이지에서 어떤한 팝업 레이어를 일정 주기로 노출 시키며 mp3 를 재생하여 알림을 주
는 기능이다.
기능 적인 부분 보다는 제이쿼리 플러그인 제작 방법에 주목하자.
현재 이 코드는 JPlayer 자바스크립트 파일이 먼저 로딩 되어야 mp3 를 재생 시킬수 있다.
(JPlayer 없을때 오류가 날 수 있음 jquery.jplayer.min.js 다운받아서 우선적으로 넣을것)
복사 해서 바로 사용 가능
/*
기능 : 엘리먼트를 설정된 값에 따라 노출시키고 알람소리를 재생하는 ktk 알람 플러그인 (JPlayer 필요)
email : nerobong2@gmail.com
product : 김태경
*/
(function($) {
var defaultAttr, methods;
//기본값
defaultAttr = {
showTime : 5000 //노출 시간.
,appearSpeed : 1000 //나타나는 효과 시간
,appearCallBack : null //노출후 콜백 함수
,disAppearSpeed : 1000 //사라지는 시간
,intervalSpeed : 1000
,disAppearCallBack : null //사라지고 콜백 함수
,showType : "fade" //보여주는 타입.
,mediaFile: "" //재생 할 mp3 파일 경로.
,childNode: "li" //대상 엘리먼트에 노출 될 객체 선택자.
,displayLayer : true //레이어 팝업 보이기 true:보임 ,false: 안보임
,soundOn : true //소리 듣기 true: 소리들림 false:안들림
};
methods = {
//기본 속성값을정의하고 알람을 시작한다.
initKtkAlarm: function(options) {
console.log("init()");
var clonedDefaultAttr , el;
clonedDefaultAttr = jQuery.extend({}, defaultAttr);
options = $.extend(clonedDefaultAttr, options);
el = $(this);
methods.playKtkAlarm(el,options);
},
//간격별로 엘리먼트가 알람화면을 순차적으로 노출시키고 알람소리를 재생시킨다.
playKtkAlarm : function(el,option){
methods.setLayout(el,option);
(function looper (i) {
console.log("playKtkAlarm >>> " + i);
//인터벌 딜레이
if(option.intervalSpeed > 0){
setTimeout(function(){
//알림 화면을 디스플레이한다.
if(option.displayLayer
&& $(el.selector + " " + option.childNode).size() > 0
&& $(el.selector + " " + option.childNode).eq(i) != null
&& $(el.selector + " " + option.childNode).eq(i) != undefined){
switch(option.showType) {
case 'fade':
$(el.selector + " " + option.childNode).eq(i).fadeIn(option.appearSpeed,function(){
if(option.appearCallBack != null){
option.appearCallBack();
}
});
break;
default:
$(el.selector + " " + option.childNode).eq(i).fadeIn(option.appearSpeed,function(){
if(option.appearCallBack != null){
option.appearCallBack();
}
});
break;
}
//알림 소리를 울리고
if(option.soundOn && option.mediaFile != ""){
//미디어 파일 재생 함수를 호출한다.
if(el.selector.split("#")[1] != null && el.selector.split("#")[1] !=""){
methods.playMedia(el.selector.split("#")[1] + "_media",option.mediaFile);
}
}
}
}, option.intervalSpeed);
}
setTimeout(function() {
//시간이 지나면
//알람 화면을 fadeout 처리 하고 해당 엘리먼트를 삭제한다.
if(option.displayLayer
&& $(el.selector + " " + option.childNode).size() > 0
&& $(el.selector + " " + option.childNode).eq(i) != null
&& $(el.selector + " " + option.childNode).eq(i) != undefined){
switch(option.showType) {
case 'fade':
$(el.selector + " " + option.childNode).eq(i).fadeOut(option.disAppearSpeed,function(){
if(option.disAppearCallBack != null){
option.disAppearCallBack();
}
});
break;
default:
$(el.selector + " " + option.childNode).eq(i).fadeOut(option.disAappearSpeed,function(){
if(option.disAppearCallBack != null){
option.disAppearCallBack();
}
});
break;
}
}
//childNode 개수만큼 실행.
if ($(el.selector + " " + option.childNode).size() > ++i ){
looper (i);
}else{
}
}, option.showTime)
})(0);
},
setLayout : function(el,option){
$(el.selector).css("postion","relative");
$(el.selector + " " + option.childNode).css("display","none").css("postion","absolute");
if(option.soundOn && option.mediaFile != ""){
$(el.selector).append($("<div>").attr("id",el.selector.split("#")[1] + "_media")
.css("display","none"));
}
},
playMedia : function(mp,url){
if(typeof $("#" + mp).jPlayer === 'function'){
$("#" + mp).jPlayer("clearMedia");
$("#" + mp).jPlayer({
swfPath: "/flash/Jplayer.swf", //설정된 jplayer 에 따라 개별적으로수정
supplied: "mp3",
wmode: "window"
});
$("#" + mp).jPlayer("setMedia", {mp3: url});
$("#" + mp).jPlayer("play", 0);
}else{
console.log("jPlayer must be define brfore ktkAlram.js ");
}
},
};
//$("선택자").ktkAlarm(파라미터 객체); 를 통해 호출 하여 개별 적인 컨택스트를 갖는다 (클로저). $.fn.함수명 으로 jquery 에 확장 플러그인을 등록 한다.
return $.fn.ktkAlarm = function(method) {
//전달된 첫번째 인자가 "init" 같은 메소드 명일 경우
if (methods[method]) {
//전달받은 인자 에 기능 명이 들어가 있을 경우 해당 메소드를 호출 하며
//해당 메소드를 호출 하고 타겟 노드 객체와 두번째 파라미터 오브젝트를 넘긴다.
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
}
//명시적으로 첫번째 인자에 아무것도 전달되지 않고 값이 없거나 파라미터 객체만 전달했을 경우.
if (typeof method === 'object' || !method) {
//타겟 노드와 initKtkAlarm 메소드를 호출 하고 파라미터를 전달한다.
return methods.initKtkAlarm.apply(this, arguments);
}
//에러
return $.error('Method ' + method + ' does not exist on jQuery.vTicker');
};
})(jQuery);
//여기까지 복사
내용은 주석으로 잘 달아놨다...
사용법
아래와 같이 레이어가 존재 하다고 가정 하고
<div style="display:block; position:absolute;">
<ul style="display:block;" id="ul_alarm">
<li style="border:1px solid;">1<a onclick="">닫기</a></li>
<li style="border:1px solid;">2<a onclick="">닫기</a></li>
<li style="border:1px solid;">3<a onclick="">닫기</a></li>
<li style="border:1px solid;">4<a onclick="">닫기</a></li>
<li style="border:1px solid;">5<a onclick="">닫기</a></li>
</ul>
</div>
제이쿼리 선택자.ktkAlarm({옵션}) 으로 호출 하면 구동 된다.
<script type="text/javascript">
$("ul#ul_alarm").ktkAlarm({
showTime : 10000
,appearSpeed : 1000
,appearCallBack : function(){
console.log("appearCallBack().....");
}
,disAppearSpeed : 1000
,intervalSpeed : 2000
,disAppearCallBack : function(){
console.log("disAppearCallBack().....");
}
,showType : "fade"
,mediaFile: "/flash/mp3/alarm.mp3"
,childNode: "li" //실제 노출시킬 레이어 지정 할것.
,displayLayer : true
,soundOn : true
});
</script>
엘리먼트별로 개별적 구동이 가능하다. 소리도 따로따로 울림.
댓글 없음:
댓글 쓰기