jquery rescue adventure
DESCRIPTION
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.TRANSCRIPT
![Page 1: jQuery Rescue Adventure](https://reader034.vdocuments.us/reader034/viewer/2022042700/5558bd8dd8b42a7e298b51a1/html5/thumbnails/1.jpg)
jQuery Rescue AdventureINTRODUCTION TO JQUERY INSIDE SHAREPOINT
Developer Track
Matt Jimison
![Page 2: jQuery Rescue Adventure](https://reader034.vdocuments.us/reader034/viewer/2022042700/5558bd8dd8b42a7e298b51a1/html5/thumbnails/2.jpg)
About Me
Name
Location
Work
Blog
Matt Jimison
Indianapolis, IN
http://www.mattjimison.com/blog/
@mjimison
![Page 3: jQuery Rescue Adventure](https://reader034.vdocuments.us/reader034/viewer/2022042700/5558bd8dd8b42a7e298b51a1/html5/thumbnails/3.jpg)
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
![Page 4: jQuery Rescue Adventure](https://reader034.vdocuments.us/reader034/viewer/2022042700/5558bd8dd8b42a7e298b51a1/html5/thumbnails/4.jpg)
What is
jQuery is a new kind of JavaScript Library.
![Page 5: jQuery Rescue Adventure](https://reader034.vdocuments.us/reader034/viewer/2022042700/5558bd8dd8b42a7e298b51a1/html5/thumbnails/5.jpg)
jQuery Overview
• HTML Document Traversing
• Event Handling
• Animation
• AJAX
• Lightweight Footprint (~31KB)
• CSS3 Compliant (Supports Selectors)
• Cross-Browser (IE, Firefox, Safari, Opera, Chrome)
![Page 6: jQuery Rescue Adventure](https://reader034.vdocuments.us/reader034/viewer/2022042700/5558bd8dd8b42a7e298b51a1/html5/thumbnails/6.jpg)
• 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
![Page 7: jQuery Rescue Adventure](https://reader034.vdocuments.us/reader034/viewer/2022042700/5558bd8dd8b42a7e298b51a1/html5/thumbnails/7.jpg)
7 | SharePoint Saturday Columbus 2011
• Touch-Optimized for Tablets and Smart Phones
• Supports Multiple Devices
• HTML5-based Interface
• jQuery / jQueryUI Foundation
• Lightweight
![Page 8: jQuery Rescue Adventure](https://reader034.vdocuments.us/reader034/viewer/2022042700/5558bd8dd8b42a7e298b51a1/html5/thumbnails/8.jpg)
jQuery and Microsoft
• Microsoft contributes to the jQuery Project
• Microsoft Product Support includes jQuery
• jQuery ships with Visual Studio 2010+
• Visual Studio Intellisense Support
![Page 9: jQuery Rescue Adventure](https://reader034.vdocuments.us/reader034/viewer/2022042700/5558bd8dd8b42a7e298b51a1/html5/thumbnails/9.jpg)
Intellisense Demo
![Page 10: jQuery Rescue Adventure](https://reader034.vdocuments.us/reader034/viewer/2022042700/5558bd8dd8b42a7e298b51a1/html5/thumbnails/10.jpg)
Downloading jQuery
• Local Copy◦ Download from http://jquery.com/◦ Current and Past Releases
• CDN (Content Delivery Network)◦ Google◦ Microsoft◦ jQuery
![Page 11: jQuery Rescue Adventure](https://reader034.vdocuments.us/reader034/viewer/2022042700/5558bd8dd8b42a7e298b51a1/html5/thumbnails/11.jpg)
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
![Page 12: jQuery Rescue Adventure](https://reader034.vdocuments.us/reader034/viewer/2022042700/5558bd8dd8b42a7e298b51a1/html5/thumbnails/12.jpg)
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
![Page 13: jQuery Rescue Adventure](https://reader034.vdocuments.us/reader034/viewer/2022042700/5558bd8dd8b42a7e298b51a1/html5/thumbnails/13.jpg)
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()
![Page 14: jQuery Rescue Adventure](https://reader034.vdocuments.us/reader034/viewer/2022042700/5558bd8dd8b42a7e298b51a1/html5/thumbnails/14.jpg)
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
![Page 15: jQuery Rescue Adventure](https://reader034.vdocuments.us/reader034/viewer/2022042700/5558bd8dd8b42a7e298b51a1/html5/thumbnails/15.jpg)
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
![Page 16: jQuery Rescue Adventure](https://reader034.vdocuments.us/reader034/viewer/2022042700/5558bd8dd8b42a7e298b51a1/html5/thumbnails/16.jpg)
Link jQuery to SharePoint Demo
![Page 18: jQuery Rescue Adventure](https://reader034.vdocuments.us/reader034/viewer/2022042700/5558bd8dd8b42a7e298b51a1/html5/thumbnails/18.jpg)
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)
![Page 19: jQuery Rescue Adventure](https://reader034.vdocuments.us/reader034/viewer/2022042700/5558bd8dd8b42a7e298b51a1/html5/thumbnails/19.jpg)
Attribute SelectorsDescription 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”]
![Page 20: jQuery Rescue Adventure](https://reader034.vdocuments.us/reader034/viewer/2022042700/5558bd8dd8b42a7e298b51a1/html5/thumbnails/20.jpg)
Basic and Child FiltersDescription 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
![Page 21: jQuery Rescue Adventure](https://reader034.vdocuments.us/reader034/viewer/2022042700/5558bd8dd8b42a7e298b51a1/html5/thumbnails/21.jpg)
Additional SelectorsDescription Selector
Contains Content (case-sensitive) :contains()
Empty Element :empty
Has An Element :has()
Parent Elements :parent
![Page 22: jQuery Rescue Adventure](https://reader034.vdocuments.us/reader034/viewer/2022042700/5558bd8dd8b42a7e298b51a1/html5/thumbnails/22.jpg)
Selector ExamplesFind 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’]”)
![Page 23: jQuery Rescue Adventure](https://reader034.vdocuments.us/reader034/viewer/2022042700/5558bd8dd8b42a7e298b51a1/html5/thumbnails/23.jpg)
ManipulationDescription 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()
![Page 24: jQuery Rescue Adventure](https://reader034.vdocuments.us/reader034/viewer/2022042700/5558bd8dd8b42a7e298b51a1/html5/thumbnails/24.jpg)
Manipulation ExamplesSet 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”});
![Page 25: jQuery Rescue Adventure](https://reader034.vdocuments.us/reader034/viewer/2022042700/5558bd8dd8b42a7e298b51a1/html5/thumbnails/25.jpg)
TraversalDescription 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()
![Page 26: jQuery Rescue Adventure](https://reader034.vdocuments.us/reader034/viewer/2022042700/5558bd8dd8b42a7e298b51a1/html5/thumbnails/26.jpg)
Traversal ExamplesCount 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");
![Page 27: jQuery Rescue Adventure](https://reader034.vdocuments.us/reader034/viewer/2022042700/5558bd8dd8b42a7e298b51a1/html5/thumbnails/27.jpg)
EventsDescription Method
Generic Bind .bind(“method”, function() { })
Bind Event Once .one(“method”, function() { })
Bind Shortcuts .click(), .change(), .select(), .mouseover(),
.mouseout(), .blur()
Hover (Mouseover and Mouseout) .hover(function() { }, function() { })
Trigger Event .trigger(“method”)
![Page 28: jQuery Rescue Adventure](https://reader034.vdocuments.us/reader034/viewer/2022042700/5558bd8dd8b42a7e298b51a1/html5/thumbnails/28.jpg)
Event Examples
Click Event On Paragraphs
$(“p”).click(function(event) { $(this).css(“background”, “yellow”) });
Hover Events
$(“p”).hover(
function(event) { $(this).addClass(“Highlight”); },
function(event) { $(this).removeClass(“Highlight”); }
);
![Page 29: jQuery Rescue Adventure](https://reader034.vdocuments.us/reader034/viewer/2022042700/5558bd8dd8b42a7e298b51a1/html5/thumbnails/29.jpg)
Developer Tools
Browser Description
Chrome Built-In Developer Tools (F12)
Firefox Firebug (Separate Add-On)
Internet Explorer Built-In Developer Tools (F12)
![Page 30: jQuery Rescue Adventure](https://reader034.vdocuments.us/reader034/viewer/2022042700/5558bd8dd8b42a7e298b51a1/html5/thumbnails/30.jpg)
Console Demo
![Page 31: jQuery Rescue Adventure](https://reader034.vdocuments.us/reader034/viewer/2022042700/5558bd8dd8b42a7e298b51a1/html5/thumbnails/31.jpg)
jQuery in Action
• Show / Hide Animations with Content Query
• Link Behaviors
• SharePoint Page Manipulation
• Announcements Slideshow
![Page 32: jQuery Rescue Adventure](https://reader034.vdocuments.us/reader034/viewer/2022042700/5558bd8dd8b42a7e298b51a1/html5/thumbnails/32.jpg)
jQuery in Action Demo
![Page 33: jQuery Rescue Adventure](https://reader034.vdocuments.us/reader034/viewer/2022042700/5558bd8dd8b42a7e298b51a1/html5/thumbnails/33.jpg)
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
![Page 34: jQuery Rescue Adventure](https://reader034.vdocuments.us/reader034/viewer/2022042700/5558bd8dd8b42a7e298b51a1/html5/thumbnails/34.jpg)
Please Thank Our Sponsors