Cool Atlas Tab Strip Control

Today we’ve found great control for tabs functionality in TargetProcess 2.0. It is very easy to use and consists only of one atlas/javascript file and some CSS code.

All you need to use it is:

1. Register TabSet.js javascript on page
2. Modify CSS to get required look and feel
3. Put tabs on page

Here is how tabs code looks:

<div id="tabs">
<ul>
    <li>General</li>
    <li>Projects</li>
    <li>Assignments</li>
</ul>
<div id="tab1" class="pane">
    <div style="width: 80%; margin-top: 20px">
        <tp:AttachmentControl ID="attach" runat="server" GeneralID='<%# Eval("UserID") %>' />
    </div>
<div id="tab2" class="pane">
       <tp:ProjectsInnerList ID="projects" runat="server" ParentID='<%# Eval("UserID") %>'/>
 </div>
 <div id="tab3" class="pane">
       <tp:ToDoInnerList ID="toDo" runat="server" ParentID='<%# Eval("UserID") %>' />
 </div>
</div>

...

<script type="text/xml-script">
   <page xmlns:script="http://schemas.microsoft.com/xml-script/2005" xmlns:dice="dice">
      <components>
          <dice:tabset id="tabs" selectedTabStyle="selected"/>
      </components>
   </page>
</script>