In this intro-level session on utilizing jQuery with SharePoint, the focus will be to empower users on how to satisfy some of the common UI changes clients request by writing clean and unobtrusive Javascript with the help of the jQuery library. We'll begin by diving into the different ways that jQuery can be hooked up to SharePoint. We'll talk about CDN versus local copies of the library, as well as linking jQuery via masterpages, custom actions, content editor web parts, and more.
We'll then spend time discussing css selectors, and some of the common patterns and jQuery methods you'll want to familiarize yourself with when targeting page-level elements. After that, the remainder of the presenation will be focused on walking through real-life scenarios of altering the UI with jQuery, such as adding interaction and animation to content query webparts, changing the behavior of links inside a page, and more. The code utilized in the presentation will be made available online after the Conference is completed.
2. About Me
Name Matt Jimison
Location Indianapolis, IN
Work
Blog http://www.mattjimison.com/blog/
Twitter @mjimison
3. Presentation Goals
âą Introduce the jQuery Library
âą Discuss How to Incorporate jQuery with SharePoint
âą Review Highlights of the jQuery API
âą Demonstrate Using jQuery to Enhance UI
âą Empower Audience to Utilize jQuery for UI Enhancements
4. What is
jQuery is a new kind of JavaScript Library.
6. âą User Interface Library Built on Top of jQuery
âą Interactions (Drag, Drop, Resize, Select, Sort)
âą Widgets (Accordion, Autocomplete, Date, Tabs, Slider, etcâŠ)
âą Effects (Animation, Show, Hide, Toggle)
âą Utilities
7. âą Touch-Optimized for Tablets and Smart Phones
âą Supports Multiple Devices
âą HTML5-based Interface
âą jQuery / jQueryUI Foundation
âą Lightweight
7 | SharePoint Saturday Columbus 2011
8. jQuery and Microsoft
âą Microsoft contributes to the jQuery Project
âą Microsoft Product Support includes jQuery
âą jQuery ships with Visual Studio 2010+
âą Visual Studio Intellisense Support
10. Downloading jQuery
âą Local Copy
⊠Download from http://jquery.com/
⊠Current and Past Releases
âą CDN (Content Delivery Network)
⊠Google
⊠Microsoft
⊠jQuery
11. CDN Considerations
âą CDN Advantages
⊠Quicker Downloads
⊠More Parallel Downloads
⊠Increased Use of Cache
âą CDN Disadvantages
⊠CDN Outages
⊠Loss of Internet Connection
âą Fallback Option to Load Locally When CDN Fails
12. Usage Guidance
âą Use Minified Versions in Production
âą Consider Local Storage Over CDN for Intranets
âą Clearly Mark Your Version(s) of jQuery
âą Test Thoroughly When Upgrading Versions
âą Be as Unobtrusive as Possible
13. jQuery Conflict
âą $ is an Alias for the jQuery function
âą Many Libraries Use the $
⊠CmsSiteManager.js (SharePointâs Asset Picker)
⊠Prototype.js
âą Conflict Occurs When jQuery Overwrites Other
Libraryâs function
âą Solution: jQuery.NoConflict()
14. jQuery.noConflict()
âą Removes jQueryâs use of the $ function
⊠Returns Control of $ to Other Libraries
⊠jQuery method can be used in place of $
⊠Alias jQuery By Capturing Return Value
⊠var jQ = jQuery.NoConflict();
⊠Pass $ to Ready Method For Scoped Usage
15. Adding jQuery to SharePoint
âą MasterPage (Or Page Layout)
⊠Adds Unnecessary Overhead On Pages That Donât Use jQuery (if any)
⊠Does not Touch Pages That Do Not Utilize Your MasterPage
âą Content Editor WebPart (Or Custom WebPart)
⊠Becomes a Burden to Manage References and Consistent Use
⊠Use the Content Link Versus Inline Code
âą Delegate Control
⊠Alternate Solution Exists in SharePoint 2010 (See next item)
âą CustomAction (New in SharePoint 2010)
⊠Breaks Asset Picker without Additional Configuration
âą Start.js
⊠jQuery Is Not Available At Page Load
17. jQuery API Browser
Available Online:
http://api.jquery.com/browser/
ï§
ï§
ï§
18. jQuery Selectors
âą Derived from CSS 1 â 3
âą Includes Additional jQuery Conventions
âą Meta-Characters Need Escaped with 2 Backslashes ()
⊠!"#$%&'()*+,./:;<=>?@[]^`{|}~
âą Common CSS Selector Support
⊠ID (#)
⊠Class (.)
⊠HTML (element)
19. Attribute Selectors
Description Selector
Equals Or Starts With Followed by Hyphen [name|=âvalueâ]
Contains Text [name*=âvalueâ]
Contains Word Delimited by Spaces [name~=âvalueâ]
Ends With [name$=âvalueâ]
Starts With [name^=âvalueâ]
Equals [name=âvalueâ]
Not Equals [name!=âvalueâ]
Has Attribute [name]
Multiple Attributes [name=âvalueâ][name2=âvalue2â]
20. Basic and Child Filters
Description Selector
Currently Animating :animated
Element at Given Index :eq()
Even or Odd Elements in Results :even, :odd
First or Last Element in Result :first, :last
Currently Focused :focus
Greater Or Less than Given Index :gt(), :lt()
Header Elements :header
Elements That Do Not Match :not()
First or Last Child :first-child, :last-child
Child at Given Index :nth-child()
Only Children :only-child
21. Additional Selectors
Description Selector
Contains Content (case-sensitive) :contains()
Empty Element :empty
Has An Element :has()
Parent Elements :parent
22. Selector Examples
Find ASP.Net Control Value (Works Around Control ID)
$("[id$='MyControl']").val()
Links With âClick hereâ Inside Text
$(âa:contains(âClick hereâ)â).css(âfont-sizeâ, â1.2emâ)
Odd Rows on Table
$(âtr:oddâ).addClass(âAlternateRowâ)
SharePoint Field Control
var myField = $(âinput[title=âMy Fieldâ]â)
23. Manipulation
Description Method
Adding, Removing, Toggling CSS Classes addClass(), removeClass(), toggleClass()
Adding Content .after(), .insertAfter(), .before(), .insertBefore(),
.append(), .appendTo(), .prepend(),
.prependTo()
Reading and Setting Attributes .attr(ânameâ), .attr(ânameâ, âvalueâ),
.attr({âname1â: âvalue1â, âname2â: âvalue2â})
Reading and Setting CSS Styles .css(ânameâ), .css(ânameâ, âvalueâ),
.css({âname1â: âvalue1â, âname2â: âvalue2â})
Reading and Setting Form Values .val(), .val(ânewvalueâ)
Reading and Setting Text .text(), .text(ânewvalueâ)
Reading and Setting HTML .html(), .html(â<strong>newvalue</strong>â)
Wrapping Elements .wrap(), .wrapAll(), .wrapInner()
Removing Elements .remove(), .empty(), .detach(), .unwrap()
24. Manipulation Examples
Set SharePoint Field Control
$(âinput[title=âMy Fieldâ]â).val(âMy New Valueâ);
Wrap Set of DIVs
$(âdiv.Itemâ).wrapAll(â<div class=âParentItemâ />â);
Toggle CSS Class
$(âdiv.Itemâ).toggleClass(âHighlightedâ);
Set CSS
$(â#MyDivâ).css({âbackgroundâ: âgreenâ, âpaddingâ: â5pxâ});
25. Traversal
Description Method
Loop through all items .each()
Add Elements to Current Results .add()
Filter Results .filter()
Filter Descendants .find()
Map to a New Result .map()
Children Selector .children()
Parent Selectors .parent(), .offsetParent(), .parentsUntil()
Sibling Selectors .siblings(), .next(), .prev(), .nextUntil(),
.prevUntil()
26. Traversal Examples
Count Words in Each Paragraph
$("p").each(function(i) { $(this).append(" (" + $(this).text().split(' ').length + "
words)"); });
Wrap First Paragraphâs Siblings
$(âp:firstâ).siblings().wrapAll(â<div style=âbackground:greenâ />â);
Find Next Unordered Lists Following First Occurrence
$("ul:first").next("ul").css("background","yellow");
33. Resources
âą jQuery
âą ScottGu: jQuery and Microsoft
âą Jon Galloway: Using CDN Hosted jQuery with a
Local Fall-back Copy
âą Find External Links with jQuery
âą jQuerify
âą SlideDeck