/**
by. 잎새
파일명 : newTm
언어 : jQuery
수정일 : 2010.11.19
문의 : godloves83@naver.com
네이트온 : godlovestory@hanmail.net
다운로드 : http://skyweb.dothome.co.kr/ui
** newTm사용법 *********************************************************************
인자값을 1뎁스,2뎁스로 구분지을수 있는경우
jQuery.newTm.setting(1,1);
인자값을 파라미터 형식으로 보낼시
jQuery.newTm.setting("0101");
>> Sample <<
>> 업데이트 <<
- 수정일 2010.11.19 -
1. 인자값 실무사용을 위해 두가지(1dep,2dep),(param) 형태 선택기능
2. 2차메뉴 자동사라짐 선택기능
3. 2차메뉴 이미지 사용시 선택기능
4. 2차메뉴 표시제한 선택기능 예) $tm2dep_hideArray = "1,2,3,4";
5. 자동 2차메뉴 넓이값, 좌표값 적용 선택기능
6. menu초기 실행위치로 되돌아오기 선택기능 및 시간입력기능
7. 2차메뉴 기본 스타일(4개) 적용
>> type <<
- 수정일 2010.11.19 -
NULL : 2차메뉴 효과없음
type_1 : 2차메뉴 opacity효과
type_2 : 2차메뉴 단계별 opacity효과
type_3 : 2차메뉴 blackblind opacity효과
type_4 : 2차메뉴 up,down효과
************************************************************************************
**/
/** top menu **/
var $j,$tm,$tmC,$tmCC,$tmCCC,$tm1dep_NaN,$tm1dep_ov,$tm2dep_imgCheck,$tm2dep_topPotision,
$tm2dep_ovClass,$tmSavedep1,$tmSavedep2,$tm2dep_autoHide,$tm2dep_autoHideTime,$tm2dep_autoHideSpeed,
$tm2dep_NaN,$tm2dep_ov,$tmAutoDefaultTime,$tmAutoDefaultSpeed,$tmAutoDefault,$tmAutoSize,$tm2dep_style,
$tm2dep_hideArray;
(function($){
jQuery.newTm = {
//topMenu CSS Setting
setting : function(dep1,dep2){
//user setting
$tmParam = "N";// 인자가 파라미터 형식인지구분(구분 : Y,N)
$tmAutoSize = "Y";// 2dep Auto Size, 좌우정렬 사용여부(구분 : Y,N)
$tmAutoDefault = "Y";// 초기 메뉴 셋팅값으로 돌아가기(구분 : Y,N)
$tmAutoDefaultSpeed = 2000;// $tmAutoDefault Time(1000:1초)
$tm2dep_autoHide = "Y";// 2차메뉴 자동사람짐효과(구분 : Y,N)
$tm2dep_autoHideSpeed = 2000;// 2차메뉴 자동사람짐효과시간(1000:1초)
$tm2dep_style = "NULL";//2dep 효과 타입설정(기본: "",효과적용타입은 위의 주석을 참조);
$tm1dep_NaN = ".gif";// 1dep 기본이미지
$tm1dep_ov = "_ov.gif";// 1dep 마우스 오버시 이미지
$tm2dep_imgCheck = "N";// 2차메뉴의 이미지여부(구분 : Y,N)
$tm2dep_NaN = ".gif";// 2dep 기본이미지
$tm2dep_ov = "_ov.gif";// 2dep 마우스 오버시 이미지
$tm2dep_ovClass = "tm_link_2th_ov";// 2차메뉴의 ovClass명
$tm2dep_topPotision = 5;// 2차메뉴의 top값 조절
$tm2dep_hideArray = "Null";
//fn:Call
jQuery.newTm.call(dep1,dep2);
},
//setting Call
call : function(dep1,dep2){
//default setting
$j = jQuery;
$tm = $j("#tm");//obj 1deps Menu obj
$tmC = $tm.find(">li");//obj 1deps Menu list
$tmCC = $tmC.find(">ul");//obj 2deps Menu obj
$tmCCC = $tmCC.find(">li");//obj 2deps Menu list
//css setting
$tmC.css({
"float":"left","clear":"none"
});
$tmCC.css({
"position":"absolute",
"left":"0px",
"top":($tmC.height()+$tm2dep_topPotision)+"px",
"z-index":"0",
//"width":$tm.width()+"px",
"float":"none"
});
//2dep메뉴 자동사이즈
if($tmAutoSize == "Y"){
jQuery.newTm.autoSize();
}
//2dep hide
$tmCC.hide();
//인자가 파라미터 형식이면 형식 분류
if($tmParam == "Y"){
var $tmParam_dep = dep1;
dep1 = $tmParam_dep.substring(0,2);//앞자리 두자리
dep2 = $tmParam_dep.substring(2,4);//나머지 두자리
}
$tmSavedep1 = (dep1-1);//1dep ovImg Save
$tmSavedep2 = (dep2-1);//2dep ovImg Save
$j.newTm.view(dep1,dep2);//onload view start
//user control
$tmC.find(">a").bind("mouseover focus",function(){$j.newTm.ov(this)});//user mouseover
$tmC.find(" a").bind("focus",function(){$j.newTm.autoHide_off()});//user focus
$tmC.find(" a").bind("blur",function(){$j.newTm.autoHide_on('time',dep1-1)});//user blur
//2dep img over control
if($tm2dep_imgCheck == "Y"){
//user mouseover
$tmCCC.find(">a").bind(
"mouseover focus",
function(){
var cnt = $tmCCC.find(">a").index(this);
$j.newTm.imgov(cnt);
}
);
//user mouseout
$tmCCC.find(">a").bind(
"mouseout blur",
function(){
var cnt = $tmCCC.find(">a").index(this);
$j.newTm.imgout(cnt);
}
);
//현제페이지 이벤트 예외처리
$tmC.eq((dep1-1)).find(">ul>li:eq("+(dep2-1)+")>a").unbind("mouseover mouseout focus blur");
}
//user focus Class add
$tmCCC.find(">a").bind(
"focus",
function(){
$j(this).addClass($tm2dep_ovClass);
}
);
//user blur
$tmCCC.find(">a").bind(
"blur",
function(){
var cnt = $tmCCC.find(">a").index(this);
$j(this).removeClass($tm2dep_ovClass);
}
);
//현제페이지 이벤트 예외처리
$tmC.eq((dep1-1)).find(">ul>li:eq("+(dep2-1)+")>a").unbind("focus blur");
//user mouseout
if($tm2dep_autoHide == "Y"){
$tm.bind("mouseenter",function(){$j.newTm.autoHide_off()});
$tm.bind("mouseleave",function(){$j.newTm.autoHide_on('time',$tmSavedep1)});
//onload autohide start
$j.newTm.autoHide_on('time',dep1);
}
//메뉴 초기값 돌아가기
if($tmAutoDefault == "Y"){
$tm.bind("mouseenter",function(){$j.newTm.autoDefault_off()});
$tm.bind("mouseleave",function(){$j.newTm.autoDefault_on(dep1)});
}
//2차메뉴 remove처리
if($tm2dep_hideArray || $tm2dep_hideArray != "NULL"){
var $hideArray = $tm2dep_hideArray.split(",");
var $hideArraySize = $hideArray.length;
for(var g=0; g<$hideArraySize; g++){
var ArrayCnt = Number($hideArray[g])-1;
$tmC.eq(ArrayCnt).find(">ul").remove();
}
}
},
//topMenu view
view : function(dep1,dep2){
dep1--;
dep2--;
//1dep ovImg
//old
var dep1ImgOld = $tmC.eq($tmSavedep1).find(">a>img").get(0);
dep1ImgOld.src = dep1ImgOld.src.replace($tm1dep_ov,$tm1dep_NaN);
//new
var dep1ImgNew = $tmC.eq(dep1).find(">a>img").get(0);
dep1ImgNew.src = dep1ImgNew.src.replace($tm1dep_NaN,$tm1dep_ov);
//에러예방
var dep1ImgNewError = $tm1dep_ov.split(".");
var dep1ImgNewErrorCh1 = dep1ImgNewError[0]+dep1ImgNewError[0];
dep1ImgNew.src = dep1ImgNew.src.replace(dep1ImgNewErrorCh1,dep1ImgNewError[0]);
//2dep ov
//hide
$tmC.eq($tmSavedep1).find(">ul").hide();
//show
if(!isNaN(dep2)){
var $tm2depObj = $tmC.eq(dep1).find(">ul");
var $tm2depObjC = $tm2depObj.find(">li:eq("+dep2+")>a");
if($tm2dep_imgCheck == "Y"){
//2dep ovimg
//old
var dep2ImgOld = $tm2depObj.find(">li:eq("+$tmSavedep2+")>a>img").get(0);
dep2ImgOld.src = dep2ImgOld.src.replace($tm2dep_ov,$tm2dep_NaN);
//new
var dep2ImgNew = $tm2depObj.find(">li:eq("+dep2+")>a>img").get(0);
dep2ImgNew.src = dep2ImgNew.src.replace($tm2dep_NaN,$tm2dep_ov);
//에러예방
var dep2ImgNewError = $tm2dep_ov.split(".");
var dep2ImgNewErrorCh1 = dep2ImgNewError[0]+dep2ImgNewError[0];
dep2ImgNew.src = dep2ImgNew.src.replace(dep2ImgNewErrorCh1,dep2ImgNewError[0]);
}
//2dep text
$tm2depObj.show();//2dep show
$tm2depObjC.addClass($tm2dep_ovClass);//2dep ov Class add
} else {
var $tm2depObj = $tmC.eq(dep1).find(">ul");
$tm2depObj.show();//2dep show
}
//스킨적용
jQuery.newTm.skin($tm2dep_style,dep1,"on");
//old Save
$tmSavedep1 = (dep1);
$tmSavedep2 = (dep2);
},
//user mouseover
ov : function(hit){
var dep1Hit = $tmC.find(">a").index(hit)+1;
$j.newTm.view(dep1Hit);//view Call
},
//user 2dep autoHide
autoHide_on : function(timeCount,dep1){
//스킨적용
jQuery.newTm.skin($tm2dep_style,dep1," off");
if(timeCount == "fast"){
$tmCC.hide();
} else {
$tm2dep_autoHideTime = setTimeout(function(){$tmCC.hide()},$tm2dep_autoHideSpeed);
}
},
autoHide_off : function(){
clearTimeout($tm2dep_autoHideTime);
},
imgov : function(cnt){
//new
var dep2ImgNew = $tmCCC.find(" a").eq(cnt).find(">img").get(0);
dep2ImgNew.src = dep2ImgNew.src.replace($tm2dep_NaN,$tm2dep_ov);
//에러예방
var dep2ImgNewError = $tm2dep_ov.split(".");
var dep2ImgNewErrorCh1 = dep2ImgNewError[0]+dep2ImgNewError[0];
dep2ImgNew.src = dep2ImgNew.src.replace(dep2ImgNewErrorCh1,dep2ImgNewError[0]);
},
imgout : function(cnt){
//old
var dep2ImgNew = $tmCCC.find(" a").eq(cnt).find(">img").get(0);
dep2ImgNew.src = dep2ImgNew.src.replace($tm2dep_ov,$tm2dep_NaN);
},
//user 2dep autoDefault Position
autoDefault_on : function(dep1){
$tmAutoDefaultTime = setTimeout(
function(){
//old
var dep1ImgOld = $tmC.eq($tmSavedep1).find(">a>img").get(0);
dep1ImgOld.src = dep1ImgOld.src.replace($tm1dep_ov,$tm1dep_NaN);
//new
var dep1ImgNew = $tmC.eq((dep1-1)).find(">a>img").get(0);
dep1ImgNew.src = dep1ImgNew.src.replace($tm1dep_NaN,$tm1dep_ov);
//에러예방
var dep1ImgNewError = $tm1dep_ov.split(".");
var dep1ImgNewErrorCh1 = dep1ImgNewError[0]+dep1ImgNewError[0];
dep1ImgNew.src = dep1ImgNew.src.replace(dep1ImgNewErrorCh1,dep1ImgNewError[0]);
//재정의
$tmCC.hide().eq((dep1-1)).show();
//자동사라짐효과 선택시 재호출
if($tm2dep_autoHide == "Y" && $tmAutoDefaultSpeed >= $tm2dep_autoHideSpeed){
$j.newTm.autoHide_on("fast",(dep1-1));
}
//초기값 설정
$tmSavedep1 = dep1;
},
$tmAutoDefaultSpeed
);
},
autoDefault_off : function(){
clearTimeout($tmAutoDefaultTime);
},
//2dep autoSize
autoSize : function(){
var objLeftPosition=0;//left값을 받아오기위해 1dep의 넓이값을 순차적으로 저장하여 반영한다.
for(var i=0; i<$tmC.size(); i++){
var obj = $tmC.eq(i).find(">ul");
var objC = $tmC.eq(i).find(">ul>li");
var objAllWidth = 0;
for(var j=0; ja").width();
} else {
//넓이정의
obj.width($tm.width());
//위치정의
obj.css("left","0px");
}
}
},
/*********************************************************************************************
스킨 적용 및 추가
**********************************************************************************************/
//스킨적용
skin : function(skin,dep1,ch){
if(skin != ""){
if(skin == "type_1"){jQuery.newTm.type_1(dep1,ch);}//스킨타입1
else if(skin == "type_2"){jQuery.newTm.type_2(dep1,ch);}//스킨타입2
else if(skin == "type_3"){jQuery.newTm.type_3(dep1,ch);}//스킨타입3
else if(skin == "type_4"){jQuery.newTm.type_4(dep1,ch);}//스킨타입4
}
},
//2dep 스킨 플러그
type_1 : function(dep1,ch){
var obj = $tmC.eq(dep1).find(">ul");
if(ch == "on"){
//over
$tmCC.css("opacity","0");//전체 2dep opacity 적용
obj.stop();
obj.animate({opacity:1},1000);
} else {
//out
obj.stop();
obj.animate({opacity:0},1000);
}
},
type_2 : function(dep1,ch){
var obj = $tmC.eq(dep1).find(">ul>li");
var typeSpeed = 1000;//기본 Time
var typeSpeedPlus = 300;//기본 Time 증가치
if(ch == "on"){
//over
$tmCCC.css("opacity","0");//전체 2dep opacity 적용
obj.stop();
for(var i=0; iul");
if($j(".tmBlind").size() == 0){
//생성
$j('').prependTo($j("body"));
var $blind = $j(".tmBlind");
var $topVal = ($tm.position().top+$tmC.eq(0).find(">a").height());//tmblind Top값을 설정한다
//css구성
$blind.css({
"position":"absolute",
"left":"0",
"top":$topVal+"px",
"z-index":(Number($tm.css("z-index"))-1),
"width":"100%",
"height":"0px",
"line-height":"0px",
"background":"#000",
"opacity":"0.7"
});
} else {
var $blind = $j(".tmBlind");
}
if(ch == "on"){
//over
$tmCC.css("opacity","0");//전체 2dep opacity 적용
if(obj.size() != 0){
//2dep상단여백값을 위아래로 주기위해 *2적용
var onHeight = obj.innerHeight()+(Number($tm2dep_topPotision*2));
} else {
var onHeight = 0;
}
//blind 시작
$blind.stop();
obj.stop();
$blind.animate(
{height:onHeight+"px"},300
,function(){
obj.animate({opacity:1},500);
}
);
} else {
//out
var $blind = $j(".tmBlind");
//blind 시작
$blind.stop();
obj.stop();
obj.animate(
{opacity:0},500
,function(){
$blind.animate({height:0},300);
}
);
}
},
type_4 : function(dep1,ch){
var obj = $tmC.eq(dep1).find(">ul");
var $topVal = $tmC.eq(0).find(">a").height();//2dep Top값을 설정한다
if($tm.css("overflow") != "hidden"){
$tm.css({"overflow":"hidden"});
$tmC.css({"z-index":"100"});//전체 2dep z-index 적용
}
if(ch == "on"){
//over
obj.stop();
$tmCC.css({"top":"-"+$topVal+"px","z-index":"-1"});//전체 2dep top 적용
obj.animate({top:$topVal},300);
} else {
//out
obj.stop();
//ie가 아닌경우에만 실행.
//ie에서는 tm의 bg가 없을시 공간을 인식하지 않아 예외처리
if(!$j.browser.msie){
obj.animate({top:"-"+$topVal+"px"},300);
}
}
}
}//newTm end
})(jQuery);