ComponentOne Wijmo Open for Juice UI
Wijmo Open for Juice UI Extender Controls / WijTabs / WijTabs Task-Based Help / Setting Tab Animation
In This Topic
    Setting Tab Animation
    In This Topic

    The WijTabs control allows you to add animation for transitioning between tabs. Use the ShowOption and HideOption properties to take advantage of this feature.

    1. Create an ASP.NET Web application with a ScriptManager control and install Juice UI and the Wijmo Juice libraries to your project via NuGet.
    2. Add a standard Panel control to the main content of  your page.
    3. In the panel, add some content for the tabs and tab headers using the following markup:
      <asp:Panel ID="Panel1" runat="server">
      
          <ul>
      
                     <li><a href="#tabs-1">Nunc tincidunt</a></li>
      
                     <li><a href="#tabs-2">Proin dolor</a></li>
      
                     <li><a href="#tabs-3">Aenean lacinia</a></li>
      
               </ul>
      
               <div id="tabs-1">
      
                     <p>
      
                           Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec
      
                           arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante.
      
                           Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper
      
                           leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales
      
                           tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel
      
                           pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum.
      
                           Nunc tristique tempus lectus.</p>
      
               </div>
      
               <div id="tabs-2">
      
                     <p>
      
                           Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra
      
                           massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget
      
                           luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean
      
                           aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent
      
                           in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat
      
                           nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque
      
                           convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod
      
                           felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
      
               </div>
      
               <div id="tabs-3">
      
                     <p>
      
                           Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate,
      
                           pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem.
      
                           Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia
      
                           nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo
      
                           pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem
      
                           enim, pretium nec, feugiat nec, luctus a, lacus.</p>
      
                     <p>
      
                           Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam
      
                           ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing
      
                           velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula
      
                           faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero
      
                           sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor
      
                           ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas
      
                           commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit
      
                           hendrerit.</p>
      
               </div>
      
          </asp:Panel>
      
    4. In Source view, use the following markup to add a WijTabs control to the page and set the TargetControlID to Panel1.
        <cc1:WijTabs ID="Panel1_WijTabs" runat="server"        
      
              TargetControlID="Panel1">        
      
        </cc1:WijTabs>
      
    5. Select View | Properties Window in the Visual Studio menu.
    6. Click the drop-down list at the top of the Properties window and select Panel1_WijTabs.
    7. Set the ShowOption properties:

      ShowOption-Blind

      True

      ShowOption-Duration

      1500

      ShowOption-Fade

      True

    8. Set the HideOption properties:

      HideOption-Blind

      False

      HideOption-Duration

      200

      HideOption-Fade

      True

      The markup for the WijTabs control should now look similar to the following:

      <cc1:WijTabs ID="Panel1_WijTabs" runat="server"        
      
              TargetControlID="Panel1" ShowOption-Duration="1500" HideOption-Blind="False" HideOption-Duration="200">
      
      </cc1:WijTabs>
      
    9. Press F5 to run the application. When you click a tab, the content from the previously selected tab fades quickly, and the content for the selected tab drops down and slowly fades in.