UI Laboratory

UI 개발을 위한 레퍼런스

jQuery
리스트 Type
Accordian

fn_accordianToEx(containerID, autoStart, speedNum)
- containerID : list를 포함하고 있는 컨테이너 요소의 ID
- autoStart : 자동롤링에 대한 boolean 값. 자동롤링을 원하면 true를 자동롤링을 원치 않으면 false를 전달한다.
- speedNum : 자동롤링시 롤링되는 속도로 2초단위로 롤링되길 원하면 2000을 전달한다.
설명
예제-1은 list 타입의 아코디언 효과로 자동으로 list를 순회하며 슬라이드되어 보여진다. 또한 mouseover시 자동롤링은 해제되고 제어권은 마우스로 넘어가 마우스 오버시 해당 list만 슬라이드 된다. mouseout이 되면 다시 자동롤링이 설정되어 list를 순회한다.
자동롤링을 위해 두번째 인자에 true를, 속도로 2000을 설정하여 2초에 한번씩 자동으로 롤링이 된다.

fn_accordianToEx('slider1', true, 2000);

예제-1

설명
예제-2는 두번째 인자에 false를 전달하여 자동롤링을 하지 않고 오직 mouseover시에만 해당 list를 슬라이드하고 있다.

fn_accordianToEx('slider1', false, 0);

예제-2

HTML

					

Best Score

  1. 1 <Another Green World>

    브라이언 이노
    (Brian Eno)

  2. 2 Girl On Fire

    앨리샤 키스
    (Alicia Keys)

  3. 3 <I Got a Boy>

    소녀시대

  4. 4 <Lonerism>

    테임 임팔라
    (Tame Impala)

  5. 5 [OST]호빗: 뜻밖의 여정

    호빗: 뜻밖의 여정

  6. 6 <Roy Buchanan>

    로이 부캐넌
    (Roy Buchanan)

  7. 7 <Dumb>

    디아블로
    (Diablo)

CSS

					<style type="text/css">
						h1 {text-align:center;}
						#slider1 {width:250px; margin:10px auto 0;}
						#slider1 ol {padding:10px 0; border:1px solid #eee; border-radius:10px;}
						#slider1 ol li {clear:both; padding:0 10px; line-height:1;}
						#slider1 ol li span.rank {display:inline-block; width:14px; height:12px; margin-right:5px; background-color:#999; border-radius:3px; font-size:10px; color:#fff; line-height:1; text-align:center;}
						#slider1 ol li a {display:block; padding:3px 0;}
						#slider1 ol li a:hover {color:red;}
						#slider1 ol li .details {height:95px; padding:5px 0 0;}
						#slider1 ol li .details:after {content: "."; display: block; height: 0px; clear: both; visibility: hidden;}
						#slider1 ol li .details img {float:left; margin-right:10px;}
						#slider1 ol li .details p {padding-top:10px; font-weight:bold; line-height:18px;}
					</style>
				

Javascript

					<script type="text/javascript">

						fn_accordianToEx('slider1', true, 2000);

						function fn_accordianToEx(containerID, autoStart, speedNum){

							var $container = $('#'+containerID);
							var $details = $container.find('.details');
							var $anchor = $container.children().find('li > a');
							var autoplay = autoStart;
							var speed = speedNum;
							var timer = 0;
							var currentNum = 0;
							var anchorNum = 0;
							var len = $details.length;

							$details.not(':first').hide();

							if(autoplay){
								timer = setInterval(accordian, speed);	
							}

							$anchor.bind({
								'mouseenter': function(){

									autoplay = false;

									if(!autoplay){
										clearInterval(timer);
									}

									anchorNum = $anchor.index(this);
									accordian();
								}
							});

							$container.bind({
								'mouseleave': function(){
									if(autoStart){
										autoplay = true;
										timer = setInterval(accordian, speed);
									}
								}
							});

							function accordian(){

								if(!autoplay){
									if($details.eq(anchorNum).is(':visible') || $details.is(':animated')){
										return false;
									}

									if($details.is(':visible')) $anchor.next().slideUp('normal');
									$details.eq(anchorNum).slideDown('normal');

									currentNum = anchorNum;

									return false;
								}

								var oldNum = currentNum;
								$details.eq(oldNum).slideUp('normal');

								currentNum++;
								currentNum %= len;

								$details.eq(currentNum).slideDown('normal');
							}
						}
					</script>