jQuery Rescue Adventure
-
Upload
allegient -
Category
Technology
-
view
1.167 -
download
0
description
Transcript of jQuery Rescue Adventure
![Page 1: jQuery Rescue Adventure](https://reader034.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/reader034/viewer/2022042700/5558bd8dd8b42a7e298b51a1/html5/thumbnails/9.jpg)
Intellisense Demo
![Page 10: jQuery Rescue Adventure](https://reader034.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/reader034/viewer/2022042700/5558bd8dd8b42a7e298b51a1/html5/thumbnails/16.jpg)
Link jQuery to SharePoint Demo
![Page 18: jQuery Rescue Adventure](https://reader034.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/reader034/viewer/2022042700/5558bd8dd8b42a7e298b51a1/html5/thumbnails/30.jpg)
Console Demo
![Page 31: jQuery Rescue Adventure](https://reader034.fdocuments.in/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.fdocuments.in/reader034/viewer/2022042700/5558bd8dd8b42a7e298b51a1/html5/thumbnails/32.jpg)
jQuery in Action Demo
![Page 33: jQuery Rescue Adventure](https://reader034.fdocuments.in/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.fdocuments.in/reader034/viewer/2022042700/5558bd8dd8b42a7e298b51a1/html5/thumbnails/34.jpg)
Please Thank Our Sponsors