jQuery Rescue AdventureINTRODUCTION TO JQUERY INSIDE SHAREPOINT

Developer Track

Matt Jimison

About Me

Name

Location

Work

Blog

Twitter

Matt Jimison

Indianapolis, IN

http://www.mattjimison.com/blog/

@mjimison

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

What is

jQuery is a new kind of JavaScript Library.

jQuery Overview

• HTML Document Traversing

• Event Handling

• Animation

• AJAX

• Lightweight Footprint (~31KB)

• CSS3 Compliant (Supports Selectors)

• Cross-Browser (IE, Firefox, Safari, Opera, Chrome)

• 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 | SharePoint Saturday Columbus 2011

• Touch-Optimized for Tablets and Smart Phones

• Supports Multiple Devices

• HTML5-based Interface

• jQuery / jQueryUI Foundation

• Lightweight

jQuery and Microsoft

• Microsoft contributes to the jQuery Project

• Microsoft Product Support includes jQuery

• jQuery ships with Visual Studio 2010+

• Visual Studio Intellisense Support

Intellisense Demo

Downloading jQuery

• Local Copy◦ Download from http://jquery.com/◦ Current and Past Releases

• CDN (Content Delivery Network)◦ Google◦ Microsoft◦ jQuery

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

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

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()

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

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

Link jQuery to SharePoint Demo

jQuery API Browser

Available Online:

http://api.jquery.com/browser/

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)

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”]

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

Additional SelectorsDescription Selector

Contains Content (case-sensitive) :contains()

Empty Element :empty

Has An Element :has()

Parent Elements :parent

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’]”)

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()

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”});

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()

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");

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”)

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”); }

);

Developer Tools

Browser Description

Chrome Built-In Developer Tools (F12)

Firefox Firebug (Separate Add-On)

Internet Explorer Built-In Developer Tools (F12)

Console Demo

jQuery in Action

• Show / Hide Animations with Content Query

• Link Behaviors

• SharePoint Page Manipulation

• Announcements Slideshow

jQuery in Action Demo

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

Please Thank Our Sponsors