UI Laboratory

UI 개발을 위한 레퍼런스

jQuery
공지사항롤링

설명
예제-1, 예제-2는 화살표를 클릭하여 아래 또는 위로 공지사항을 롤링하는 예제이다.
이때 공지사항의 처음이나 마지막까지 롤링되면 더 이상 롤링을 하지 않는다.
fn_article(buttonID, containerID);
- buttonID : 버튼을 포함하고 있는 부모 요소의 ID
- containerID : 버튼과 게시물을 포함하고 있는 컨테이너 요소의 ID

HTML

					
				

CSS

					<style type="text/css">
						.news {padding:0 0px 20px;}
							.news .open-event {height:16px; position:relative; border:1px solid #ccc; overflow:hidden;}
							.news .open-event ul{position:absolute; top:0px;}
							.news .open-event ul#notice1 {left:0;}
							.news .open-event ul#notice2 {right:20px;}
							.news .open-event ul li {height:20px;}
							.news .open-event ul li a {display:inline-block; width:310px;}
							.news .open-event ul li a:hover {color:#8f7614; text-decoration:underline;}
							.news .open-event ul li a strong {margin-right:10px;}
							.news .open-event ul li span.date {display:inline-block; width:60px;}
								.news .open-event .prev{position:absolute; top:1px; right:2px; width:7px; height:4px; line-height:0; font-size:0;}
								.news .open-event .next{position:absolute; bottom:1px; right:2px; width:7px; height:4px; line-height:0; font-size:0;}
					</style>
				

Javascript

					function fn_article(buttonID,containerID){

						var $element = $('#'+containerID).find('.notice-list');
						var $prev = $('#'+buttonID).find('.prev');
						var $next = $('#'+buttonID).find('.next');

						var size = new Array();
						var cnt = new Array();
						var move = $element.children().outerHeight();

						$element.each(function(idx){
							size[idx] = $element.eq(idx).children().length;
							cnt[idx] = 0;
						});

						$prev.bind('click',function(){
							$element.each(function(idx){
								cnt[idx]==0 ? cnt[idx] : cnt[idx]--;
								$element.eq(idx).animate({'top':'-'+cnt[idx]*move});
							});
							return false;
						});

						$next.bind('click',function(){
							$element.each(function(idx){
								cnt[idx]>=size[idx]-1 ? cnt[idx] : cnt[idx]++;
								$element.eq(idx).animate({'top':'-'+cnt[idx]*move});
							});
							return false;
						});
							
					}
				
설명
예제-3은 공지사항의 마지막까지 롤링되더라도 다음 버튼을 클릭하면 처음 공지사항을 이어서 계속 보여준다.
결국 무한 롤링되며 이전 버튼을 클릭하더라도 동일하게 구현된다.
fn_article2(buttonID, containerID);
- buttonID : 버튼을 포함하고 있는 부모 요소의 ID
- containerID : 버튼과 게시물을 포함하고 있는 컨테이너 요소의 ID

예제-3

HTML

					
				

CSS

					<style type="text/css">
						.news {padding:0 0px 20px;}
							.news .open-event {height:16px; position:relative; border:1px solid #ccc; overflow:hidden;}
							.news .open-event ul{position:absolute; top:0px;}
							.news .open-event ul#notice1 {left:0;}
							.news .open-event ul#notice2 {right:20px;}
							.news .open-event ul li {height:20px;}
							.news .open-event ul li a {display:inline-block; width:310px;}
							.news .open-event ul li a:hover {color:#8f7614; text-decoration:underline;}
							.news .open-event ul li a strong {margin-right:10px;}
							.news .open-event ul li span.date {display:inline-block; width:60px;}
								.news .open-event .prev{position:absolute; top:1px; right:2px; width:7px; height:4px; line-height:0; font-size:0;}
								.news .open-event .next{position:absolute; bottom:1px; right:2px; width:7px; height:4px; line-height:0; font-size:0;}
					</style>
				

Javascript

					function fn_article2(buttonID,containerID){
						var $element = $('#'+containerID).find('.notice-list');
						var $prev = $('#'+buttonID).find('.prev');
						var $next = $('#'+buttonID).find('.next');

						var size = new Array();
						var move = $element.children().outerHeight();
						var first = false;
						var lastChild;

						$element.each(function(idx){
							size[idx] = $('#winning').length ? 5 : $element.eq(idx).children().length;
						});

						lastChild = $element.children().eq(-1).clone(true);
						lastChild.prependTo($element);
						$element.children().eq(-1).remove();

						if($element.children().length==1){
							$element.css('top','0px');
						}else{
							$element.css('top','-'+move+'px');
						}

						$prev.bind('click',function(){
							$element.each(function(idx){
								if(!first){
									$element.eq(idx).animate({'top': '0px'},'normal',function(){
										lastChild = $(this).children().eq(-1).clone(true);
										lastChild.prependTo($element.eq(idx));
										$(this).children().eq(-1).remove();
										$(this).css('top','-'+move+'px');
									});
									first = true;
									return false;
								}

								$element.eq(idx).animate({'top': '0px'},'normal',function(){
									lastChild = $(this).children().filter(':last-child').clone(true);
									lastChild.prependTo($element.eq(idx));
									$(this).children().filter(':last-child').remove();
									$(this).css('top','-'+move+'px');
								});
							});
							return false;
						});

						$next.bind('click',function(){
							$element.each(function(idx){

								var firstChild = $element.children().filter(':first-child').clone(true);
								firstChild.appendTo($element.eq(idx));
								$element.children().filter(':first-child').remove();
								$element.css('top','0px');

								$element.eq(idx).animate({'top':'-'+move+'px'},'normal');

							});
							return false;
						});
					}
				
설명
예제-4는 함수의 마지막인자(autoStart)에 true와 함께 호출을 하면 공지사항이 자동롤링된다. 이때 접근성을 위해 제공된 재생/정지 버튼을 통해 공지사항을 자동롤링을 해지하거나 재설정할 수 있다.
fn_article3(containerID, buttonID, autoStart)
- containerID : 버튼과 게시물을 포함하고 있는 컨테이너 요소의 ID - buttonID : 버튼을 포함하고 있는 부모 요소의 ID
- autoStart : 자동롤링을 위한 boolean 변수

HTML

					
				

CSS

					<style type="text/css">
						.news {padding:0 0px 20px;}
							.news .open-event {height:16px; position:relative; border:1px solid #ccc; overflow:hidden;}
							.news .open-event ul{position:absolute; top:0px;}
							.news .open-event ul#notice1 {left:0;}
							.news .open-event ul#notice2 {right:20px;}
							.news .open-event ul li {height:20px;}
							.news .open-event ul li a {display:inline-block; width:310px;}
							.news .open-event ul li a:hover {color:#8f7614; text-decoration:underline;}
							.news .open-event ul li a strong {margin-right:10px;}
							.news .open-event ul li span.date {display:inline-block; width:60px;}
								.news .open-event .prev{position:absolute; top:1px; right:2px; width:7px; height:4px; line-height:0; font-size:0;}
								.news .open-event .next{position:absolute; bottom:1px; right:2px; width:7px; height:4px; line-height:0; font-size:0;}
							.news .control {float:left; margin:0px 0 0 10px; }
								.news .control a.stop {font-size:12px;}
								.news .control a.on {color:red; font-size:12px;}
					</style>
				

Javascript

					function fn_article3(containerID, buttonID, autoStart){
						var $element = $('#'+containerID).find('.notice-list');
						var $prev = $('#'+buttonID).find('.prev');
						var $next = $('#'+buttonID).find('.next');
						var $play = $('#'+containerID).find('.control > a.play');
						var $stop = $('#'+containerID).find('.control > a.stop');
						var autoPlay = autoStart;
						var auto = null;
						var speed = 2000;
						var timer = null;

						var move = $element.children().outerHeight();
						var first = false;
						var lastChild;

						lastChild = $element.children().eq(-1).clone(true);
						lastChild.prependTo($element);
						$element.children().eq(-1).remove();

						if($element.children().length==1){
							$element.css('top','0px');
						}else{
							$element.css('top','-'+move+'px');
						}

						if(autoPlay){
							timer = setInterval(moveNextSlide, speed);
							$play.addClass('on').text('▶');
							auto = true;
						}else{
							$play.hide();
							$stop.hide();
						}

						$element.find('>li').bind({
							'mouseenter': function(){
								if(auto){
									clearInterval(timer);
								}
							},
							'mouseleave': function(){
								if(auto){
									timer = setInterval(moveNextSlide, speed);
								}
							}
						});

						$play.bind({
							'click': function(e){
								if(auto) return false;

								e.preventDefault();
								timer = setInterval(moveNextSlide, speed);
								$(this).addClass('on').text('▶');
								$stop.removeClass('on').text('▣');
								auto = true;
							}
						});

						$stop.bind({
							'click': function(e){
								if(!auto) return false;

								e.preventDefault();
								clearInterval(timer);
								$(this).addClass('on').text('■');
								$play.removeClass('on').text('▷');
								auto = false;
							}
						});

						$prev.bind({
							'click': function(){
								movePrevSlide();
								return false;	
							},
							'mouseenter': function(){
								if(auto){
									clearInterval(timer);
								}
							},
							'mouseleave': function(){
								if(auto){
									timer = setInterval(moveNextSlide, speed);
								}
							}
						});

						$next.bind({
							'click': function(){
								moveNextSlide();
								return false;
							},
							'mouseenter': function(){
								if(auto){
									clearInterval(timer);
								}
							},
							'mouseleave': function(){
								if(auto){
									timer = setInterval(moveNextSlide, speed);
								}
							}
						});

						function movePrevSlide(){
							$element.each(function(idx){
								if(!first){
									$element.eq(idx).animate({'top': '0px'},'normal',function(){
										lastChild = $(this).children().eq(-1).clone(true);
										lastChild.prependTo($element.eq(idx));
										$(this).children().eq(-1).remove();
										$(this).css('top','-'+move+'px');
									});
									first = true;
									return false;
								}

								$element.eq(idx).animate({'top': '0px'},'normal',function(){
									lastChild = $(this).children().filter(':last-child').clone(true);
									lastChild.prependTo($element.eq(idx));
									$(this).children().filter(':last-child').remove();
									$(this).css('top','-'+move+'px');
								});
							});
						}

						function moveNextSlide(){
							$element.each(function(idx){

								var firstChild = $element.children().filter(':first-child').clone(true);
								firstChild.appendTo($element.eq(idx));
								$element.children().filter(':first-child').remove();
								$element.css('top','0px');

								$element.eq(idx).animate({'top':'-'+move+'px'},'normal');

							});
						}
					}