jQuery UI Helpers / Tabs

Simple Tabs

You can create a tabs widget with the BeginTabs method. This method returns a TabsBuilder object that is used to define the tabs (with the Tab method) and create the content panels (with the BeginPanel method). It is not possible to mix tab definitions with content creation.

You should call the BeginTabs and BeginPanel methods in a using statement. This is required to emit all the necessary HTML tags into the response.

The following example creates a simple tabs widget.

@using (var t = Html.JQueryUI().BeginTabs())
{
    t.Tab("Tab 1", "tab1");
    t.Tab("Tab 2", "tab2");
    t.Tab("Tab 3", "tab3");
    using (t.BeginPanel())
    {
        <p>First panel</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla hendrerit elit sit amet mauris suscipit convallis. Sed bibendum mi in odio posuere venenatis. Integer nisi tortor, rutrum a tincidunt non, consequat quis augue. Fusce eu massa quis lorem laoreet lacinia sed eu purus. Sed eu mauris interdum velit congue feugiat ac sit amet libero. Nullam vel libero ut urna tempor fringilla et ac dolor. Phasellus scelerisque consectetur egestas. Aenean ac risus ullamcorper felis molestie ultricies sodales sed augue. Ut et turpis lacinia lorem aliquam semper vitae eu massa. </p>
    }
    using (t.BeginPanel())
    {
        <p>Secod panel</p>
        <p>In hac habitasse platea dictumst. Donec nec magna enim. Donec vel lacus ut eros dapibus suscipit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum luctus est quis ante euismod varius. Morbi vulputate velit vitae est varius dignissim dapibus tellus placerat. Curabitur augue tortor, pellentesque sit amet porttitor eu, tincidunt eu arcu. Integer turpis eros, adipiscing et facilisis eu, vestibulum vitae mi. In tincidunt odio ut lorem euismod vel placerat augue bibendum. Donec non quam quis odio tincidunt vehicula. Donec dictum, lorem eget viverra convallis, sapien neque scelerisque quam, suscipit facilisis ante ligula et augue. Proin eget tellus tellus, sit amet fringilla est. Sed at turpis vitae ligula porttitor cursus. Maecenas metus tortor, hendrerit malesuada venenatis at, sodales facilisis leo. </p>
    }
    using (t.BeginPanel())
    {
        <p>Third panel</p>
        <p>Praesent malesuada, sem non euismod blandit, augue est tempor metus, vitae consectetur urna dui at purus. Ut viverra lorem urna. Suspendisse egestas leo id elit consectetur adipiscing vel vel odio. Curabitur ut adipiscing augue. Donec rhoncus eros sed massa posuere aliquam. Cras tincidunt dapibus augue eu congue. Donec ut nunc lorem, eu blandit orci. Quisque ac libero id erat suscipit eleifend non sed nibh. Duis et augue orci, a lacinia dolor. Donec dui enim, sodales sit amet pellentesque ut, placerat vel lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed fringilla, felis et blandit posuere, dolor quam interdum eros, vel sodales nisl sapien in velit. Cras vel orci leo. </p>
    }
}

This is the result.

First panel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla hendrerit elit sit amet mauris suscipit convallis. Sed bibendum mi in odio posuere venenatis. Integer nisi tortor, rutrum a tincidunt non, consequat quis augue. Fusce eu massa quis lorem laoreet lacinia sed eu purus. Sed eu mauris interdum velit congue feugiat ac sit amet libero. Nullam vel libero ut urna tempor fringilla et ac dolor. Phasellus scelerisque consectetur egestas. Aenean ac risus ullamcorper felis molestie ultricies sodales sed augue. Ut et turpis lacinia lorem aliquam semper vitae eu massa.

Secod panel

