Using jQuery UI in SharePoint 2010

Shameem Ahmed 12 December 2011 3




jQuery UI is a widget and interaction library built on top of the jQuery JavaScript Library, that you can use to build highly interactive web applications. The jQuery UI site has a number of demos that showcase the library’s capabilities.

In this article we’re going to see how to use jQuery UI widgets in SharePoint 2010, in particular we’re going to use the following widgets:

  1. Accordion
  2. Tabs
  3. Slider
  4. Datepicker
  5. Progressbar
  6. Highlight / Error

Download jQuery, jQuery UI and themes from the following locations:

  1. http://docs.jquery.com/Downloading_jQuery
  2. http://jqueryui.com/download

Create SharePoint 2010 solution in Visual Studio 2010
1. Create a new Empty SharePoint Project in Visual Studio 2010

2. Right-click on the Project in Solution Explorer and select Add New Item

3. Select Visual Web Part

4. Right-click on the Project in Solution Explorer and select Add

5. Select SharePoint “Layouts” Mapped Folder

6. Select Project folder in Layout Folder and create 2 folders called css and js

7. Copy jQuery and jQuery UI .js files into js folder

8. Copy the css and theme files into css folder

9. Your Solution explorer window should look like this now

jQuery UI SharePoint image 00

10. Add the following html into the visual web part:

11. Deploy the solution into Sharepoint 2010

12. Open SharePoint 2010 site

13. Create or edit an existing Sharepoint page

14. Click Web Part from Insert Tab

15. Select Custom from Categories

16. Select web part name from Web Parts

jQuery UI SharePoint image 01

17. Click Add to add the web part to the SharePoint page

18. Click Save & Close from the Ribbon

19. The Sharepoint page should now show the jQuery UI widgets added in the web part

jQuery UI SharePoint image 02

Summary

It’s easy to use jQuery and jQuery UI widgets using JEFS in SharePoint 2010. Other jQuery animation and effect libraries can also be used in similar manner.

To add more functionality we can customize the web part to accept properties that will control the look and feel and content of the jQuery UI widgets.

 

 




Shameem Ahmed (370 Posts)

3 Comments »

  1. Ricardo 28 February 2013 at 9:02 am - Reply

    Thank you!

  2. AG Kaur 20 September 2013 at 8:59 pm - Reply

    How would you tie the slider to a list? So when the user selects a value in the slider I would like it that the user clicks a submit button and that value gets put into a list.

    Thanks.

  3. msc 28 October 2013 at 9:10 am - Reply

    Hello,
    it’s great work.
    But I have a Problem using jQuery UI Tabs in SharePoint 2010. I have Rich Text Editor Boxes for multiline Text-Fields. Everything works fine, but when i want to pick a color, the color picker does not appear!
    Do you have a hint or a solution to fix it?
    Many Thanks!

Leave A Response »