What is jQuery UI?
What is JEFS?
Using Datepicker jQuery UI in Sharepoint 2010 using JEFS
In this article we’ll look at how to use jQuery UI widget Datepicker. Other jQuery UI widgets can be used in a similar manner.
Deploying JEFS in Sharepoint 2010
Follow the instructions from the official site to install JEFS in Sharepoint 2010.
Using JEFS in Sharepoint 2010
Create a page in Sharepoint 2010, go to Site Actions \ New Page
HTML INPUT elements are needed for use with jQuery UI. Sharepoint does not provide a way to add INPUT elements directly into the page, so we need to open the page in Sharepoint Designer and add INPUT elements.
Select Page\Edit\Edit in Sharepoint Designer
The page opens in Sharepoint Designer, select Insert\HTML\Input (Text)
Change the Id attribute of the Input field to txtDate
Exit Sharepoint designer and open the page in Sharepoint 2010.
alert(‘JEFS is cool…’);
Using jQuery in JEFS
// include: [path to the .js file]
So for including the jQuery library in JEFS editor type:
Note: We’re using the jQuery library from the Microsoft CDN location, change the URL if you are hosting the library from your local server or another CDN.
To make sure that jQuery works, insert the following script in the editor:
// include: http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.js
Save and reload the page, if everything is well you will see the following in the page:
Using jQuery UI in JEFS
To use jQuery UI we need to include jquery-ui library in the editor as we did for jQuery, like this:
Using Datepicker widget in JEFS
And the result:
Implementing jQuery UI themes in Sharepoint 2010
Implementing jQuery UI themes in Sharepoint 2010 is tricky, currently there is no way to include .css file in JEFS in the same fashion as for .js files.
A workaround is to create a SharePoint custom solution in Visual Studio 2010 and install the theme files (.css, images etc.) using Sharepoint Feature.
Once themes are installed in Sharepoint 2010, you can see the themes in action in SharePoint pages.
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 a similar manner.
Implementing themes is tricky because there is no support for including .css files in JEFS as there is for .js files. We hope that the JEFS team will support this feature in a future version.