Friday, July 13, 2012

Asp.net jQuery UI Progress Bar Get Value


In this post Asp.Net jQuery UI Progress Bar Get Value, we shall see on how to get the current position value of a jQuery UI Progress Bar control in an Asp.net page.

Add DIV tag to the page and add the below jQuery script. Change the references of the jQuery library files to map to your local path, build and run the applications. Click on the Get Current Position button to see the current position value.


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>jQuery UI Progress Bar </title>
    <link type="text/css"
href="css/smoothness/jquery-ui-1.8.21.custom.css"
rel="Stylesheet" />
    <script
type="text/javascript"
src="JavaScript/jquery-1.7.2.js"></script>
    <script
type="text/javascript"
src="JavaScript/jquery-ui-1.8.21.custom.min.js"></script>
    <link
type="text/css"
href="Stylesheet.css"
rel="Stylesheet" />
    <style type="text/css">
.ui-progressbar.barcolor .ui-progressbar-value
{ background: lightblue; }
    </style>

    <script type="text/javascript">
        $(document).ready(function() {
            // Progress Bar Set Values
            $("#divProgressBarSetValue").progressbar({ value: 50 });
 });
   </script>
</head>
<body>
    <form id="frmSlider" runat="server">
        <table>
            <tr>
                <td>Progress Bar Set Value</td>
                <td><div id="divProgressBarSetValue"
                        style="width:200px;"></div>
                </td>               
            </tr>
            <tr>
                <td>Progress Bar Get Value</td>
                <td><input
                    type="button"
                    value="Get Current Position"                                onclick="alert($('#divProgressBarSetValue').progressbar('value'))"; />
                </td>               
            </tr> 

</table>
    </form>
</body>
</html>

For a full example covering all possible scenarios in using a jQuery UI Progress Bar control refer to the post Asp.net jQuery UI Progress Bar Tutorial

Search Flipkart Products:
Flipkart.com

No comments: