Hi all, for example i got 2 text input and 2 checkbox..I want to show the textinput in a tab,and the 2checkbox in other tab without creating 2 html pages..Is it possible to achive it..Does anyone got an example for it?Thanks..

3 answers

danwellman 5600
1
point

Do you have any experience with jQuery? If so, the jQuery UI Tabs component is exactly what you're looking for.

It's powerful, robust and really easy to use :)

Answered about 7 years ago by danwellman
  • jQuery took over my dreams,I am kinda addicted to it now. Aaron about 7 years ago
Aaron 45
0
points

Here is a nice jQuery Tab Component : http://stilbuero.de/jquery/tabs_3/

<!DOCTYPE html>
<html>
<head>
  <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.tabs.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
    $("#tabs").tabs();
  });
  </script>
</head>
<body style="font-size:62.5%;">

<div id="tabs">
    <ul>
        <li><a href="#fragment-1"><span>One</span></a></li>
        <li><a href="#fragment-2"><span>Two</span></a></li>
        <li><a href="#fragment-3"><span>Three</span></a></li>
    </ul>
    <div id="fragment-1">
        <p>First tab is active by default:</p>
        <pre><code>$('#example').tabs();</code></pre>
    </div>
    <div id="fragment-2">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </div>
    <div id="fragment-3">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </div>
</div>
</body>
</html>
Answered about 7 years ago by Aaron
0
points

Thanks danwellman and Aaron,have you guys ever use codeigniter by the way?I'm still finding a tutor to implement jquery within codeigniter..Thanks..

Answered about 7 years ago by handoyo
  • Nope, I am an .net developer, sorry. Aaron about 7 years ago
  • great question, but ask it as a question or put it as a comment to someones answer. Not as an answer to your own question as you did now. Just a tip on how to best use this site :) Jens Hedqvist about 7 years ago