Arranging web parts in JQuery tabs

From past couple of weeks I’m thoroughly working on designing custom SharePoint sites which should look untraditional SharePoint site in all the way. Most of the time users ask to put lots of libraries web part on the home page which looks cluttered and dirty with scroll bars. So I thought why don’t I try with tab table and jQuery was my first preference. Here is how I achieved using SharePoint designer 2010

  • Open your SharePoint site in SharePoint designer 2010 and Download following JQuery JS files and keep into SharePoint site for reference.

Here are the locations,

http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css
http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js
  • Add new ASPX page into your site.

  • Open newly created aspx page in design mode and add following code in head section,
<link href="/path$/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script type="text/javascript" src="/path$/jquery.min.js"></script>
  <script type="text/javascript" src="/path$/jquery-ui.min.js"></script>

  <script type="text/javascript">
  $(document).ready(function() {
    $("#tabs").tabs();
  });
 </script>
  • Add following code in body section of the form , Comments shows where web part zone will be added.
<div id="tabs">

    <ul>
        <li><a href="#tab-1"><span>Announcements</span></a></li>
        <li><a href="#tab-2"><span>Events</span></a></li>
        <li><a href="#tab-3"><span>Tasks</span></a></li>
        <li><a href="#tab-4"><span>Shared Documents</span></a></li>

    </ul>

    <div id="tab-1">
        <!-- Web part Zone -->
    </div>

    <div id="tab-2">
       <!-- Web part Zone -->
    </div>

    <div id="tab-3">
         <!-- Web part Zone -->
    </div>

    <div id="tab-4">
        <!-- Web part Zone -->
    </div>

</div>
  • Add web part zone in each DIV . It should be like,

  • Save the form and hit F12. You can able to see the tab table like,

  • Time to link Master page into this aspx page. To do that, Go to Style tab and select master page to attach. View the page on the browser and add web parts to the zone. Here is the final output,

Advertisements

8 Comments on “Arranging web parts in JQuery tabs”

  1. Sok Cordell says:

    I am lost a bit – what do you mean webpart zone

    Lost in the webpart zone – i just wanted the tabs to work

  2. rishisahi says:

    Sok, Once you created the DIV tag you must need to add “Web Part Zone” in order to place your web parts inside. You can’t add web parts without adding Web part zone. In SharePoint designer you can see “Web Part Zone” under “Insert” tab. Let me know if you need any more help.

    Rishi

  3. JL says:

    Hello,
    I am trying to see if your tab works. I tried all sorts of tabs and was unsuccessful(easy tab, zone tab and etc). Again when I try the same steps you provided I get nothing more than bullet point when I tried to preview. Am I doing something wrong? been trying it for days to resolve but no luck. Any help would be appreciative.

    Thanks,
    JL

  4. teylyn says:

    there is an error in the code above. The div is called home-tab, but the jQuery function calls #tabs. These two need to be the same. Either change the first div in the code to be div id=”tabs” or change the function call to $(“#home-tab”).tabs();

  5. concerned reader says:

    Your code is wrong.
    In the javascript to setup the tabs, you say:
    $(“#tabs”).tabs();

    but you defined the UL ID as “home-Tab”. –

    These need to match. Change the div’s ID to: “tabs” and it works. 🙂

  6. Sonia says:

    I cannot seem to get this working. The page is rendering and I’m able to add web parts, but they are not being viewed as tabs. I didn’t see the page of tabs on the first save either as mentioned above. I changed the path to where the .css and .js are in my Style Library but still nothing (I tried both relative and absolute paths). Would it be possible for you to post your entire page of code?

  7. rishisahi says:

    Sonia, There was small mistake in the code .. Modified the code and it should work fine now..


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s