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>
댓글