jqueryui 进度条使用

时间:2024-01-04 10:06:44
  <title></title>
<script src="../Js/NewJs_CFJ/jquery.js" type="text/javascript"></script>
<link href="../Js/NewJs_CFJ/jquery.ui.progressbar.css" rel="stylesheet" type="text/css" />
<link href="../Js/NewJs_CFJ/jquery-ui.theme.css" rel="stylesheet" type="text/css" /> <script src="../Js/NewJs_CFJ/jquery-ui.js" type="text/javascript"></script> <style type="text/css"> .ui-progressbar {
position: relative;
}
.progress-label {
position: absolute;
text-align:center;
font-weight: bold;
text-shadow: 1px 1px 0 #fff;
}
</style>
<script type="text/javascript"> function addValue(value){
var pro = $("#divProgerssbar");
var proLabel = $(".progress-label"); //进度条里面文字 var temp = 100;
if (Number(value) > 100) {
temp = Number(value);
}
pro.progressbar({
value: Number(value),
max: temp });
proLabel.text(pro.progressbar("value") + "%"); }
$(function () {
addValue(0); $("#ss").click(function () {
addValue(46);
});
$("#vv").click(function () {
addValue(234.5);
});
}); </script>
</head>
<body>
<form id="form1" runat="server">
<input type="button" value="sdf" id="ss" />
<input type="button" value="sdf" id="vv" />
<div id="divProgerssbar" style=" width:400px" >
<div class="progress-label" style=" width:400px" >
</div>
</div>
</form>
</body>
</html>

jqueryui 进度条使用jqueryui 进度条使用jqueryui 进度条使用