<!doctype html>
<html>
<head>
<title>iOS7风格的进度条</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<!--demo展示所用css，不用关心 begin-->
<link rel="stylesheet" type="text/css" href="http://gmu.baidu.com/assets/reset.css" />
<!--demo展示所用css end-->
<!--组件依赖css begin-->
<link rel="stylesheet" type="text/css" href="http://gmu.baidu.com/assets/widget/progressbar/progressbar.css" />
<link rel="stylesheet" type="text/css" href="http://gmu.baidu.com/assets/widget/progressbar/progressbar.iOS7.css" />
<!--组件依赖css end-->
<!--组件依赖js begin-->
<script type="text/javascript" src="http://gmu.baidu.com/dist/zepto.js"></script>
<script type="text/javascript" src="http://gmu.baidu.com/src/extend/touch.js"></script>
<script type="text/javascript" src="http://gmu.baidu.com/src/core/gmu.js"></script>
<script type="text/javascript" src="http://gmu.baidu.com/src/core/event.js"></script>
<script type="text/javascript" src="http://gmu.baidu.com/src/core/widget.js"></script>
<script type="text/javascript" src="http://gmu.baidu.com/src/widget/progressbar/progressbar.js"></script>
<!--组件依赖js end-->
<style type="text/css">
body {
padding: 10px;
background-color: #F9F9F9;
}
#progressbar-1 {
width:250px;
margin:30px 10px;
}
#progressbar-2 {
height: 200px;
margin: 40px;
}
input {
line-height: 30px;
color: #0079FF;
border: 1px solid #E1E1E1;
border-radius: 5px;
padding: 0 3px;
}
#set_val-1,
#set_val-2 {
background-color: #0079FF;
border: none;
color: #FFF;
width: 100px;
height: 30px;
border-radius: 5px;
}
</style>
</head>
<body>
<h3>横向的滚动条</h3>
<div id="progressbar-1"></div>
<input id="cur_val-1"/>
<button id="set_val-1">Set</button>
<br /><br />
<h3>竖向的滚动条</h3>
<div id="progressbar-2"></div>
<input id="cur_val-2"/>
<button id="set_val-2">Set</button>
<script>
//创建横向组件
$('#progressbar-1').progressbar({
valueChange: function() {
$('#cur_val-1').val(this.value());
}
});
$('#set_val-1').click(function() {
$('#progressbar-1').progressbar('value', $('#cur_val-1').val());
});
//创建竖向组件
$('#progressbar-2').progressbar({
horizontal: false,
valueChange: function() {
$('#cur_val-2').val(this.value());
}
});
$('#set_val-2').click(function() {
$('#progressbar-2').progressbar('value', $('#cur_val-2').val());
});
</script>
</body>
</html>
