PHP - PHPtabs or javascript tabs used in php - Asked By waseem kaleem on 16-Jan-12 11:33 AM

Can any one knos how We create Asp.Net MultiView Controler like tabs in php or javascript 
kalpana aparnathi replied to waseem kaleem on 16-Jan-12 12:03 PM
[)ia6l0 iii replied to waseem kaleem on 16-Jan-12 12:04 PM
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
waseem kaleem replied to [)ia6l0 iii on 16-Jan-12 12:10 PM
Thank you.Can you provide any more tab script which can be closed?
[)ia6l0 iii replied to waseem kaleem on 16-Jan-12 12:21 PM
What do you mean by "closed"?

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

waseem kaleem replied to [)ia6l0 iii on 16-Jan-12 12:28 PM
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  
[)ia6l0 iii replied to waseem kaleem on 16-Jan-12 12:38 PM
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. 







Jitendra Faye replied to waseem kaleem on 16-Jan-12 11:55 PM

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/

Riley K replied to waseem kaleem on 16-Jan-12 11:57 PM


I suggest you go with jQuery tabs

jQuery(document).ready(function(){
  $("#preloader").hide();
  jQuery("[id^=tab]").click(function(){
  
    // get tab id and tab url
    tabId = $(this).attr("id");
    tabUrl = jQuery("#"+tabId).attr("href");
  
    jQuery("[id^=tab]").removeClass("current");
    jQuery("#"+tabId).addClass("current");
  
    // load tab content
    loadTabContent(tabUrl);
    return false;
  });
});

Refer this for step by step tutorial and demo

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


Regards