In hac habitasse platea dictumst. Donec nec magna enim. Donec vel lacus ut eros dapibus suscipit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum luctus est quis ante euismod varius. Morbi vulputate velit vitae est varius dignissim dapibus tellus placerat. Curabitur augue tortor, pellentesque sit amet porttitor eu, tincidunt eu arcu. Integer turpis eros, adipiscing et facilisis eu, vestibulum vitae mi. In tincidunt odio ut lorem euismod vel placerat augue bibendum. Donec non quam quis odio tincidunt vehicula. Donec dictum, lorem eget viverra convallis, sapien neque scelerisque quam, suscipit facilisis ante ligula et augue. Proin eget tellus tellus, sit amet fringilla est. Sed at turpis vitae ligula porttitor cursus. Maecenas metus tortor, hendrerit malesuada venenatis at, sodales facilisis leo.

Third panel

Praesent malesuada, sem non euismod blandit, augue est tempor metus, vitae consectetur urna dui at purus. Ut viverra lorem urna. Suspendisse egestas leo id elit consectetur adipiscing vel vel odio. Curabitur ut adipiscing augue. Donec rhoncus eros sed massa posuere aliquam. Cras tincidunt dapibus augue eu congue. Donec ut nunc lorem, eu blandit orci. Quisque ac libero id erat suscipit eleifend non sed nibh. Duis et augue orci, a lacinia dolor. Donec dui enim, sodales sit amet pellentesque ut, placerat vel lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed fringilla, felis et blandit posuere, dolor quam interdum eros, vel sodales nisl sapien in velit. Cras vel orci leo.

Configuration

Like the other widgets the tabs also has a fluent configuration API. To use it, create the tabs with the Begin method which takes a Tabs as its argument. The following example demonstrates this.

@using (var t = Html.JQueryUI().Begin(new Tabs().Active(2).Collapsible(true)))
{
    t.Tab("Tab 1", "tab1");
    t.Tab("Tab 2", "tab2");
    t.Tab("Tab 3", "tab3");
    using (t.BeginPanel())
    {
        <p>First panel</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla hendrerit elit sit amet mauris suscipit convallis. Sed bibendum mi in odio posuere venenatis. Integer nisi tortor, rutrum a tincidunt non, consequat quis augue. Fusce eu massa quis lorem laoreet lacinia sed eu purus. Sed eu mauris interdum velit congue feugiat ac sit amet libero. Nullam vel libero ut urna tempor fringilla et ac dolor. Phasellus scelerisque consectetur egestas. Aenean ac risus ullamcorper felis molestie ultricies sodales sed augue. Ut et turpis lacinia lorem aliquam semper vitae eu massa. </p>
    }
    using (t.BeginPanel())
    {
        <p>Secod panel</p>
        <p>In hac habitasse platea dictumst. Donec nec magna enim. Donec vel lacus ut eros dapibus suscipit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum luctus est quis ante euismod varius. Morbi vulputate velit vitae est varius dignissim dapibus tellus placerat. Curabitur augue tortor, pellentesque sit amet porttitor eu, tincidunt eu arcu. Integer turpis eros, adipiscing et facilisis eu, vestibulum vitae mi. In tincidunt odio ut lorem euismod vel placerat augue bibendum. Donec non quam quis odio tincidunt vehicula. Donec dictum, lorem eget viverra convallis, sapien neque scelerisque quam, suscipit facilisis ante ligula et augue. Proin eget tellus tellus, sit amet fringilla est. Sed at turpis vitae ligula porttitor cursus. Maecenas metus tortor, hendrerit malesuada venenatis at, sodales facilisis leo. </p>
    }
    using (t.BeginPanel())
    {
        <p>Third panel</p>
        <p>Praesent malesuada, sem non euismod blandit, augue est tempor metus, vitae consectetur urna dui at purus. Ut viverra lorem urna. Suspendisse egestas leo id elit consectetur adipiscing vel vel odio. Curabitur ut adipiscing augue. Donec rhoncus eros sed massa posuere aliquam. Cras tincidunt dapibus augue eu congue. Donec ut nunc lorem, eu blandit orci. Quisque ac libero id erat suscipit eleifend non sed nibh. Duis et augue orci, a lacinia dolor. Donec dui enim, sodales sit amet pellentesque ut, placerat vel lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed fringilla, felis et blandit posuere, dolor quam interdum eros, vel sodales nisl sapien in velit. Cras vel orci leo. </p>
    }
}

