How to use Jquery in sharepoint 2010

How to integrate jquery with sharepoint in easy Steps

This tutorial will guide you step  by step on how to integrate Jquery into SharePoint, and the best part is being an end-user with no special administrative privilege you should be able to do the integration of  Jquery  into SharePoint... Guess that should have given you some happiness !!

Have you ever felt of having a nice pop-up on your SharePoint page when you hover your mouse over a link or an image? Yes that's what I would be showing you today. You can download all the necessary script and the files from this link :  

So let's download the zip file first. Download

Now let me take you through the steps, you don’t need to edit any SharePoint Master Pages or get the SharePoint Designer / Visual Studio all you need to do is just a "Content Editor Webpart" and a document library to store the "Jquery" Files. 

Do you want to see the pop-up working on your site straight away ? If So lets do it,   so that you can see how it looks in your SharePoint site ,  follow the below 2 simple step for you to get a feel of it.

Step 1.

Unzip the zip file you got now, copy the folder "jquery-bubble-popup-v3"  into a SharePoint  Document Library.

Step 2.

Open the Folder > Click on the html page you see here , "ClickMe.html" and that's it, it should open up the file where you can hover your mouse on the "mouse over here" text and  you should see a pop-up.. 

What you have done is, you have opened an html file and it is showing up the jquery pop-up, that should give you some happiness. Now the next step is to see how we can get the same pop-up in a SharePoint page and also how to link it to different elements like the image or the links

There is a small tidying up need to be done and put proper reference for this, You Ready ?

Step 1.

Navigate to the SharePoint page where you want to see the pop-up, insert a  Content Editor Webpart on the page. There is a file which you can find in the folder called "SharePoint JQuery Script.txt", this contains the script file which you need to insert to a Content Editor Webpart, so we need to put the right references here

Update the below three lines with appropriate path to the files in reference to your Site

(There is an easier way to find it, if you navigate to these actual files in your site and then hover your mouse over the file and click on the drop-down > Send To > Email a Link will give you the full path including " http://url" you can paste the same complete link here and SharePoint will trim this down for you...easy ya? )

 Step 2.

Once you have updated the above references,  select the Content Editor webpart (CEWP)> Select the "Format Text" tab on the Ribbon Control  > click on the HTML > Edit HTML Source

Copy the whole script code from "SharePoint Jquery Script.txt" updated with your reference and paste it in the CEWP.

Paste the Script in the HTML box  > Click OK >  Save the Page.

Step 3.

Now when ever you paste any scripts in the CEWP, Sharepoint always does some editing to clean it up, so ensure you got the scripts without any spaces or changes else it wont work, double check it with the screen shot below.

Step 4.

If everything is fine then hover your mouse over the "click here" and then you should see a pop-up

Step 5.

You can create or associate this pop-up with any links or images on the page all you need to do is to copy paste the same code segment and create unique id and reference the Class id. 

That's it;  so you have implemented Jquery in SharePoint, you could experiment with more features of Jquery.

Hope this article throws some light on the JQuery front...

Reference

This article have used Jquery Pop-Up with open license, refer the below link for more options on parameters

http://www.maxvergelli.com/jquery-bubble-popup/documentation/#usage

http://jquery.com/