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 by SharePoint pages, and the library should be loaded by the SharePoint pages.
The recommended location for deployment of the JavaScript library is C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS folder. Doing so will allow the file to be loaded via the URL http://pravaham123/_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 by 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://pravaham123/_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://pravaham123/_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 by multiple master pages, you can make sure the library is loaded by 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://pravaham123/_layouts/jquery-1.5.2.min.js"></script>
This Web user control needs to be deployed to the C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\CONTROLTEMPLATES 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:
$(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 your page is
ENJOY!
Comments
Post a Comment