This creates the tabs below.

First panel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla hendrerit elit sit amet mauris suscipit convallis. Sed bibendum mi in odio posuere venenatis. Integer nisi tortor, rutrum a tincidunt non, consequat quis augue. Fusce eu massa quis lorem laoreet lacinia sed eu purus. Sed eu mauris interdum velit congue feugiat ac sit amet libero. Nullam vel libero ut urna tempor fringilla et ac dolor. Phasellus scelerisque consectetur egestas. Aenean ac risus ullamcorper felis molestie ultricies sodales sed augue. Ut et turpis lacinia lorem aliquam semper vitae eu massa.

Secod panel

In hac habitasse platea dictumst. Donec nec magna enim. Donec vel lacus ut eros dapibus suscipit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum luctus est quis ante euismod varius. Morbi vulputate velit vitae est varius dignissim dapibus tellus placerat. Curabitur augue tortor, pellentesque sit amet porttitor eu, tincidunt eu arcu. Integer turpis eros, adipiscing et facilisis eu, vestibulum vitae mi. In tincidunt odio ut lorem euismod vel placerat augue bibendum. Donec non quam quis odio tincidunt vehicula. Donec dictum, lorem eget viverra convallis, sapien neque scelerisque quam, suscipit facilisis ante ligula et augue. Proin eget tellus tellus, sit amet fringilla est. Sed at turpis vitae ligula porttitor cursus. Maecenas metus tortor, hendrerit malesuada venenatis at, sodales facilisis leo.

Third panel

Praesent malesuada, sem non euismod blandit, augue est tempor metus, vitae consectetur urna dui at purus. Ut viverra lorem urna. Suspendisse egestas leo id elit consectetur adipiscing vel vel odio. Curabitur ut adipiscing augue. Donec rhoncus eros sed massa posuere aliquam. Cras tincidunt dapibus augue eu congue. Donec ut nunc lorem, eu blandit orci. Quisque ac libero id erat suscipit eleifend non sed nibh. Duis et augue orci, a lacinia dolor. Donec dui enim, sodales sit amet pellentesque ut, placerat vel lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed fringilla, felis et blandit posuere, dolor quam interdum eros, vel sodales nisl sapien in velit. Cras vel orci leo.

Remote Content

The tabs widget can display remote content using Ajax requests. Use the AjaxTab method instead of the Tab method to defnie Ajax tabs. Do not create content panels for Ajax tabs - they will be created automatically when the content is loaded.

Here is an example.

@using (var t = Html.JQueryUI().BeginTabs())
{
    t.Tab("Tab 1", "tab1");
    t.AjaxTab("Ajax tab", Url.Action("RemoteContent"));    
    using (t.BeginPanel())
    {
        <p>First panel</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla hendrerit elit sit amet mauris suscipit convallis. Sed bibendum mi in odio posuere venenatis. Integer nisi tortor, rutrum a tincidunt non, consequat quis augue. Fusce eu massa quis lorem laoreet lacinia sed eu purus. Sed eu mauris interdum velit congue feugiat ac sit amet libero. Nullam vel libero ut urna tempor fringilla et ac dolor. Phasellus scelerisque consectetur egestas. Aenean ac risus ullamcorper felis molestie ultricies sodales sed augue. Ut et turpis lacinia lorem aliquam semper vitae eu massa. </p>
    }
}

And the result - the second tab gets its content form the server when you click on it. There is a 2 seconds delay built in.

First panel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla hendrerit elit sit amet mauris suscipit convallis. Sed bibendum mi in odio posuere venenatis. Integer nisi tortor, rutrum a tincidunt non, consequat quis augue. Fusce eu massa quis lorem laoreet lacinia sed eu purus. Sed eu mauris interdum velit congue feugiat ac sit amet libero. Nullam vel libero ut urna tempor fringilla et ac dolor. Phasellus scelerisque consectetur egestas. Aenean ac risus ullamcorper felis molestie ultricies sodales sed augue. Ut et turpis lacinia lorem aliquam semper vitae eu massa.

HTML Helpers

Fluent Configuration API