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

SharePoint 2010 and JQuery Slideshow

SharePoint doesn’t provide very good slide show functionality which end users ask oftentimes.It can be done using custom JavaScript but I believe JQuery best suited on this scenario. Here is the simple code,

  • Add “Content Editor” web part on the page and modify HTML with following code ,
<IMG ID=”slideshowPicturePlaceholder” src=”/_layouts/images/GEARS_AN.GIF” style=”display:none”/>
<center><div id=”slideshowContentArea” style=”display:none”>&nbsp;</div></center>
<script type=”text/javascript” src=”http://server_path/Configurations/jquery.min.js”></script&gt;
<script type=”text/javascript” src=”http://server_path/Configurations/jquery.cycle.all.2.72.js”></script&gt;
<script>
function GetAllImages()
{
$(“#slideshowPicturePlaceholder”).css(“display”, “block”);
var soapEnv = “<soapenv:Envelope xmlns:soapenv=’http://schemas.xmlsoap.org/soap/envelope/’><soapenv:Body><GetListItems xmlns=’http://schemas.microsoft.com/sharepoint/soap/’>&#8221;;
//The name of the image library is called ‘SlideShow’. Replace the name bewlo with the name of your image library
soapEnv += “<listName>SlideShow</listName>”;
soapEnv += “<query><Query><OrderBy Override=’TRUE’><FieldRef Name=’Created’ Ascending=’FALSE’ /></OrderBy></Query></query>”;
soapEnv += “<viewFields><ViewFields><FieldRef Name=’Title’/><FieldRef Name=’ows_FileLeafRef’/></ViewFields></viewFields><rowLimit></rowLimit>”;
soapEnv += “</GetListItems></soapenv:Body></soapenv:Envelope>”;
var port = window.location.port;
if (port.length <= 0)
port = “”;
else
port = “:”+port;
var webservice = window.location.protocol+”//”+window.location.hostname+
port+L_Menu_BaseUrl+”/_vti_bin/lists.asmx”;
$.ajax({
url: webservice,
type: “POST”,
dataType: “xml”,
data: soapEnv,
complete: processQueryResults,
contentType: “text/xml; charset=utf-8”,
error: function(xhr) {
alert(‘Media Library error : Unable to retrieve pictures ‘);}
});
}
function processQueryResults(xData, status)
{
var port = window.location.port;
if (port.length <= 0)
port = “”;
else
port = “:”+port;
//Change the below to point to your image library
var imageURL = window.location.protocol+”//”+window.location.hostname+port+L_Menu_BaseUrl+”/SlideShow/”;
var itemURL = window.location.protocol+”//”+window.location.hostname+port+L_Menu_BaseUrl+
“/SlideShow/Forms/DispForm.aspx?ID=”;
$(“#slideshowContentArea”).html(“”)
$(xData.responseXML).find(“z\\:row”).each(function() {
var title = $(this).attr(“ows_Title”);
var imageLink = imageURL+$(this).attr(“ows_FileLeafRef”).substring($(this).attr(“ows_FileLeafRef”).indexOf(‘#’)+1);
var itemLink = itemURL+$(this).attr(“ows_ID”);
var liHtml = “<div style=’padding: 10px;border:0px solid #FFFFFF;background-color:#FFFFFF;width:250px;height: 250px;top:0;left: 0;’><a href='”+itemLink+”‘ target=’_blank’ border=’0′><img width=’250′ height=’250′ src='” + imageLink +”‘/></a><p align=’center’>”+ title + “</p></div>”;
$(“#slideshowContentArea”).append(liHtml);
});
$(“#slideshowPicturePlaceholder”).css(“display”, “none”);
$(“#slideshowContentArea”).css(“display”, “block”);
$(‘#slideshowContentArea’).cycle({
fx: ‘fade’,
speed: 600,
timeout: 3000,
next: ‘#slideshowContentArea’,
pause: 1
});
}
GetAllImages();
</script>
 
Don’t forget following ,
 
  • Correct the path of “jquery.min.js” and “jquery.cycle.all.2.72.js” files in above code.
  • Change the picture library name as per actual , above it’s “Slide Show”.

Here is my slide show web part, Sorry you can see only still image but believe me it’s perfect for your end users.