SharePoint & jQuery

About me Phill Duffy – Product Manager at Lightning Tools Ltd – Author of ‘Pro SharePoint with jQuery’ – MCTS Application Developer for 2007 & 2010

Agenda What is jQuery Getting started with jQuery Task List Demo using Client Object Model Using SharePoint Web Services Plugins Debugging jQuery considerations Questions

What is jQuery The write less, do more JavaScript Library First released 2006 Used in 43% of top 10,000 most visited Websites Designed to simplify client-side scripting of HTML Free and Open Source

Features DOM Selectors Events CSS manipulation Effects and animations Ajax Functionality Extensibility through plug-ins Utilities - such as the each function. Cross-browser support

GETTING STARTED WITH JQUERY

Where can I get it from? jquery.com – Download the version you want – Linking to a Local copy – Development and Production versions Use the Microsoft Content Delivery Network (CDN) or Google – – Linking to copy on public server

Adding it Layouts folder SharePoint Root WPResources Site Assets Document Library CDN Version

On PremiseSandboxed Layouts WPResources Site Assets Document Library CDN

Making available Custom Master Page AdditionalPageHead Delegate Control Custom Actions using ScriptSrc Content Editor Web Part Application Page\Web Part directly

jQuery Basics $ (document).ready(function() { // jquery goes here });

SELECTORS

jQuery Selectors $('p') $(‘#firstName’) $(‘.edit’) $('p[title=“Welcome"]') $('p.task').add('p.otherTask')

DEMO jQuery Selectors

EVENTS

The bad HTML File function doSomething() { alert(“You did something!”); } Click!

The good HTML File Click! JavaScript File $(‘#clickMe').click(function(){ alert('You did something!'); });

DEMO jQuery Events

DEMO Task list

DEMO Web Services

PLUGINS

Plugins jQuery UI - – Widgets – Animation – Visual Effects – Thousands of community driven plugins – Excellent documentation if you want to make them yourself – Existing plugins include things such as: Tag Clouds Image Rotators Lightboxes – “This is a jQuery library which abstracts SharePoint's Web Services and makes them easier to use”for SharePoint 2007 and 2010 – Marc D Anderson

DEBUGGING

Considerations Where is jQuery going to be hosted? How is the library going to be referenced? Does every page need to load it? How many times is the library being loaded? What happens if JavaScript is disabled on the client?

Summary Where to get it from How to make it available Understanding how jQuery works

Questions?