PHP - PHPtabs or javascript tabs used in php

Can any one knos how We create Asp.Net MultiView Controler like tabs in php or javascript 

hi,

http://www.codeproject.com/KB/custom-controls/TabControl.aspx

Oh. That should be easy. 

I have attached a sample that I found over web couple of years ago. Please make sure you add the attribution to the source (You may find the details inside the attachment)
 
Add the stylesheet:
<link rel="stylesheet" type="text/css" href="tab-view.css" />

Add the tab div - the main placeholder.
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 452px;">
  <a <?=($id == 1) ? 'class="Current"' : 'href="sample.php?id=1"';?>>Tab 1</a>
  <a <?=($id == 2) ? 'class="Current"' : 'href="sample.php?id=2"';?>>Tab 2</a>
  <a <?=($id == 3) ? 'class="Current"' : 'href="sample.php?id=3"';?>>Tab 3</a>
</div>

Add the individual pages.
<div class="Pages" style="width: 450px; height: 300px;">
  <div class="Page" style="display: <?=($id == 1) ? 'block' : 'none';?>"><div class="Pad">Page 1</div></div>
  <div class="Page" style="display: <?=($id == 2) ? 'block' : 'none';?>"><div class="Pad">Page 2</div></div>
  <div class="Page" style="display: <?=($id == 3) ? 'block' : 'none';?>"><div class="Pad">Page 3</div></div>
</div>

And finally call the initialize method of the tabview script and pass the parent placeholder.
tabview_initialize('TabView');

Here is the source: php tabs.zip

Thank you.Can you provide any more tab script which can be closed?

What do you mean by "closed"?

I just checked the sample that I attached and it looked complete.

I mean  there is a close button or link to close tab.for example suppose it is  a tab "tab 1 x" when I press "x" tab 1 is closed.
Thank you for fast replies  

Add a script tag in the page, and add code to remove the tab from its parent container. Code below:

<script type="text/javascript">
    function removeMe(ctrl) {
        var tabContainer = document.getElementById('tabContainer');
        var tab = document.getElementById(ctrl);
        tabContainer.removeChild(tab);
    }
</script>

In the tabcontainer, give an id like below: and add the x mark. See the modified code below: pass the anchor tag as the parameter to the javascript function added in the above statement. 

<div class="Tabs" style="width: 452px;" id="tabContainer">
  <a id="firstlink" class="Current">Tab 1 &nbsp;&nbsp;<span onclick="removeMe('firstlink');">x</span></a>
  <a id="secondlink">Tab 2<span></span>&nbsp;&nbsp;<span onclick="removeMe('secondlink);">x</span></a>
  <a id="thirdlink" >Tab 3&nbsp;&nbsp;<span onclick="removeMe('thirdlink');">x</span></a>
</div>

That should do. 

You can use Jquery Tabs.

After adding jquery ui plugin you can use jquery tab like this-

 

<script>

$(function () {

$("#tabs").tabs();

});

</

script>

<

div id="tabs">

<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>Tab 1</p>

</div>

<div id="tabs-2">

<p> Tab 2</p>

</div>

<div id="tabs-3">

<p>Tab 3</p>

</div>

</

div>

For more example follow this also-

http://jqueryui.com/demos/tabs/

I suggest you go with jQuery tabs


Refer this for step by step tutorial and demo

http://blog.chapagain.com.np/simple-and-easy-jquery-tabs-with-ajax-and-php/


Regards