UI Laboratory

UI 개발을 위한 레퍼런스

jQuery
Slot Tab

설명
예제-1은 Slot 머신 효과의 tab 슬라이드이다. 각각의 tab을 클릭할 때 마다 이미지와 내용부분이 시간차를 두고 Slide 된다.

예제-1

HTML

					

이주의 발견 : 국내 - 하동균 [Mark]

하동균의 솔로 미니 앨범 [Mark]가 이주의 발견에 선정되었다. 이번 앨범이 선정된 이유는 이미 인정받은 보컬 능력과 작곡 작사 능력 때문만은 아니다. 제일 중요한 포인트는 '변화'였다. 앨범의 전체를 관통하는...

큰 형님의 의미 있는 도전 : Big Boi의 [Vicious Lies And Dangerous Rumors]

브루노 마스와 마찬가지로 대망의 두 번째(혹은 세 번째) 앨범. 하지만 안드레 3000과 함께 아웃캐스트의 두 재주꾼 중 한 명이라는 빅 보이의 입지를 생각하면 그의...

권정열이 선택한 첫번째 앨범:Maroon5의 [Overexposed]

"마룬 파이브는 영향을 많이 받은 뮤지션인데, 무엇보다 음악 하는 태도에서 영향을 가장 많이 받았어요. 1집부터 3집까지 모두 잘 돼서 4집의 행보가 무척 궁금했어요...

CSS

					<style type="text/css">
						#slot-machine-tabs {width:440px; margin:0 auto; margin-top:25px;}

						.tabs {list-style: none; overflow: hidden; padding-left: 1px; }
							.tabs li { display: inline; }
							.tabs li a { display: block; float: left; padding: 6px 8px; color: black; border: 1px solid #ccc; background: #eee; margin: 0 0 0 -1px; }
							.tabs li a.current { background: white; border-bottom: 0; position: relative; top: 2px; z-index: 2; }

						.box-wrapper { -moz-box-shadow: 0 0 20px black; -webkit-box-shadow: 0 0 20px black; padding: 20px; background:#fff; border:1px solid #ccc; margin: -1px 0 0 0; height: 130px; position: relative; }

						.content-box {position: absolute; top: 20px; left: 20px; width: 400px; height: 135px; overflow:hidden;}

						.col-one {width: 130px; float: left; position: relative; top: 150px; margin-right: 6%; }
						.col-two {width: 235px; float: left; position: relative; top: 150px; }
					</style>
				

Javascript

					<script type="text/javascript">
						$(".tabs li:first-child a, .content-box:first").addClass("current");	//.tab클래스의 첫번째 li와 .content-box에 'current' 클래스 추가
						$(".box-wrapper .current .col-one, .box-wrapper .current .col-two").css("top", 0);		//current 클래스밑에 .col-one, .col-two 클래스의 top을 0으로 재설정하여 화면에 보이게 함.

						$("#slot-machine-tabs").on("click",".tabs a",function(e) {		//tab버튼을 click이벤트로 바인드함.

							$el = $(this);

							e.preventDefault();

							if ( (!$el.hasClass("current")) && ($(":animated").length == 0 ) ) {

								$(".tabs li a").removeClass('current');		//모든 tab에서 current 클래스 제거
								$el.addClass('current');					//click이 발생한 tab에만 current 클래스 추가

								speedOne = Math.floor(Math.random()*1000) + 500;	//slide효과에 시간차를 두기위한 랜덤 스피드 설정(0~1500)
								speedTwo = Math.floor(Math.random()*1000) + 500;

								$colOne = $(".box-wrapper .current .col-one");	//현재 current(화면에 보이는) 클래스가 있는 첫번째 요소(.col-one)를 선택

								//alert($colOne.height());
								$colOne.animate({					//첫번째 요소의 높이(height)만큼 top을 -(마이너스)로 재설정하여 화면에서 사라지게 함
									"top": -$colOne.height()
								}, speedOne);
							
								$colTwo = $(".box-wrapper .current .col-two");	//현재 current(화면에 보이는) 클래스가 있는 두번째 요소(.col-two)를 선택
								$colTwo.animate({								//두번째 요소의 높이(height)만큼 top을 -(마이너스)로 재설정하여 화면에서 사라지게 함
									"top": -$colTwo.height()
								}, speedTwo);

								$(".content-box").removeClass('current');		//모든 .content-box 클래스에서 current 클래스를 제거
								hrefSelector = $el.attr("href");				//click된 tab의 href속성에서 값을 가져와 변수에 저장
								$(hrefSelector).addClass("current");			//그 변수에 저장된 값을 id로 갖는 요소에 current 클래스를 추가

								$(".box-wrapper .current .col-one").animate({	//current 클래스를 갖는 첫번재 요소(.col-one)의 top을 0으로 설정하여 화면에 보이게 slide 시킴
									"top": 0
								}, speedOne, function() {
									ifReadyThenReset();							//slide 이후 요소의 위치를 재설정하기 위한 함수(ifReadyThenReset()) 호출
								});

								$(".box-wrapper .current .col-two").animate({	//current 클래스를 갖는 두번재 요소(.col-two)의 top을 0으로 설정하여 화면에 보이게 slide 시킴
									"top": 0
								}, speedTwo, function() {
									ifReadyThenReset();							//slide 이후 요소의 위치를 재설정하기 위한 함수(ifReadyThenReset()) 호출
								});

							}

							var columnReadyCounter = 0;

							function ifReadyThenReset() {		//.current 클래스를 갖는(현재 화면에 보이는) 요소를 제외한 나머지 요소의 top위치를 150으로 재설정하기 위한 함수

								columnReadyCounter++;

								if (columnReadyCounter == 2) {
									$(".col-one").not(".current .col-one").css("top", 150);
									$(".col-two").not(".current .col-two").css("top", 150);
									columnReadyCounter = 0;
								}

							};
						});
					</script>