Progress Tracker -asp.net web pages

I need to track the progress of certain 开发者_StackOverflow社区steps and inform the user what step they are at and what is left to do . I was looking for somehthing like this :

http://www.wpthemesplugin.com/wp-content/uploads/2010/10/43.jpg

(but with different labels of course) but cant seem to see how to acomplish this , i'm not a front end web designer so wouldnt be a dab hand at creating images or anything like that , so preferably i would like to achive this out fancy images if possible , any ideas ? Any help would be appreciated ...

Ali

You don't need to buy one nor create it.

Folks at JQuery already implemented and you can have it working for free. Look at this site to see a demo and here to see how to get it working.

I have personally used this plugin with no problem.

Here is the simpliest implementation based on slightly modified Pure CSS by Stephen A Thomas:

CSS

ol.progtrckr {
    margin: 0;
    padding: 0;
    list-style-type none;
}

ol.progtrckr li {
    display: inline-block;
    text-align: center;
    line-height: 3em;
}

ol.progtrckr[data-progtrckr-steps="2"] li { width: 49%; }
ol.progtrckr[data-progtrckr-steps="3"] li { width: 33%; }
ol.progtrckr[data-progtrckr-steps="4"] li { width: 24%; }
ol.progtrckr[data-progtrckr-steps="5"] li { width: 19%; }
ol.progtrckr[data-progtrckr-steps="6"] li { width: 16%; }
ol.progtrckr[data-progtrckr-steps="7"] li { width: 14%; }
ol.progtrckr[data-progtrckr-steps="8"] li { width: 12%; }
ol.progtrckr[data-progtrckr-steps="9"] li { width: 11%; }

ol.progtrckr li.progtrckr-done {
    color: black;
    border-bottom: 4px solid yellowgreen;
}

ol.progtrckr li.progtrckr-todo {
    color: silver; 
    border-bottom: 4px solid silver;
}

ol.progtrckr li.progtrckr-current {
    color: black; 
    border-bottom: 4px solid #A16BBE;
}

ol.progtrckr li:after {
    content: "\00a0\00a0";
}

ol.progtrckr li:before {
    position: relative;
    bottom: -2.5em;
    float: left;
    left: 50%;
    line-height: 1em;
}

ol.progtrckr li.progtrckr-done:before {
    content: "\2714";
    color: white;
    background-color: yellowgreen;
    height: 1.2em;
    width: 1.2em;
    line-height: 1.2em;
    border: none;
    border-radius: 1.2em;
}

ol.progtrckr li.progtrckr-todo:before {
    content: "\039F";
    color: silver;
    background-color: white;
    font-size: 1.5em;
    bottom: -1.6em;
}

ol.progtrckr li.progtrckr-current:before {
    content: "\039F";
    color: #A16BBE;
    background-color: white;
    font-size: 1.5em;
    bottom: -1.6em;
}

ASPX

<asp:BulletedList CssClass="progtrckr" ID="ProgressTracker" runat="server" 
    BulletStyle="Numbered">
</asp:BulletedList>

Code

protected void AddSteps(params string[] items)
{
    ProgressTracker.Items.Clear();
    ProgressTracker.Attributes["data-progtrckr-steps"] = items.Length.ToString();

    for (int i = 0; i < items.Length; i++)
    {
        ProgressTracker.Items.Add(new ListItem(items[i]));
    }
}

protected void SetProgress(int current)
{
    for (int i = 0; i < ProgressTracker.Items.Count; i++)
    {
        ProgressTracker.Items[i].Attributes["class"] = 
            (i < current) ? "progtrckr-done" : 
            (i == current) ? "progtrckr-current" : "progtrckr-todo";
    }
}

How to use

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        // initialize steps
        AddSteps("Step 1", "Step 2", "Done");
        SetProgress(0);
    }
}

protected void SubmitButton_Click(object sender, EventArgs e)
{
    SetProgress(1);
}

The other one nice CSS for it: Simple, CSS only wizard progress tracker