Using progress bar in asp.net

问题:

i used the examples given in this link

here are my code for the .aspx page

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jqueryui.css"
rel="stylesheet" type="text/css" />

<script type="text/jscript" src="http://ajax.googleapis.com/ajax/libs/jquery1.5/jquery  .min.js"></script>

<script type="text/jscript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<script type="text/jscript">
$(document).ready(function() {
$("#progressbar").progressbar({ value: 37 });
});
</script>

</asp:Content>

and the div for the progress bar is this one

<div style="margin-left: 10px; margin-right: 10px;" id="progressbar">    </div>

i tried to follow the instructions given on the source page but nothing worked. can you tell me what i am missing here? thanx in advance. (Fixed this part.i made a mistake at placing my contntentplaceholder)

EDIT: how can i change the value in a way so that it animates when i press a button.... the button's code in the page is as follows :

<asp:Button ID="btnConfirm" CssClass="button" SkinID="Common" runat="server"Text="Confirm"OnClick="btnConfirm_Click" />

回答1:

Try this:

<script type="text/jscript">
jQuery(document).ready(function() {
jQuery("#progressbar").progressbar({ value: 37 });
});
</script>

$ is also used by asp.net for its own clientside javascript.

Consider us jQuery.noConflict()

You could encapsulate your jQuery code like this:

jQuery.noConflict();
(function($) { 
  $(function() {
    $(document).ready(function() {
    $("#progressbar").progressbar({ value: 37 });
    // more code using $ as alias to jQuery
  });
})(jQuery);

EDIT: To update the value surround your content above and the button with an UpdatePanel.

Refer how to use UpdatePanels

Assign the Progress percentage to an asp literal.

jQuery.noConflict();
(function($) { 
  $(function() {
    $(document).ready(function() {
    $("#progressbar").progressbar({ value: <asp:Literal runat="server" ID="ProgressPercentage" /> });
    // more code using $ as alias to jQuery
  });
})(jQuery);

On button click

ProgressPercentage.Text = progress.ToString();