InfoBar Demonstration

The infoBar jQuery code was written by Alex Barberis. You can view his site and specifically his page on the infoBar script at http://alexbarberis.com/2009/03/11/infobar-10/. I've put together a simple ASP.Net user control that puts his code to use but lets you call it from a server side function. Example:



Download the source code for this demonstration: InfoBarAspNetControlCode.zip

Instructions on how to use in your own page

  1. Put the jquery-1.4.2.js in your site as well as the InfoBar.js file
  2. Put a javascript reference to the jquery library at the top of your head before any other javascript.

    <script src="jquery-1.4.2.js" type="text/javascript"></script>

  3. Below your page directive (the first line), register the control with the page so you can use it.

    <%@ Register Src="~/InfoBar.ascx" TagPrefix="iuf" TagName="InfoBar" %>

  4. Put the infoBar control at the top of your ASP.NET form, preferably the first line. Where you place it on the page does not have anything to do with it's placement on the screen. If you want to change it's placement on the screen you'll need to edit the HTML that's in the InfoBar.js file.

    <iuf:InfoBar ID="infoBar1" runat="server" />

  5. You're done, now you will be able to invoke the InfoBar from the client side code. The button click code on this on this page in invoke it looks like this:

    Protected Sub btnShowMessage_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnShowMessage.Click
       infoBar1.ShowInfoBar(String.Format("You clicked the button at {0} server time.", Now), "maroon")
    End Sub