TAB PANEL USAGE

==============================VFPAGE==================

<apex:page controller="TaskClass" sidebar="false" id="Thepage">

 <style>

   .red{ background-color:Red;

   }

   .blue{

        Background-color:blue;

   }

   .yellow{

        Background-color:yellow;

    }    

 </style>

 <script>

     function validate(){

               

         var  Bname= document.getElementById("{!$Component.f.pb.pg.bn}").value;  

         var  Bauthor= document.getElementById("{!$Component.f.pb.pg.ba}").value; 

         var  Bprice= document.getElementById("{!$Component.f.pb.pg.bp}").value; 

         if(Bname==''){

            alert('Please Enter userName');

         }

         else if(Bauthor==''){

           alert('please Enter nickName');

         }

         else if(Bprice==''){

            alert('Enter your Email Id');

         }

         else{

             s();

         }     

                               

       }     

         

 </script>

 <apex:messages />

  <apex:tabPanel switchType="client" styleClass="background-color:skyblue" id="thetab" >

     <apex:tab label="BookList" styleClass="red" id="booklist" labelWidth="170" reRender="Bls" >

        <apex:form >

         <apex:actionFunction action="{!Record}" name="s"/>

           <apex:pageBlock title="All Records in List" id="tab"  >

                 <apex:pageblockTable var="BL" value="{!BookList}" >

                 <apex:column value="{!BL.name}" style="color:blue" />

                 <apex:column value="{!BL.Author__c}" style="color:orange"/>

                 <apex:column value="{!BL.Price__c}" style="color:PaleVioletRed"/>

               </apex:pageblockTable>

           </apex:pageBlock>>

         </apex:form>

     </apex:tab>

     <apex:tab label="Serch Book" id="Srbook" labelWidth="170" styleClass="blue" style="color:block">

      <apex:form >

        <apex:pageBlock title="serch book" id="page">

          <apex:outputtext > Enter Book Name </apex:outputtext>

          <apex:inputtext value="{!BookName}"/>

          <apex:commandButton value="Search" action="{!SerchBook}" reRender="page" status="status"/>

          <apex:actionStatus id="status" startText="Requesting....."></apex:actionStatus>

          <apex:pageBlockSection title="Book Details">

             <apex:pageblockTable value="{!SerchList}" var="SL" >

                <apex:column value="{!SL.name}"/>

                <apex:column value="{!SL.Author__c}"/>

                <apex:column value="{!SL.Price__c}"/> 

             </apex:pageblockTable>

          </apex:pageBlockSection>

        </apex:pageBlock>

       </apex:form>  

     </apex:tab>

     <apex:tab label="Insert Record" labelWidth="170" styleClass="yellow" id="Insert">

       <apex:form id="f">

          <apex:pageblock title="Insert Record" id="pb">

             <apex:panelGrid id="pg" >      

                Book name    <apex:inputtext value="{!BName}" id="bn"/>

                     Author  <apex:inputtext value="{!BAuthor}" id="ba"/>

                     price   <apex:inputtext value="{!Bprice}" id="bp"/>

                   <apex:commandButton value="Insert" onclick="validate()"/>

             </apex:panelGrid>  

          </apex:pageblock>

       </apex:form>

     </apex:tab>

   </apex:tabPanel>

 </apex:page>

=================================CONTROLLER=========================

public with sharing class TaskClass {

    public decimal Bprice { get; set; }

    public String BAuthor { get; set; }

    public string BName { get; set; }

        public TaskClass (){

           

        }

    public void Record (){

       book__c obj =new Book__c();

       obj.name=bname;

       obj.author__c=Bauthor;

       obj.price__c=Bprice;

       insert obj;

       ApexPages.Message myMsg=new ApexPages.Message(ApexPages.Severity.Info,'Record Inserted');

       ApexPages.addMessage(myMsg);

    }

    //http://mysfdcblog.blogspot.in/2012/09/tab-panel.html

    

    public string serchlist{set;}

    public List<Book__c> getserchlist(){

       try{

           List<Book__c> sls=[select name,author__c,price__c from book__c where name=:Bookname];

           return sls;

       }

       catch(Exception e){

         

       ApexPages.addMessage(new ApexPages.Message(ApexPages.Severity.Info,'No Record for'+Bookname));

       return null;

       }

    }

    public PageReference SerchBook() {

       //book__c sls=[select name,author__c,price__c from book__c where name=:BookName];

       return null;

    }

    public String BookName { get; set; }

    public String BookList {  set; }

    public List<book__c> getBookList(){

       List<book__c> books=[select name,author__c,price__c from book__c];

       return books;

    }

}