create JQuery ui tabs content navigation in asp.net

create JQuery ui tabs content navigation in asp.net

1:51:00 PM
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 can also create UI tab using Ajaxcontrol Toolkit but this is the client side UI tab using JQuery and also reduce the load and does not 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.

Default.aspx:-

<!DOCTYPE htmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></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>
<form id="form1" runat="server">
<div>
  <div class="content">
    <div id="InfoTab" style="width:500px;">
      <ul>
        <li><a href="#Jignesh">Umesh Patel</a></li>
        <li><a href="#pintu">Chirag Patel</a></li>
        <li><a href="#rahul">Kiran Patel</a></li>
      </ul>
      <div id="Umesh">
        <p> Umesh Patel 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 id="Chirag">
        <p>Chirag Patel 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="Kiran">
        <p>Kiran Patel 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>
</div>
</form>
</body>
</html>

Umesh Patel

Related Posts

Next
« Prev Post
Previous
Next Post »

Thanks for comments.....