随笔- 209 文章- 3 评论- 15 阅读- 23万

Jquery integtating in sharepoint 2007

Deploying the jQuery JS file is quite easy: I recommend deploying it to the C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS folder on every Front End Web Server of your SharePoint Server Farm. By doing so, the file can be loaded by making use of the URL http://yoursite/_layouts/ jquery-1.2.6.min.js or http://yoursite/subsite/_layouts/ jquery-1.2.6.min.js, since the _layouts part of the URL always points to the LAYOUTS folder in the 12-hive.

Making sure that SharePoint pages will load the library can be accomplished in a couple of ways:

1) Load the library in the page you want to use it
This can be done very easily by adding for example a Content Editor Web Part to the page (or modifying the page with an editor), containing the following HTML:

2) Add the script to the master page
You can add the same script tag to the master page that is used by your SharePoint sites as well, typically in the HEAD tag:

This may look very easy, but remember modifying out-of-the-box files in the 12 hive is typically not supported. So if your sites use the default master page, this is a no-go. Additionally it could be that you’ve to multiple master pages (e.g. system and site master pages) which complicate the situation.

3) Use the AdditionalPageHead Delegate Control (my favorite!)
By providing the contents for the AdditionalPageHead Delegate Control that is used by all the out-of-the-box master pages, you can make sure the the jQuery library is loaded by all the SharePoint pages. The AdditionalPageHead Delegate Control allows multiple controls to provide contents, so it’s a great extensibility scenario. To accomplish this you need to build a web user control (ASCX file), that contains the script tag to load the jQuery library:

<%@ Control Language="C#" ClassName="jQueryControl" %>
<script type="text/javascript" src="http://weblogs.asp.net/_layouts//jquery-1.2.6.min.js"></script>

There is no code-behind file required. This control needs to be deployed to the C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\CONTROLTEMPLATES folder on the hard drive of every SharePoint Front End Web Server. Additionally you need to have a feature that will add the control to the AdditionalPageHead Delegate Control, the feature’s manifest will look like this (assuming the control is named jQueryControl.ascx):

The feature can be scoped to any level, when it’s activated on a certain level, all the pages will automatically have the script tag in their HEAD tags. Pretty cool, isn’t it?

You can do all of this manually, but it’s of course much nicer to package the jQuery library JS file, the user control and the corresponding feature into a SharePoint Solution (WSP). I’ve created a sample Solution file, that contains a feature scoped to the Web level so the jQuery library can easily be deployed and enabled or disabled per SharePoint site. There is also an installer available that guides you through the installation process by making use of a nice wizard. You can find the solution, installer and sources as a part of the SmartTools project on CodePlex (direct link to the releases).