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:
- Accordion
- Tabs
- Slider
- Datepicker
- Progressbar
- Highlight / Error
Download jQuery, jQuery UI and themes from the following locations:
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
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
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
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.
Thank you!
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.
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!