12 September, 2006 / Cool Atlas Tab Strip Control

0 comments

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>

0 Comments:

Post a Comment

Links to this post:

Create a Link

<< Home

 

We are developing TargetProcess agile project management software and blogging about our progress.

Subscribe to the RSS feed
Stay tuned by having the latest updates via RSS
Follow TargetProcess on Twitter
Get in touch with our team

Try TargetProcess
TargetProcess quick tour