<!doctype html>"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 display CSS, do not care begin--> <link rel="stylesheet"Type="Text/css"href="Http://gmu.baidu.com/assets/reset.css"/> <!--demo show CSS end--> <!--component dependent 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"/> <!--component dependent CSS End--> <!--component Dependent 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> <!--components dependent 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:03px; } #set_val-1, #set_val-2{background-color: #0079FF; Border:none; Color: #FFF; width:100px; height:30px; Border-radius:5px; } </style>"progressbar-1"></div> <input id="cur_val-1"/> <button id="set_val-1">Set</button> <br/><br/> "progressbar-2"></div> <input id="Cur_val-2"/> <button id="Set_val-2">Set</button> <script>//Create a Landscape component$('#progressbar-1'). ProgressBar ({valuechange:function () {$ ('#cur_val-1'). Val ( This. Value ()); } }); $('#set_val-1'). Click (function () {$ ('#progressbar-1'). ProgressBar ('value', $('#cur_val-1'). Val ()); }); //to create a vertical component$('#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>GMU simple use of a
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
