These are the slides from my two sessions at the SharePoint and Exchange Forum 2012 (SEF12 - http://seforum.se) in Stockholm, Sweden on October 23, 2012.
A jQuery Primer for SharePoint: Overview, jQuery and CSS, and Selectors
Developer, level 200
jQuery is a JavaScript framework that allows you to develop great client side solutions. If you've been meaning to learn jQuery but haven't found the time, come to this introductory session where we'll cover some of the important basics of jQuery in a SharePoint context. Understanding how jQuery relates to CSS and JavaScript is an important hurdle in the learning curve. Selectors are the key concept you need to understand to be able to work with SharePoint’s pages. By the end of this session, you'll understand what jQuery is and how to start adding it to your SharePoint solutions.
A jQuery Primer for SharePoint: Attributes, Traversing, Manipulation, Events, and Effects
Developer, level 200
Once you know how to start working with jQuery, you’ll want to be able to change what happens in the page by querying existing elements and adding new behaviors. In this session, we’ll look at Attributes, Traversing, Manipulation, Events, and Effects. This will get you to the point where you can roll up your sleeves and start creating solutions. We’ll also look at using plugins like SPServices to make your work easier.
Both sessions are based on my articles 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/themes/s
tart/jquery-ui.css" />
<!-- Reference jQuery on the Google CDN -->
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.j
s"></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.2/
jquery.SPServices-0.7.2.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 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 the
DOM in SharePoint’s pages – some pages
and controls 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 – 0 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 of the paragraphs in the page
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
41. A jQuery Primer for SharePoint: Attributes, Traversing, Manipulation,
Events, and Effects
NEXT SESSION AT 12:50
43. 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
44. 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");
45. Example with SharePoint
Attributes: Get
<DIV
id=ctl00_PlaceHolderLeftNavBar_QuickLaunchNavigatio
nManager class=ms-quicklaunch-navmgr>
<DIV>
<DIV id=zz18_V4QuickLaunchMenu class=s4-ql>
<DIV class="menu vertical menu-vertical">
<UL class="root static">
<LI class=static>
<A class="static menu-item"
href="/sitename/_layouts/viewlsts.aspx?BaseType=1">
var thisHref = $(".ms-quicklaunch-navmgr a.static.menu-item:first")
.attr("href");
48. 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
58. Manipulation
• Once you’ve gotten the right
element(s), you can:
– Manipulate their attributes or
properties
– Change their contents
– Move them in the DOM
59. Manipulation:
Adding Text
<div id="helloDiv" class="ms-bold">
Hello, world!
</div>
$("#helloDiv").append(" And you're welcome to it!");
<div id="helloDiv" class="ms-bold">
Hello, world! And you're welcome to it!
</div>
65. 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.
67. jQuery Events for Web Part Titles
$("h3.ms-WPTitle").click(function() {
alert("Go directly to the list!");
});
$("h3.ms-WPTitle").mouseover(function() {
$(this).css("background-color", "fuchsia");
});
69. 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
71. Putting It Together: Example
Change 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();
});
72. 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);
73. jQueryUI Takes Effects Further
$('.article').tabs();
$('input').autocomplete();
$('#infoBox').dialog();
…and many more
74. jQuery Plugins Abound!
• If you want to do something
sophisticated, look for an existing
plugin
• Due diligence is up to you– some of
the plugins aren’t written very well
• Beware of "plugin sprawl"
75. 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."
76. Contact Information
eMail marc.anderson@sympraxisconsulting.com
Blog http://sympmarc.com
SPServices http://spservices.codeplex.com
SPXSLT http://spxslt.codeplex.com
eBook http://bit.ly/UnlockingDVWP
The Middle Tier Manifesto http://bit.ly/middletier