How can I use jQuery to improve SharePoint?
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:
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:
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:
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:
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:
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.
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.
Now you can see how much neater your page is.