Friday, July 13, 2012

Asp.net jQuery UI Progress Bar Color


In this post Asp.Net jQuery UI Progress Bar Color, we shall see on how to set the Color of the Bar in 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, make sure that you add the style tag to define the barcolor class. 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() {
            // Progress Bar Bar-color
            $("#divProgressBarColor").progressbar({ value: 50 });
            $("#divProgressBarColor").addClass("barcolor");
 });
   </script>
</head>
<body>
    <form id="frmSlider" runat="server">
        <table>
            <tr>
                <td>Progress Bar Change Bar color</td>
                <td><div id="divProgressBarColor"
                        style="width:200px;"></div>
                </td>               
            </tr>
</table>
    </form>
</body>
</html>


Search Flipkart Products:
Flipkart.com

No comments: