어느 웹어플리케이션에 꼭 사용되는 것이 datepicker일 것이다.
jquery UI 컴포넌트를 이용해서 구현해 보자.
구현결과
구현코드
<script>
$("#sample_datepicker").datepicker();
</script>
<div id="sample_datepicker"></div>
Recently in FRAMEWORK Category
다이나믹한 웹페이지의 느낌을 줄 수 있는 jquery UI의 Accordion을 적용해 보았다.
용도 : 비좁은 공간에 많은 데이터를 보여줄 수 있는 방법중에 하나로 생각하면 될 것이다.
구현
Test 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Test 2
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
Test 3
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
슬라이더는 웹어플리케이션에서 큰 기능성으로 어필하진 않지만 사용자 인터페이스의 직관성과 편의성을 높여 어플리케이션의 체감완성도를 높여 줄 수있다. 한마디로 그럴듯 해 보인다는 거다..
먼저 슬라이더의 구현모습을 보자.
jquery로 구현하는 소스코드는 놀라울 만치 간결하고 명료하다. 구현 소스코드
커스터마이징을 위한 여러가지 옵션이 있다. 상세한 옵션은 다음 링크를 참조 할것.
jquery UI/Slider Document
먼저 슬라이더의 구현모습을 보자.
jquery로 구현하는 소스코드는 놀라울 만치 간결하고 명료하다. 구현 소스코드
<html>
<head>
<script>
$("#example_slider").slide();
</script>
</head>
<body>
<div id="example_slider"></div>
</body>
</html>
<head>
<script>
$("#example_slider").slide();
</script>
</head>
<body>
<div id="example_slider"></div>
</body>
</html>
커스터마이징을 위한 여러가지 옵션이 있다. 상세한 옵션은 다음 링크를 참조 할것.
jquery UI/Slider Document
최신 브라우져 및 툴바 에서 팝업이 악용되는 것을 방지하기 위하여 팝업창을 제어하고 있다. 이에 영향을 받지 않는 jquery 기반의 팝업을 사용할 수 있다.
샘플코드
결과화면( 버튼을 클릭해보자.. )
샘플코드
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("#example").dialog({ autoOpen: false });
$("#poppop").click( function() {
$("#example").dialog('open');
});
});
</script>
</head>
<body>
<link rel="stylesheet" href="http://dev.jquery.com/view/tags/ui/latest/themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)">
<script type="text/javascript" src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.dialog.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.resizable.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.draggable.js"></script>
<div id="example" class="flora" title="This is my title">I'm in a dialog!</div>
<input type="button" id="poppop" value="popup" />
</body>
</html>
결과화면( 버튼을 클릭해보자.. )
I'm in a dialog!
jquery ui의 프로그래스바를 적용해 본다. 항상 그렇지만 jquery는 정말 간단하게 하나의 메서드(method)로 적용가능하다.
이렇게 하면 아래와 같이 프로그래시브 바와 버튼이 표시된다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("#progressbar").progressbar();
$("#start").click(function(){
$("#progressbar").progressbar('start');
});
});
</script>
</head>
<body>
<link rel="stylesheet" href="http://dev.jquery.com/view/tags/ui/latest/themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)">
<script type="text/javascript" src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.progressbar.js"></script>
<div id="progressbar"></div> <input type="button" value="Start" id="start" />
</body>
</html>
About This Blog Author
 |
| 정지범(jibum.jung@gmail.com) |
