<!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=".css" /><!--demo展示所用css end--><!--组件依赖css begin--><link rel="stylesheet" type="text/css" href=".css" /><link rel="stylesheet" type="text/css" href=".iOS7.css" /><!--组件依赖css end--><!--组件依赖js begin--><script type="text/javascript" src=".js"></script><script type="text/javascript" src=".js"></script><script type="text/javascript" src=".js"></script><script type="text/javascript" src=".js"></script><script type="text/javascript" src=".js"></script><script type="text/javascript" src=".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>
本文发布于:2024-01-29 02:32:09，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170646673412066.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
