As you know, jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid Web development. You may be wondering, however, if jQuery can be used to help a SharePoint site flourish. Read on!
Challenge:
How can I use jQuery to improve SharePoint?
Solution:
To use jQuery with SharePoint, there are two things that need to be done: The JavaScript library should first be deployed to a location which can be accessed SharePoint pages, and the library should be loaded the SharePoint pages.
The recommended location for deployment of the JavaScript library is C:Program FilesCommon FilesMicrosoft Sharedweb server extensions12TEMPLATELAYOUTS folder. Doing so will allow the file to be loaded via the URL http://mysites/_layouts/jquery.js, because the _layouts part of the URL always points to the LAYOUTS folder.
There are a couple of ways you can do this.
1) Using the Content Editor Web Part to load your jQuery Library
The simplest way to load the library is adding a Content Editor Web Part to the page and adding the following script to its Source Editor in the tool pane:
<script type="text/javascript" src="http://mysites/_layouts/jquery-1.5.2.min.js"></script>
You may ask, “What if I want to use jQuery for a bunch of pages, do I have to add the Web Part to each page?” The answer to that question is “Unfortunately, yes,” so let’s take a look at the next strategy.
2) Using the Master Page to load the jQuery Library
By using the master page to load the library, you don’t have to add the Content Editor Web Part to each page on which you want to use jQuery. All you need to do is add the same script tag to your master, and in the HEAD tag:
<HEAD runat="server">
. . .
<script type="text/javascript" src="http://mysites/_layouts/jquery-1.5.2.min.js"></script>
. . .
</HEAD>
This would seem to be the perfect way to load the file, but be advised that when you have multiple master pages, the situation will become more complicated…
3) Using SharePoint Delegate Control
By providing the contents to the Delegate Control, which can be used multiple master pages, you can make sure the library is loaded all the SharePoint pages. To do this, you need to create a Web user control that contains the script tag to load the jQuery library:
<%@ Control Language="C#" ClassName="jQueryControl" %>
<script type="text/javascript" src="http://mysites/_layouts/jquery-1.5.2.min.js"></script>
This Web user control needs to be deployed to the C:Program FilesCommon FilesMicrosoft Sharedweb server extensions12TEMPLATECONTROLTEMPLATES folder. Additionally, you need to have a feature that will add the control to the Delegate Control. For an example of what the feature’s manifest will look like, here is the user control named jQueryControl.ascx:
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
<Control
Id="DelegateControl"
ControlSrc="~/_controltemplates/jQueryControl.ascx />
</Elements>
The feature can be scoped to any level, and when it’s activated on a certain level, all the pages will automatically have the script tag in their HEAD tags.
Now, let’s start using jQuery with Sharepoint with a few examples as shown below:
Example 1: Assume that you have a SharePoint Task List, Calendar List, or Document Library which is displayed on a nice table with rows and columns, but one day you decide it’s not so nice anymore, and try to add some animations to make it more interesting. Let’s try the code sample below:
$(document).ready(function()
{
$("table[class='ms-listviewtable'] tr").hover
(
function() {
$(this).addClass("myRowHighlight");
},
function() {
$(this).removeClass("myRowHighlight");
}
);
}
);
The code tries to highlight the entire row when the user hovers over the table. Of course, you need to declare the myRowHightLight CSS as well.
<style type="text/css">
.myRowHighlight {color:red; background-color:#FFCC66}
</style>
Now, Add the Content Editor Web Part into you page, open its tool pane and click on Source Editor.
Next, copy and paste the script and CSS class above to the Text Entry – Web Page Dialog
Open your SharePoint List, hover over one of the rows of the table, and the entire row is highlighted.
Example 2: Imagine you had a Publishing Page with a large chunk of content in the body. You definitely don’t want your readers to scroll over the vertical bar to read entire your content. So how can you split the content into pages without any work from server side?
I would recommend that you use jQuery to page your content. Of course, you can use your own preferred method to achieve this goal, but for now, let’s add the code below to the Source Editor in the tool pane of the Content Editor Web Part.
<script>1:2: var paging = new Imtech.Pager();3: $(document).ready(function()4: {5: paging.pagingContainer = $("#content");6: paging.paragrahs = $("p", paging.pagingContainer);7: paging.showPage(1)8: ;});</script>
Now you can see how much neater your page is.
See Also:
- Integrating SharePoint 2007 and jQuery (Part One) [Jan Tielens]
- Integrating SharePoint 2007 and jQuery (Part Two) [Jan Tielens]
