How to use Jquery in sharepoint 2010
How to integrate jquery with sharepoint in easy Steps
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.
Step 2.
Paste the Script in the HTML box > Click OK > Save the Page.
Step 3.
Step 4.
Step 5.
That's it; so you have implemented Jquery in SharePoint, you could experiment with more features of Jquery.
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
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.
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.
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
Comments
Also, trying to run the ClickMe.html from a document libray does not work, you only get the option to save the file, not open it.
Could this be the same issue when it tries to interact with the script files?
Q: Where in the code refers to the "jquerybubblepopup-themes"?
Q: Where do I store the jquerybubblepopup-themes folder in SharePoint?
Q: Where in the code refers to the "jquerybubblepopup-themes"?
- It refers to the "jquerybubblepopup-themes" folder which resides in "Jquerypopup". It also contains many other themes which you can make use of.
Q: Where do I store the jquerybubblepopup-themes folder in SharePoint?
- You should ideally store it in the "Style Library" and reference the path.
HTH