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:
This has four sections and the one
we'll look at is the UI widgets group.
Hint
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.
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).
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.
Hint
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.
Better still, add Comment and Uncomment to a Custom Toolbar, like
this.
Using the basic JQuery Snippets