jQuery progressbar, slider, Tabs 예제
jQuery progressbar, slider, Tabs 예제
적용전에 프로그래스바에 수를 입력하면 변하는 것이 없습니다.
적용후 프로그래스바와 슬라이더를 보면 해당 숫자만큼 게이지가 채워진것을 확인할수 있습니다.
소스
<html>
<head>
<title></title>
<link href="css/smoothness/jquery-ui-1.8.19.custom.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.7.2.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.19.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
//progressbar
//data를 찾아서 데이타값을 변수에 저장하고 저장된값을 매개변수에 넣자.
$("#bar1").progressbar();
$("#data").bind("change", function () {
//alert("a");
var n = $(this).val(); //수치
$("#bar1").progressbar({ value: parseInt(n) });
});
$("#btn1").click(function () {
alert($("#bar1").progressbar("value"));
});
//Slider 슬라이더
$("#slider").slider(
{
change: function () {
document.title = $(this).slider("value");
}
}
);
$("#btn2").click(function () {
alert($("#slider").slider("value"));
});
//Tabs
$("#tabs").tabs();
});
</script>
<style type="text/css">
#slider {width:300px; height:10px; font-size:12px;}
#tabs {width:400px; height:150px; font-size:12px;}
</style>
</head>
<body>
<!--Progressbar-->
<h3>progressbar</h3>
<div id="bar1"></div>
<select id="data">
<option value="0">0</option>
<option value="20">20</option>
<option value="40">40</option>
<option value="60">60</option>
<option value="80">80</option>
<option value="100">100</option>
</select>
<input type="button" value="입력하기" id="btn1" />
<hr />
<!--Slider 슬라이더-->
<h3>Slider 슬라이더</h3>
<div id="slider"></div>
<input type="button" id="btn2" value=" 확인 " />
<hr />
<!--Tabs-->
<h3>Tabs</h3>
<div id="tabs">
<ul>
<li><a href="#page1"><span>첫번째 페이지</span></a></li>
<li><a href="#page2"><span>두번째 페이지</span></a></li>
<li><a href="#page3"><span>세번째 페이지</span></a></li>
</ul>
<div id="page1">
<p>첫번째 페이지입니다. 어쩌구.. 저쩌구..</p>
</div>
<div id="page2">
<p>두번째 페이지입니다. 어쩌구.. 저쩌구..</p>
</div>
<div id="page3">
<p>세번째 페이지입니다. 어쩌구.. 저쩌구..</p>
</div>
</div>
</body>
</html>