EW Resource

V4 SP2 JQuery UI Snippets

See also V4 SP2 snippets and Basic JQuery Snippets

The new Snippets in SP2 make it a cinch to add sophisticated JQuery features to a page.

If you open the Snippets panel (I have it permanently docked next to the main Toolbox) and expand the JQuery group you'll see:

JQuery Snippets


This has four sections and the one
we'll look at is the UI widgets group.


You always need to work in Code view (or the code part of Split view) when working with snippets



As an example lets add a DatePicker to a page.

First we need to add the links to the JQuery and JQueryUI files and we can do this simply by adding the JQuery UI head snippet.

Place your cursor in the <head>..</head> section of the page, above title tag, <title>, and then open the UI widgets group in the Snippets panel.

JQuery UI widgets

Double click 'JQuery UI head' and this will add the necessary code to the page which will look like this. (Click to enlarge or close).

JQuery UI head

You'll notice a lot of external stylesheet links that are commented out. We'll look at those later.


Now place your cursor on the page (again in Code View) where you want the data picker added, typically in a form (the snippet adds the input box for you). Double click 'Calendar'. This adds the code and will look like this. (Click to enlarge or close).

We're almost there. Save and preview the page in a browser. Click the input text box below to see an example.

Now back to all those 'commented out' stylesheet links. These give you a lot of different options for the calendar's style. Try commenting the bottom one out and un-commenting one of the others and see the difference.


To 'comment' and 'un-comment' use one of SP2's other new features. Select the text you want to comment/uncomment and use Ctrl-J.Commenting

Better still, add Comment and Uncomment to a Custom Toolbar, like this.


Using the basic JQuery Snippets