Thursday, July 19, 2012

Asp.Net jQuery UI Tab Animation


In this post Asp.Net jQuery UI Tab Animation we shall on how to add animation effects while loading a tab.

Animation can be added to the tab loading by using the option
fx as follows.
$("").tabs("option", "fx", { opacity: '' });



By default tab switching happens without any animations, adding the fx property adds animation effect to tab load.
$("#SimpleTab").tabs("option", "fx", { opacity: 'toggle' });
$("#SimpleTab").tabs("option", "duration", "slow");

Full Example

Add a DIV tag SimpleTab to the page, and add the below jQuery script. Change the references of the jQuery library files to map to your local path. 

Click the Animate Tab button, this will change the tab animation effect, now switch tabs and enjoy the animation effect.

<html xmlns="http://www.w3.org/1999/xhtml">
<
head runat="server">
    <
title>jQuery UI Tabs</title>
    <link type="text/css"
href="css/smoothness/jquery-ui-1.8.21.custom.css"
rel="Stylesheet" />
    <script
type="text/javascript"
src="JavaScript/jquery-1.7.2.js"></script>
    <script
type="text/javascript"
src="JavaScript/jquery-ui-1.8.21.custom.min.js"></script>
    <link
type="text/css"
href="Stylesheet.css" // Add your own .css file (Optional)
rel="Stylesheet" />
    <script type="text/javascript">
$(document).ready(function() {
//
            // Simple Tab
            $("#SimpleTab").tabs({ collapsible: true });
            //
            // Tabs - Animation
            $('#btnAnimate').click(function(event) {
                event.preventDefault();
                $("#SimpleTab").tabs("option", "fx", { opacity: 'toggle' });
                $("#SimpleTab").tabs("option", "duration", "slow");
            }); });
    </script>
</head>
<body>
    <form id="frmAccordion" runat="server">
        <table>
<tr valign="top">
                <td>Simple Tab: </td>
                <td>
                    <div id="SimpleTab">
                          <ul>
                                <li><a href="#tab1">Tab-1</a></li>
                                <li><a href="#tab2">Tab-2</a></li>
                                <li><a href="#tab3">Tab-3</a></li>
                          </ul>
                          <div id="tab1">
                                Tab-1 Content goes here.
                          </div>
                          <div id="tab2">
                                Tab-2 Content goes here.
                          </div>
                          <div id="tab3">
                                Tab-3 Content goes here.
                          </div>
                    </div>
                </td>               
            <tr valign="top">
                <td>Tabs - Animation </td>
                <td>
                    <asp:Button
ID="btnAnimate"
runat="server"
Text="Animate Tab" />
                </td>               
            </tr>
  </table>
    </form>
</body>

Search Flipkart Products:
Flipkart.com

No comments: