https://bexco.co.kr/resources/_Js/jquery/jquery.cs_tab.js

1$(function() {
2	cTabMenu.init();
3	bTabMenu.init();
4});
5
6var cTabMenu = {
7	init : function() {
8		$(window).on("load", function() {
9			cTabMenu.getTabState();
10		});
11		this.mTabCast();
12		this.mTabAbtnCast();
13		this.mBrResize();
14	},
15	getTabState : function() {
16		var thiss = this;
17		if ( $(window).width() <= 800 ) {
18			$("body .c-tab01").each(function() {
19				if ( $(this).hasClass("noAutoTab") ) {
20					return false;
21				} else {
22					thiss.setMtab( $(this), "set" );
23				}
24			});
25			$("body .c-tab02").each(function() {
26				if ( $(this).hasClass("noAutoTab") ) {
27					return false;
28				} else {
29					thiss.setMtab( $(this), "set" );
30				}
31			});
32			$("body .uoPart-wr .upTab").each(function() {
33				thiss.setMtab( $(this), "set" );
34			});
35			$("body .hasManualTab1").each(function() {
36				if ( $(this).hasClass("noAutoTab") ) {
37					return false;
38				} else {
39					thiss.setMtab( $(this), "set" );
40				}
41			});
42		} else if ( $(window).width() > 800 ) {
43			$("body .c-tab01").each(function() {
44				if ( $(this).hasClass("noAutoTab") ) {
45					return false;
46				} else {
47					thiss.setMtab( $(this), "release" );
48				}
49			});
50			$("body .c-tab02").each(function() {
51				if ( $(this).hasClass("noAutoTab") ) {
52					return false;
53				} else {
54					thiss.setMtab( $(this), "release" );
55				}
56			});
57			$("body .uoPart-wr .upTab").each(function() {
58				thiss.setMtab( $(this), "release" );
59			});
60			$("body .hasManualTab1").each(function() {
61				if ( $(this).hasClass("noAutoTab") ) {
62					return false;
63				} else {
64					thiss.setMtab( $(this), "release" );
65				}
66			});
67		}
68	},
69	setMtab : function( $obj, action ) {
70		var num = util.getNumberOnly( $obj.attr("class").split(" ")[0] );
71		var txt = $("ul li.over a span", $obj ).text();
72		if ( txt == "" ) {
73			txt = "하위메뉴 선택하기";
74		}
75		if ( action == "set" ) {
76			$obj.addClass("mSet");
77			if ( $obj.find(".ctab" + num + "Ctrl").length <= 0 ) {
78				$obj.prepend("<button class='ctab" + num + "Ctrl'><span>" + txt + "</span></button>");
79			}
80			$("ul", $obj).hide();
81			$("button", $obj ).removeClass("over");
82		} else if ( action == "release" ) {
83			$obj.removeClass("mSet");
84			if ( $obj.find(".ctab" + num + "Ctrl").length >= 1 ) {
85				$obj.find(".ctab" + num + "Ctrl").remove();
86			}
87			$("ul", $obj).show();
88		}
89	},
90	mTabCast : function() {
91		$(document).on("click", ".mSet > button", function() {
92			var thisb = $(this);
93			$tabUL = $(this).next();
94			if ( $(this).hasClass("over") ) {
95				$(this).removeClass("over");
96				$tabUL.slideUp();
97			} else {
98				$(this).addClass("over");
99				$tabUL.slideDown();
100			}
101			$(".mSet").each(function() {
102				$notThisb = $(".mSet > button").not( thisb );
103				if ( $notThisb.hasClass("over") ) {
104					$notThisb.removeClass("over");
105					$notThisb.next().slideUp();
106				}
107			});
108		});
109		$(".mSet ul li a").on("click", function() {
110			$txtMsg = $("span", $(this) ).text();
111			$(this).closest("ul").prev().find("span").text( $txtMsg );
112			$(this).closest("ul").prev().trigger("click");
113		});
114	},
115	mTabAbtnCast : function() {
116		var mTabAbtn = $(".mSet ul li a");
117		mTabAbtn.on("click", function() {
118			$(this).closest("ul").prev().removeClass("over");
119			$(this).closest("ul").slideUp();
120		});
121	},
122	mBrResize : function() {
123		var cTabWidth = $(window).width();
124		$(window).resize(function() {
125			if ( cTabWidth != $(window).width() ) {
126				cTabMenu.getTabState();
127				cTabWidth = $(window).width();
128			}
129		});
130	}
131}
132
133var bTabMenu = {
134	init : function() {
135		$bTab = $(".b-tab01");
136		if ( $bTab.hasClass("noAutoTab") ) {
137			return false;
138		} else {
139			if ( $bTab.length > 0 ) {
140				this.bTabCast();
141			} else {
142				return false;
143			}
144		}
145	},
146	bTabTimeout : null,
147	bTabCast : function() {
148		bTabMenu.tabConfig().done( function( message ) {
149			// ** console.log( message );
150			bTabMenu.tabGen();
151		}).fail( function( error ) {
152			// ** console.log( error );
153		}).always( function() {
154			// ** console.log( "완료" );
155		});
156	},
157	tabConfig : function() {
158		$deferred1 = $.Deferred();
159		try {
160			$("ul", $bTab ).wrap("<div class='tabinwr'></div>");
161			$bTab.append("<div class='button-wr'><button class='btn-prev'><span class='blind'>이전</span></button><button class='btn-next'><span class='blind'>다음</span></button></div>");
162			$(".btn-prev", $bTab ).prop( "disabled", true ).addClass("disabled");
163			$deferred1.resolve( "tabConfig 성공" );
164		} catch( err ) {
165			$deferred1.reject( err )
166		}
167		return $deferred1.promise();
168	},
169	tabGen : function() {
170		$bTabIN = $(".tabinwr", $bTab );
171		$bTabUL = $("ul", $bTab );
172		$bTabLI = $("li", $bTabUL );
173		$bTabLILen = $bTabLI.length;
174		$bTabArr = $(".button-wr", $bTab );
175		this.sizeSet();
176		this.brResize();
177		this.edgeLRctrl();
178	},
179	edgeLRctrl : function() {
180		$("a", $bTabLI ).on("mouseenter", function() {
181			$bTabLI.removeClass("removeBarEdge");
182			$hoverStdLI = $(this).parent();
183			$hoverStdLI.prev().addClass("removeBarEdge");
184		});
185		$bTabIN.on("mouseleave", function() {
186			$bTabLI.removeClass("removeBarEdge");
187		});
188	},
189	brResize : function() {
190		$(window).resize(function() {
191			if(this.resizeTO) {
192				clearTimeout(this.resizeTO);
193			}
194			this.resizeTO = setTimeout(function() {
195				$(this).trigger('resizeEnd');
196			}, 300 );
197		});
198		$(window).on('resizeEnd', function() {
199			$bTabLI.removeClass("removeBar");	// ** 화면당 최우측 바 제거 클래스 초기화후 삽입.
200			bTabMenu.sizeSet();
201		});
202	},
203	sizeSet : function() {
204		$w_w = $(window).width();
205		if ( 1400 < $w_w ) {
206			$bTabType = 6;
207		} else if ( 1200 <= $w_w && $w_w < 1399 ) {
208			$bTabType = 5;
209		} else if ( 1000 <= $w_w && $w_w < 1199 ) {
210			$bTabType = 4;
211		} else if ( 700 <= $w_w && $w_w < 999 ) {
212			$bTabType = 3;
213		} else if ( $w_w < 699 ) {
214			$bTabType = 2;
215		}
216
217		bTabMenu.setWidth( $bTabType );
218	},
219	setWidth : function( type ) {
220		var curLiW = this.resetLiWidth();
221		if ( type == 2 && $bTabLILen == 2 ) {	// ** 모바일에서 메뉴가 2개일때 미관상 여백제거.
222			$bTab.addClass("mExtra1");
223		} else {
224			$bTab.removeClass("mExtra1");
225		}
226		/*
227		if ( type < $bTabLILen ) {
228			$bTabUnit = type;
229		} else {
230			$bTabUnit = $bTabLILen;
231		}
232		// */
233		$bTabUnit = type;
234		// ** console.log( "type : " + type + " / $bTabLILen : " + $bTabLILen );
235		if ( $bTabLILen <= type ) {
236			$bTabLI.last().addClass("removeBar");	// ** 브라우저 사이즈대비 기준개수보다 버튼노드의 개수보다 작을경우 마지막 노드에 구분선 제거 클래스 삽입.
237			$bTabArr.hide();
238			$bTab.addClass("arrKeyHide");
239		} else {
240			$bTabLI.eq( ( $bTabUnit - 1 ) ).addClass("removeBar");	// ** 화면당 최우측 바 제거 클래스 삽입.
241			$bTabArr.show();
242			$bTab.removeClass("arrKeyHide");
243			this.arrBtnCast();
244		}
245
246		if(curLiW >= $("#cont").width()){
247			$clickIdx = 0;
248			$bTabLIW = Math.floor( $bTabIN.width() / $bTabUnit * 100 ) / 100;
249			$bTabLI.css({ "width":$bTabLIW+"px" });
250			$bTab.addClass("stable");
251			$setLeftPosi = $bTabLIW * $("li.over", $bTabUL).index();
252			var loadLeftPosi = $setLeftPosi;
253			var loadMaxPosi = ( $bTabLILen - $bTabUnit ) * $bTabLIW;
254
255			if( $("li", $bTabUL).hasClass("over") ){
256				var setFirstPosition = loadLeftPosi > loadMaxPosi ? loadMaxPosi : loadLeftPosi;
257				bTabMenu.setPosition();

258				$bTabUL.css({ "left": "-" + setFirstPosition + "px" });
259			}
260		} else {
261			$bTabUL.removeAttr("style");
262			$bTabLI.removeAttr("style");
263		}
264	},
265	setPosition : function() {
266		if( $clickIdx == 0 ){
267			$maxLimited = -(( $bTabLILen - $bTabUnit ) * $bTabLIW);
268		}
269		if ( 0 === $setLeftPosi ) {
270			// ** console.log( "왼쪽 끝" );
271			$(".btn-prev", $bTab ).prop( "disabled", true ).addClass("disabled");
272			$(".btn-next", $bTab ).prop( "disabled", false ).removeClass("disabled");
273			$setLeftPosi = 0;
274		} else if ( $setLeftPosi <= $maxLimited ) {
275			// ** console.log( "우측 끝" );
276			$(".btn-prev", $bTab ).prop( "disabled", false ).removeClass("disabled");
277			$(".btn-next", $bTab ).prop( "disabled", true ).addClass("disabled");
278
279			$setLeftPosi = $maxLimited;
280		} else {
281			$(".btn-prev", $bTab ).prop( "disabled", false ).removeClass("disabled");
282			$(".btn-next", $bTab ).prop( "disabled", false ).removeClass("disabled");
283		}
284	},
285	arrBtnCast : function() {
286		$clickPlaying = false;
287		$("button", $bTabArr ).on("click", function() {
288			if ( !$clickPlaying ) {
289				$clickPlaying = true;
290				$getLeftPosi = Number( $bTabUL.css("left").substr( 0, ($bTabUL.css("left").length-2) ) );	// ** px 글자만 제거. +, - 부호는 제거 하면 안됨. 따라서 getNumberOnly 사용불가.
291				$selectedEdge = $bTabLI.filter(".removeBar");
292				if ( $(this).hasClass("btn-prev") ) {
293					$setLeftPosi = $getLeftPosi + $bTabLIW;
294					$selectedNextEdge = $selectedEdge.prev();
295				} else if ( $(this).hasClass("btn-next") ) {
296					$setLeftPosi = $getLeftPosi - $bTabLIW;
297					$selectedNextEdge = $selectedEdge.next();
298				}
299				$selectedEdge.removeClass("removeBar");		// ** 원래있던 구분선 제거클래스를 우선제거해서 방향 버튼 작동이후 다음 구분선 제거노드 대비.
300				$selectedNextEdge.addClass("removeBar");	// ** 방향키 클릭으로 인해 보여질 구성중에 우측끝 버튼의 구분선 제거.
301				// ** console.log( "$bTabLILen : " + $bTabLILen + " / $bTabUnit : " + $bTabUnit + " / $setLeftPosi : " + $setLeftPosi + " / $maxLimited : " + $maxLimited );
302				// ** console.log( "$setLeftPosi : " + $setLeftPosi + " / $bTabLIW : " + $bTabLIW + " / $maxLimited : " + $maxLimited );
303
304				bTabMenu.setPosition();
305
306				$bTabUL.css({ "left":$setLeftPosi+"px" });
307				$clickIdx++;
308				setTimeout( function() { $clickPlaying = false; }, 300 );	// ** 좌우 이동 시간은 .3초
309
310				bTabMenu.resetPosition();	// === 클릭이 끝나고 3초 후 over로 이동
311			}
312		});
313	},
314	resetPosition : function(){
315		clearTimeout(bTabMenu.bTabTimeout);
316		bTabMenu.bTabTimeout = setTimeout(function(){
317			$setLeftPosi = $bTabLIW * $("li.over", $bTabUL).index();
318			bTabMenu.setPosition();
319			$bTabUL.css({ "left":"-" +$setLeftPosi+"px" });
320		}, 3000);
321	},
322	resetLiWidth : function(){
323		var liW = 0;
324		$bTabLI.each(function(){
325			liW += $(this).width();
326		});
327
328		return liW;
329	}
330}