Slides and video from the SusQTech "30 on Thursday" webinar "Top 10 jQuery Uses in SharePoint 2010" February 7, 2013 | 1:30 - 2:00 pm ET In this 30 on Thursday webinar, Marc Anderson, SharePoint MVP, will take us through the top 10 uses for jQuery in SharePoint 2010. JQuery is a powerful JavaScript library that allows for easy implementation of dynamic user interface components for things like accordion navigation, tabs and image rotators that make website more engaging and usable.

1. Top 10 jQuery Uses in SharePoint 2010
Thank you for joining our webinar!
We will begin shortly.

2. Housekeeping
• „30 on Thursday‟ Series
– Bi-weekly 30 minute webinar series
• Next Webinar: Thursday, February 21st
– Building Charts with Power View - SharePoint 2013 and
Excel 2013
• Full Schedule: www.susqtech.com/webinars

3. Housekeeping
• Today‟s Session is being recorded
• Archive of Past Sessions
– SusQtech.com/ArchivedWebinars
• Questions - Use the window at right

4. OnlineCourses
Advanced InfoPath Forms in Using jQuery in SharePoint 2010
SharePoint 2010 Webinar Webinar
February 20, 2013 | Online March 28, 2013 | Online
Learn More or Register at
SusQtech.com/OnlineTraining

5. CourseRecordings
SusQtech.com/OnlineTraining

6. Today’sSession
• Topic:
– Top 10 jQuery Uses in SharePoint 2010
• Presenter:
– Marc Anderson, SharePoint MVP
• Moderator:
– Steve Witt, SusQtech

7. LET’S GET STARTED!

8. What Is jQuery?
From the 30 on Thursday webinar
description:
“jQuery is a powerful JavaScript library that
allows for easy implementation of dynamic
user interface components for things like
accordion navigation, tabs and image
rotators that make website more engaging
and usable.”

9. What Is jQuery?
From the jQuery.com site:
“jQuery is a fast, small, and feature-rich
JavaScript library. It makes things like HTML
document traversal and manipulation, event
handling, animation, and Ajax much simpler
with an easy-to-use API that works across a
multitude of browsers. With a combination of
versatility and extensibility, jQuery has
changed the way that millions of people write
JavaScript.”

10. Adding jQuery/jQueryUI
Referencing jQuery, jQueryUI, and SPServices from CDNs – Revisited
http://sympmarc.com/2013/02/07/referencing-jquery-jqueryui-and-
spservices-from-cdns-revisited/

11. 10. Simple text changes
$(".ms-socialNotif-text").text("Like This");

12. 9. Add branding effects
• Not just CSS-based
• React to user behavior
Fancy checkboxes and radio buttons
http://www.sympraxisconsulting.com/Demos/Demo%20Pages/FancyC
BandRB.aspx

13. 8. Add new behavior to
existing controls
$("input[title='Title']").val("Enter the title....");
$("input[title='Title']").click(function() {
$(this).val("");
});

14. 7. Rearrange DOM elements
$().SPServices.SPArrangeChoices
http://spservices.codeplex.com/wikipage?title=$().SPServices.SPArrangeChoices

15. 6. Add jQueryUI effects

16. 5. Plugins, plugins, plugins
• Image rotators
• Slideshows
• Charting
• Graphing
• Animation
• Effects
jQuery Plugin Registry: http://plugins.jquery.com/
MetroJS: http://www.drewgreenwell.com/

17. 4. Improve form interactions
• Cascading dropdowns
• Display related info
• Update multiple lists at the same time
$().SPServices.SPCascadeDropdowns
$().SPServices.SPDisplayRelatedInfo

18. 3. Reduce the number of
postbacks
• Use .ajax() to write to underlying lists
and libraries
• Satisfy the Facebook generation

19. 2. Improve the out of the box
user interface
Display All Related Tasks for a SharePoint Workflow Using jQuery, SPServices, and jQueryUI
http://sympmarc.com/2011/06/07/display-all-related-tasks-for-a-sharepoint-workflow-using-
jquery-spservices-and-jqueryui/

20. 1. Create interactive
applications

21. Questions/Comments
Marc Anderson
marc.anderson@sympraxisconsulting.com
@sympmarc
Steve Witt
SteveW@susqtech.com
@splumberjack
www.SusQtech.com/Webinars

22. ThankYou!