ASP.NET AJAX Progress Bar Control)

來源:互聯網
上載者:User

If you use AJAX in your web app's, you no doubt have made use of some sort of progress/status indicator that lets the user know that some operation is currently executing.  In the app I am currently working on we use an animated gif for this.  It works great, but sometimes you might find it nice to have more control over the indicator - i.e. interacting with it via JavaScript and styling it using CSS.

So I did a little research and found a nice example of one built using script.aculo.us.  The demo page looked great so I downloaded the source to get a feel for how it worked.  I liked what I saw so I thought I would create a new AjaxControlToolkit control based on this example.  My original goal was just to port it over to ASP.NET, but as I started playing around with it I thought I might make a few changes to it as well.  So during the process of porting it, I made the following tweaks

  • I added a mode that runs the progress bar from 0 to 100 continuously.  This mode would be useful for scenarios where you don't know how long an operations would run for (like a typical partial postback)
  • The original requires different images for progress indicators of different widths.  I chose to use a repeating background image instead so I could use a single progress image no matter the width of the control.
  • I add an updating CSS class to the control while the progress bar is running.  In my demo page I use this to darken the percentage while the indicator is running.  I was also thinking about adding the current percentage to the class as well so you could have a custom style applied depending upon what the current percentage is.  Then you could do something like .progress .100 {  } to control the styling when the indicator is displaying 100%.
  • I used a skinning approach that is very similar to the Toolkit's Tab control.  I went ahead and created a bunch of sample skins (shown above) just to make sure my skinning technique worked alright.

Below are some details on how the controls - including how to add one to your page, interacting with it from JavaScript and creating custom skins using CSS.  Read on if you are interested and don't forget to check out the live demo and download.  I built it using .Net 3.5 and Toolkit version 3.5.11119.0, but I think it could be ported back to .Net 2.0 without too many issues. 

Live Demo (IE6, IE7, FF and Opera) | Download

 

Using the Control

The download contains plenty of examples of how to interact with the control, but here is some sample markup that specifies the progress mode as well as the width ...

   1:  <!-- Continuous Mode / 150px wide --> 
   2:  <mb:ProgressControl ID="ProgressControl1" runat="server" Mode="Continuous" Width="150px" />
   3:  <!-- Manual Mode / 70px wide --> 
   4:  <mb:ProgressControl ID="ProgressControl12" runat="server" Mode="Manual" Width="70px" /> 

 

When the control is in Continuous mode, you can start and stop the progress animation by using the play() and stop() JavaScript functions

   1:  //  start the indicator
   2:  $find('ProgressControl1').play();
   3:   
   4:  //  stop it
   5:  $find('ProgressControl1').stop();

 

And when the control is in Manual mode, you can use the set_percentage to manually change the percentage value.  You can either provide an absolute value like in the first example, or a value that is relative to what ever the current value is - like the second example.

   1:  //  set the percentage to 62
   2:  $find('ProgressControl1').set_percentage(62);
   3:   
   4:  //  increase the percentage by 15
   5:  $find('ProgressControl1').set_percentage('+15');

 

HTML Emitted by the Control

Below is the markup the control emits.  1 DIV for containing the progress image, 1 DIV for displaying the percentage text, 2 DIV's for applying a border and an outer DIV that wraps it all.

   1:  <div class="ajax__progress" class="ajax__progress" id="ProgressControl1">
   2:      <!-- outer and inner elements for creating a border -->
   3:      <div class="ajax__progress_outer" id="ProgressControl1_outer">
   4:          <div class="ajax__progress_inner" id="ProgressControl1_inner">
   5:              <!-- The background image for this element displays the indicator -->
   6:              <div class="ajax__progress_indicator" id="ProgressControl1_indicator" />
   7:          </div>
   8:      </div>
   9:      <!-- This element displays the percentage -->
  10:      <div class="ajax__progress_info" id="ProgressControl1_info">75%</div>
  11:  </div>

 

Skinning the Control

To skin the control, you need to set the CssClass property of the ProgressControl to the name of the CSS class that defines your custom skin.  For the skin portion of the demo page I have defined 6 custom themes.  Below is the sample markup for this section ... 

   1:  <mb:ProgressControl ID="ProgressControl4" runat="server" CssClass="green" Mode="Manual" Width="200px" />            
   2:  <mb:ProgressControl ID="ProgressControl5" runat="server" CssClass="yelllow" Mode="Manual" Width="200px" />            
   3:  <mb:ProgressControl ID="ProgressControl6" runat="server" CssClass="orange" Mode="Manual" Width="200px" />            
   4:  <mb:ProgressControl ID="ProgressControl7" runat="server" CssClass="red" Mode="Manual" Width="200px" />            
   5:  <mb:ProgressControl ID="ProgressControl8" runat="server" CssClass="lightblue" Mode="Manual" Width="200px" />            
   6:  <mb:ProgressControl ID="ProgressControl11" runat="server" CssClass="solidblue" Mode="Manual" Width="200px" />            
 
 

And here are the CSS style rules that apply the styles for these skins

One of the sample skins I made is roughly based on the XP style progress indicator.  To create this custom skin, I first created the background image that I want to use for the indicator (I am using a 6 x 9 image)

then I use the .ajax__progress_indicator and .ajax__progress_inner classes to override the default skins height and progress image - Simple!

And here is how it looks ...

Screen shots of the Control's Features

Here are some static images that show off some of the control;s features ...

Continuous Mode

Progress indicator continuously fills the region from left to right.

Fluid Width

Progress indicator continuously fills the region from left to right.

Manual Mode - Update Absolute Percentage

Use the JavaScript API to set the percentage an absolute value

Manual Mode - Update Relative Percentage

Use the JavaScript API to set the percentage to a relative value

Skins

Use CSS to control the progress indicators look and feel

AJAX Operations

Example of displaying the indicator for AJAX operations

Modal Popup

An example using the progress control with the Tookit's ModalPopup control

That's it.  Enjoy!

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.