Saturday 9 August 2014

create jQuery UI tabs content navigation in ASP.NET

dynamic jquery UI tab creation

Description:-



In this Example we explain that how to create jQuery UI tabs content navigation in your ASP.NET Website or create Tab control in asp.net using jquery.

We all know or show that the One of the most features that you may often see in the many websites is the tabs-based content navigation. For example one tab contain Register form second tab contain Login form etc..

We ca also create UI tab using Ajaxcontrol Toolkit but this is the client side UI tab using jquery and also reduce the load and doesnot postback but in ajax we also require whole toolkit in our project so jquery is the best way to Dynamically create Jquery UI tab in asp.net.



to show Example of How to Bind XML data to Gridview click here Insert/Read from XML file and bind to Gridview



 

 Code:-

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>

<!DOCTYPE html>
<html lang="en">
<head id="Head1" runat="server">
    <title>Create jQuery UI Tabs in asp.net</title>
    <link type="text/css" href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css"
        rel="Stylesheet" />
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.4.js"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#InfoTab").tabs();
        });
    </script>
</head>
<body>
    <div class="content">
        <div id="InfoTab" style="width: 500px;">
            <ul>
                <li><a href="#Kirit">Kirit Kapupara</a></li>
                <li><a href="#pintu">Pintu Paghadar</a></li>
                <li><a href="#rahul">rahul thakkar</a></li>
            </ul>
            <div id="Kirit">
                <p>
                    kirit kapupara is a sofware engineer and he is worked on .Net technology. he was
                    completed his post gradution with MCA in Rajkot and he is also a Blogger.
                    <br />
                    here is a blogger link http://aspsolutionkirit.blogspot.in
                </p>
            </div>
            <div id="pintu">
                <p>
                    pintu paghadar is a sofware engineer and he is worked on .Net technology. he was
                    completed his post gradution with MCA in Rajkot and he is also a businessman..
                    <br />
                </p>
            </div>
            <div id="rahul">
                <p>
                    Rahul thakkar is a sofware engineer and he is worked on .Net technology. he was
                    completed his post gradution with MCA in Rajkot and he is also a Blogger.
                </p>
            </div>
        </div>
    </div>
</body>
</html>


0 comments:

Post a Comment