I have a percentage progress bar according to the code below, depending on the tasks that have been completed from the code on vb.net.
client side code
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script>
$(function () {
// Set up the progress bar
$("#progressbar").progressbar({
// When the bar value changes, update the progress and label
change: function () {
// Calculate the proper text
var completedSteps = $('.step:checked').length;
var totalSteps = $('.step').length;
$('#progress-label').text('Completed: ' + (completedSteps * 100 / totalSteps).toFixed(2) + '%');
}
});
//event init in checkboxes
$('.step').init(function () {
var completedSteps = $('.step:checked').length;
var totalSteps = $('.step').length;
$("#progressbar").progressbar("value", ((completedSteps * 100 / totalSteps)));
});
});
</script>
<style>
.ui-progressbar { ;}
#progress-label { ; left: 10px; top: 4px;}
#progressbar
{
width: 306px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<!-- Your Progress bar -->
<div id="progressbar">
<div id="progress-label">Completed 0 of 6, 0%</div>
</div>
<!-- Each of my steps -->
<h2>Steps</h2>
<input class='step' type='checkbox' id="chk1" visible="false" runat="server"/><b>Step 1<b><br />
<input class='step' type='checkbox' id="chk2" visible="false" runat="server"/><b>Step 2<b><br />
<input class='step' type='checkbox' id="chk3" visible="false" runat="server"/><b>Step 3<b><br />
<input class='step' type='checkbox' id="chk4" visible="false" runat="server"/><b>Step 4<b><br />
<br />vb.net code
Public Class WebForm1
Inherits System.Web.UI.Page
Dim a, b, c, d As String
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not IsPostBack Then
a = 1
b = 1
c = 1
d = 0
If a = 1 Then
chk1.Checked = True
End If
If b = 1 Then
chk2.Checked = True
End If
If c = 1 Then
chk3.Checked = True
End If
If d = 1 Then
chk4.Checked = True
End If
End If
End Sub
End ClassBut when trying to load the progress bar with the init event, it appears empty.
Then I would like to know if you can show the correct percentage in the progress bar according to the code in vb.net without the checkboxes being visible.