Friday, July 13, 2012

Asp.net jQuery UI Progress Bar Example


In this post Asp.Net jQuery UI Progress Bar Example we shall see a simple example of how to add the jQuery UI Progress Bar control to 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.

<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() {
            // Simple Progress Bar
            $("#divSimpleProgressBar").progressbar();
 });
   </script>
</head>
<body>
    <form id="frmSlider" runat="server">
        <table>
            <tr>
                <td>Simple Progress Bar</td>
                <td>
                <div id="divSimpleProgressBar"
                        style="width:200px;"
                </td>               
            </tr>
</table>
    </form>
</body>
</html>


Search Flipkart Products:
Flipkart.com

1 comment:

Anonymous said...

seems to me like your tags are badly formed, and that you're using the wrong jquery libraries.