These slides are from my session at SharePointFest Denver on 25 June 2012.
If you've been meaning to learn jQuery but haven't found the time, come to this introductory session where we'll cover all of the important basics of jQuery in a SharePoint context. By the end of the workshop, you'll be ready to start adding jQuery customizations to your SharePoint pages.
We'll cover Selectors, Traversing, Manipulation, Events and Effects as I cover in my article series at SharePoint Magazine.
4. Getting Started
• Add references to the jQuery library
– Master page
– Page layout
– Individual aspx pages
5. Referencing Script Libraries from CDNs
<!-- Reference the jQueryUI theme's stylesheet on the Google
CDN. Here we're using the "start" theme -->
<link type="text/css" rel="stylesheet"
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/theme
s/start/jquery-ui.css" />
<!-- Reference jQuery on the Google CDN -->
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.mi
n.js"></script>
<!-- Reference jQueryUI on the Google CDN -->
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery
-ui.min.js"></script>
<!-- Reference SPServices on cdnjs (Cloudflare) -->
<script type="text/javascript"
src="http://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/0.7
.1a/jquery.SPServices-0.7.1a.min.js"></script>
More: http://sympmarc.com/2012/04/20/referencing-jquery-jqueryui-and-spservices-from-cdns/
6. SharePoint Web Technology
• HTML
– Hypertext Markup Language
– Content and structure
• CSS
– Cascading Style Sheets
– Presentation and style
• JavaScript and jQuery
– Interactive behavior
7. HTML Elements
Opening tag Closing tag
Powered by <a href="http://office365.com">Office365</a>.
Attribute Value
9. Intro to CSS:
Why does CSS matter?
• CSS = Cascading Style Sheets
• jQuery uses selectors that are very similar
to CSS selectors
• CSS is the fundamental styling
mechanism for the Web
• HTML + CSS + jQuery = AWESOME
17. My CSS "Best" Practices
• Use truly unique class and id names
• Choose a prefix for your project, e.g. „xyz-‟
or „x51-‟
• All of your classes and ids will be easy to
select:
xyz-home-page-article
x51-top-section
• Don‟t be afraid of verbose class and ID
names!
19. What is the Document Object Model
(DOM)?
• The DOM starts as the page‟s markup
(HTML) as delivered to the browser by the
server: View Source
• Styled by the CSS which gives the page
its the look and feel
• The DOM is acted upon by any script in
the page
20. What Can We Do With the DOM?
• Add or remove CSS classes
• Create new HTML elements
• Remove HTML elements
• Change HTML element attributes
• And so much more
The DOM is HTML, which is
XML, which is data!
22. Internet Explorer Developer Tools (F12)
• Shows the Internet Explorer view of
SharePoint‟s pages – some pages are
rendered differently in other browsers
23. The Firebug Add-On for Firefox
• Better for debugging and looking at Net
traffic
27. jQuery Documentation: Your Friend
• The jQuery documentation is
arranged to help you
• What you need to know is
arranged sequentially from
top to bottom
29. jQuery Selectors
• Selectors are the most important jQuery
concept
• Selecting the right DOM object(s) is half
the battle
• Selectors return a collection of DOM
objects – 1 to n matching elements
31. jQuery Element Selectors
<p>Paragraph 1 of text.</p>
<p>Paragraph 2 of text.</p>
var allParagraphs = $("p");
allParagraphs is now defined as a jQuery object
which contains pointers to all paragraphs in the page
37. Selectors for SharePoint
<DIV class=ms-quicklaunchheader>
<A accessKey=3
id=ctl00_PlaceHolderLeftNavBar_idNavLinkViewAll
href="/Intranet/JQueryLib/_layouts/viewlsts.aspx">
View All Site Content
</A>
</DIV>
$("div.ms-quicklaunchheader")
38. Selectors for SharePoint
<DIV class=ms-quicklaunchheader>
<A accessKey=3
id=ctl00_PlaceHolderLeftNavBar_idNavLinkViewAll
href="/Intranet/JQueryLib/_layouts/viewlsts.aspx">
View All Site Content
</A>
</DIV>
$("#ctl00_PlaceHolderLeftNavBar_idNavLinkViewAll")
39. Selectors for SharePoint
<DIV class=ms-quicklaunchheader>
<A accessKey=3
id=ctl00_PlaceHolderLeftNavBar_idNavLinkViewAll
href="/Intranet/JQueryLib/_layouts/viewlsts.aspx">
View All Site Content
</A>
</DIV>
$("a[id$='NavLinkViewAll']")
40. Useful jQuery Selector Tricks
• .NET Applications like SharePoint generate some long
and ugly markup and IDs
• These selector tricks really help
$("[id='foo']"); // Equal to
$("[id!='foo']"); // Not equal to
$("[id^='foo']"); // Starts with
$("[id$='foo']"); // Ends with
$("[id*='foo']"); // Contains
$("[id~='foo']"); // Contains word
$("[id|='foo']"); // Contains prefix
$("[id]"); // Has
$("[id][class][style]"); // Has all
42. jQuery Attributes
• Once you‟ve selected the right DOM
element, you can use jQuery to get or set
its attributes
• As of jQuery 1.6, the .prop() method
provides a way to explicitly retrieve
property values, while .attr() retrieves
attributes
43. jQuery Attributes: Get and Set
<div id="helloDiv" class="ms-bold">
Hello, world!
</div>
GET: var thisClass = $("#helloDiv").attr("class");
SET: $("#helloDiv").attr("class", "ms-hidden");
44. Example with SharePoint Attributes: Get
<DIV class=ms-quicklaunchheader>
<A accessKey=3
id=ctl00_PlaceHolderLeftNavBar_idNavLinkViewAll
href="/Intranet/JQueryLib/_layouts/viewlsts.aspx">
View All Site Content
</A>
</DIV>
var thisKey = $("a[id$='NavLinkViewAll']").attr("accessKey");
45. Example with SharePoint Attributes: Set
<DIV class=ms-quicklaunchheader>
<A accessKey=99
id=ctl00_PlaceHolderLeftNavBar_idNavLinkViewAll
href="/Intranet/JQueryLib/_layouts/viewlsts.aspx">
View All Site Content
</A>
</DIV>
$("a[id$='NavLinkViewAll']").attr("accessKey", 99);
47. Traversing
• Traversing lets you move around the DOM
based on your initial selection
• This is how you get at elements which are
difficult to select directly
• Ancestry matters in XML / HTML
49. Traversing Down:
Find an Element’s Specific Children
<DIV class=ms-quicklaunchheader>
<A accessKey=3
id=ctl00_PlaceHolderLeftNavBar_idNavLinkViewAll
href="/Intranet/JQueryLib/_layouts/viewlsts.aspx">
View All Site Content
</A>
</DIV>
$("div.ms-quicklaunchheader").find("a");
50. Traversing Down:
Find an Element’s Specific Children
<DIV class=ms-quicklaunchheader>
<A accessKey=3
id=ctl00_PlaceHolderLeftNavBar_idNavLinkViewAll
href="/Intranet/JQueryLib/_layouts/viewlsts.aspx">
View All Site Content
</A>
</DIV>
$("div.ms-quicklaunchheader").find("a");
51. SharePoint Example of Traversing:
Initial Selector
<DIV class=ms-quicklaunchheader>
<A accessKey=3
id=ctl00_PlaceHolderLeftNavBar_idNavLinkViewAll
href="/Intranet/JQueryLib/_layouts/viewlsts.aspx">
View All Site Content
</A>
</DIV>
$("a[id$='NavLinkViewAll']").parent();
52. SharePoint Example of Traversing:
Finding Parent
<DIV class=ms-quicklaunchheader>
<A accessKey=3
id=ctl00_PlaceHolderLeftNavBar_idNavLinkViewAll
href="/Intranet/JQueryLib/_layouts/viewlsts.aspx">
View All Site Content
</A>
</DIV>
$("a[id$='NavLinkViewAll']").parent();
59. Manipulation:
Inserting Elements
<div id="helloDiv" class="ms-bold">
Hello, world!
</div>
$("#helloDiv")
.before("<div>This is a new div.</div>");
<div>This is a new div.</div>
<div id="helloDiv" class="ms-bold">
Hello, world!
</div>
62. Events
• jQuery‟s events enable you to work with all
of the standard JavaScript events
• These methods are used to register
behaviors to take effect when the user
interacts with the browser, and to further
manipulate those registered behaviors.
64. jQuery Events
$("h3.ms-WPTitle").click(function() {
alert("You'll now be taken directly to the list.");
});
$("h3.ms-WPTitle").mouseover(function() {
$("#helloDiv").css("background-color", "fuchsia");
});
66. Effects
• jQuery gives you a set of effects you can
use to change the elements in the page
• Effects can be:
– Visual: Change how the user sees existing
elements with animations
– Manipulative: Change where and how
elements are shown by moving them around
in the DOM
68. Putting It Together: Example
• This example changes what happens when
you click on a Web Part Title.
// Remove the links on the Web Part Titles
$("h3.ms-WPTitle").find("nobr").unwrap("<a></a>");
// Add click behavior that toggles the visibility
// of the Web Part
$("h3.ms-WPTitle").click(function() {
$(this).closest("table").closest("tr").next().toggle();
});
69. Putting It Together: Example
• This example shows part of SPArrangeChoices from
SPServices.
// Collect all of the choices
$(thisFormField).find("tr").each(function() {
columnOptions.push($(this).html());
});
out = "<TR>";
// Add all of the options to the out string
for(i=0; i < columnOptions.length; i++) {
out += columnOptions[i];
// If we've already got perRow columnOptions in the row, close off the row
if((i+1) % opt.perRow === 0) {
out += "</TR><TR>";
}
}
out += "</TR>";
// Remove the existing rows...
$(thisFormField).find("tr").remove();
// ...and append the out string
$(thisFormField).find("table").append(out);
70. jQueryUI Takes Effects Further
$('.article').tabs();
$('input').autocomplete();
$('#infoBox').dialog();
…and many more
71. jQuery Plugins Abound!
• If you want to do something sophisticated,
look for an existing plugin
• Do some due diligence – some of the
plugins aren‟t written very well
• Beware of “plugin sprawl”
72. More Useful Tools
• JavaScript Compressorator – Minifies
script files using multiple methods
http://compressorrater.thruhere.net/
• JSLint – Checks your script against
accepted standards http://jslint.com/
“Warning: JSLint will hurt your feelings.”
73. Contact Information
eMail marc.anderson@sympraxisconsulting.com
Blog http://sympmarc.com
SPServices http://spservices.codeplex.com
SPXSLT http://spxslt.codeplex.com
USPJA Academy http://uspja.com
eBook http://bit.ly/UnlockingDVWP
The Middle Tier Manifesto http://bit.ly/middletier