Tabs for sharepoint list forms using Jquery

When the fields on the Form exceeds the viewable range and we get a vertical scroll, we need to customize the sharepoint forms to display the page with out scroll.

scrolling is something that should be avoided for a optimum user experience.

we can customize our sharepoint forms to display the content in a different way so that user does not have to scroll to fill the details in the list form.

one of the best solution is to display the fields in tabbed format.
lets she how w can cusstomizae our sharepoint list to display the fields on tabs using JQuery.

•    First download the required JQuery files from Jquery.com as given below

     http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css

     http://code.jquery.com/jquery-1.10.2.js

     http://code.jquery.com/ui/1.11.4/jquery-ui.js

•      Go to SharePoint Designer
•      Create a page as shown below:

     

• Add references to the page as shown below:
• Search for “PlaceHolderAdditionalPageHead”
  
• Add following code as shown below
  
• Insert a DataviewWebpart 

• Select “New Item Form” from the datasource as shown below

• Go the columns in Dataviewwebpart.
• Create the div with id “tabs” under <TD>tag where <table> of the  columns starts and end the div in the same “<TD>”

• After creating divs

• Now create each tab to place the columns to be displayed in each tab shown below:

• Move your columns in to the table inside div of tab where column should be displayed.

• Code to place the columns inside tabs div

<tr>

<td>

<div id="tabs">

    <ul>

  <li><a href="#JI">Tab1</a></li>

   <li><a href="#CI"> Tab2</a></li>

   <li><a href="#DS"> Tab3</a></li>

   <li><a href="#ES"> Tab4</a></li>

                   <li><a href="#DA"> Tab5</a></li>

                                                             <li><a href="#SS"> Tab6</a></li>

                   </ul>

<div id="JI">

                  <table border="0" cellspacing="0" width="100%">

<tr>

<td width="25%" class="ms-vb">

<b>Title:</b>

</td>

<td width="75%" class="ms-vb">

<SharePoint:FormField runat="server" id="ff1{$Pos}" ControlMode="New" FieldName="Title" __designer:bind="{ddwrt:DataBind('i',concat('ff1',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Title')}" />

<SharePoint:FieldDescription runat="server" id="ff1description{$Pos}" FieldName="Title" ControlMode="Edit" />

</td>

</tr>

</table>                

</div>

              </div>

</td>

</tr>

• Screen shot after customization