SEF 2012 - A jQuery Primer for Sharepoint

A jQuery Primer for
SharePoint

Marc D Anderson
Co-Founder & President
Sympraxis Consulting LLC
marc.anderson@sympraxisconsulting.com

Getting Started
• Add references to the jQuery library
– Master page
– Page layout
– Individual aspx pages

Referencing Script Libraries
from CDNs

<link type="text/css" rel="stylesheet"
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/s
tart/jquery-ui.css" />

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.j
s"></script>

src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-
ui.min.js"></script>

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/

SharePoint Web Technology
• HTML
– Hypertext Markup Language
– Content and structure

• CSS
– Cascading Style Sheets
– Presentation and style

• JavaScript and jQuery
– Interactive behavior

HTML Elements

Opening tag Closing tag

Powered by <a href="http://office365.com">Office365</a>.

Attribute Value

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

CSS Styles

Select HTML element(s) .article {
Modify them! color: red;
}

CSS Element Selectors

p { <p>
color: red; Paragraph of text.
} </p>

Paragraph of text.

CSS Class Selectors

.article { <div class="article">
color: red; This is an article.
} </div>

This is an article.

CSS ID Selectors

#header { <div id="header">
color: red; This is a header.
} </div>

This is a header.

CSS Descendant Selectors

#header h1 { <div id="header">
<h1>
color: red;
This is a header.
} </h1>
</div>

This is a header.

CSS Composite Selectors
<div id="header">
<ul class="top-nav">
<li>Item 1</li>
#header ul.top-nav li { <li>Item 2</li>
color: red; <li>Item 3</li>
} </ul>
</div>

• Item 1
• Item 2
• Item 3

CSS Complex Selectors
<li>Item 1</li>
<li>
ul.top-nav > li { Item 2
color: red; <ul class="menu">
<li>Menu 1</li>
} </ul>
</li>
</ul>

• Item 1
• Item 2
• Menu 1

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!

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

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!

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

The Firebug Add-On for Firefox
• Better for debugging and looking at
Net traffic

The Basic Idea of jQuery

Select something

$('.article').hide();
Do something!

jQuery’s Document Ready
$(document).ready(function({
// do something
});

• Processing is suspended until the
page’s DOM is fully loaded
• Ensures that all of the elements you
need are available

jQuery Documentation: Your
Friend

• The jQuery
documentation is
arranged to help you
• What you need to
know is arranged
sequentially from top
to bottom

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

jQuery Element Selectors

<p>
Paragraph of text.
</p>

$("p")

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

jQuery Class Selectors
<div class="article">
This is an article.
</div>

$(".article")

jQuery ID Selectors

<div id="header">
This is a header.
</div>

$("#header")

jQuery Descendant Selectors
<div id="header">
<h1>
This is a header.
</h1>
</div>

$("#header h1")

jQuery Composite Selectors
<div id="header">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>

$("#header ul.top-nav li")

jQuery Complex Selectors
<div id="header">
<li>Item 1</li>
<li>
Item 2
<ul class="menu">
<li>Menu 1</li>
</ul>
</li>
</ul>
</div>

$("#header ul.top-nav ul.menu li")

Selectors for SharePoint
<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">

$("div.ms-quicklaunch-navmgr")

<DIV
<DIV>
<LI class=static>

$("#ctl00_PlaceHolderLeftNavBar_QuickLaunchNavigationManager")

<DIV
<DIV>
<LI class=static>

$(".ms-quicklaunch-navmgr a.static.menu-item")

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

A jQuery Primer for SharePoint: Attributes, Traversing, Manipulation,
Events, and Effects

NEXT SESSION AT 12:50

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

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

Example with SharePoint
Attributes: Get
<DIV
<DIV>
<LI class=static>

var thisHref = $(".ms-quicklaunch-navmgr a.static.menu-item:first")
.attr("href");

Example with SharePoint
Attributes: Set
<DIV
<DIV>
<LI class=static>
href="/sitename/mypage.aspx">

$(".ms-quicklaunch-navmgr a.static.menu-item:first")
.attr("href", "/sitename/mypage.aspx");

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

Find an Element’s Ancestors
<div id="helloDiv" class="ms-bold">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>

= $("ul").parent();
$("ul").closest("div");

Traversing Down:
Initial Selector
<DIV class=ms-quicklaunchheader>
<A accessKey=3
id=ctl00_PlaceHolderLeftNavBar_idNavLinkVi
ewAll
href="/Intranet/JQueryLib/_layouts/viewlst
s.aspx">
View All Site Content
</A>
</DIV>

$("div.ms-quicklaunchheader").find("a");

Traversing Down:
Finding Specific Children
<A accessKey=3
ewAll
s.aspx">
</A>
</DIV>

$("div.ms-quicklaunchheader").find("a");

Traversing Up:
Initial Selector
<A accessKey=3
ewAll
s.aspx">
</A>
</DIV>

$("a[id$='NavLinkViewAll']").parent();

Traversing Up:
Finding Specific Ancestors
<A accessKey=3
ewAll
s.aspx">
</A>
</DIV>

$("a[id$='NavLinkViewAll']").parent();

Traversal Example from
SPServices

SPServices

<select <select
name="ctl00$m$g_e845e690_00da_428f_afbd_fbe80 name="ctl00$m$g_e845e690_00da_428f_afbd_fbe8047
4787763$ctl00$ctl04$ctl07$ctl00$ctl00$ctl04$c 87763$ctl00$ctl04$ctl07$ctl00$ctl00$ctl04$ctl00
tl00$ctl00$SelectCandidate" title="City $ctl00$SelectResult" title="City selected
possible values" values"
id="ctl00_m_g_e845e690_00da_428f_afbd_fbe8047 id="ctl00_m_g_e845e690_00da_428f_afbd_fbe804787
87763_ctl00_ctl04_ctl07_ctl00_ctl00_ctl04_ctl 763_ctl00_ctl04_ctl07_ctl00_ctl00_ctl04_ctl00_c
00_ctl00_SelectCandidate" style="width: tl00_SelectResult" style="width: 162px;"
162px;" onkeydown="GipHandleHScroll(event)" onkeydown="GipHandleHScroll(event)"
ondblclick="GipAddSelectedItems(ctl00_m_g_e84 ondblclick="GipRemoveSelectedItems(ctl00_m_g_e8
5e690_00da_428f_afbd_fbe804787763_ctl00_ctl04 45e690_00da_428f_afbd_fbe804787763_ctl00_ctl04_
_ctl07_ctl00_ctl00_ctl04_ctl00_ctl00_MultiLoo ctl07_ctl00_ctl00_ctl04_ctl00_ctl00_MultiLookup
kupPicker_m); return false" Picker_m); return false"
onchange="GipSelectCandidateItems(ctl00_m_g_e onchange="GipSelectResultItems(ctl00_m_g_e845e6
845e690_00da_428f_afbd_fbe804787763_ctl00_ctl 90_00da_428f_afbd_fbe804787763_ctl00_ctl04_ctl0
04_ctl07_ctl00_ctl00_ctl04_ctl00_ctl00_MultiL 7_ctl00_ctl00_ctl04_ctl00_ctl00_MultiLookupPick
ookupPicker_m);" size="350" multiple=""> er_m);" size="20" multiple="">

SPServices

SelectCandidate SelectResult

var possibleValues = $("select[ID$='SelectCandidate'][Title^='"
+ opt.multiSelectColumn + " ']");
var selectedValues =
possibleValues.closest("span").find("select[ID$='SelectResult']
[Title^='" + opt.multiSelectColumn + " ']");

Manipulation
• Once you’ve gotten the right
element(s), you can:
– Manipulate their attributes or
properties
– Change their contents
– Move them in the DOM

Manipulation:
Adding Text
Hello, world!
</div>

$("#helloDiv").append(" And you're welcome to it!");

Hello, world! And you're welcome to it!
</div>

Manipulation:
Adding CSS Classes
Hello, world!
</div>

$("#helloDiv").addClass("my-class");

<div id="helloDiv" class="ms-bold my-class">
Hello, world!
</div>

Manipulation:
Wrapping Elements
Hello, world!
</div>

$("#helloDiv")
.wrap("<a href='http://cnn.com'></a>");

<a href="http://cnn.com">
Hello, world!
</div>
</a>

Manipulation:
Inserting Elements
Hello, world!
</div>

$("#helloDiv")
.before("<div>In the beginning...</div>");

<div>In the beginning...</div>
Hello, world!
</div>

Manipulation:
Changing CSS
Hello, world!
</div>

$("#helloDiv")
.css("background-color", "fuchsia");

$("h3.ms-WPTitle a").css({
border: "5px black solid",
color: "red"
});

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.

jQuery Events

$('.article').click(function(){
// do something
});

$('.article').mouseover(function(){
// do something
});

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

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

jQuery Effects Examples

$('.article').hide();
$('.article').slideUp();
$('.article').after("<em>Hello!</em>");
$('.article').css("color", "red");

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

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

jQueryUI Takes Effects Further

$('.article').tabs();
$('input').autocomplete();
$('#infoBox').dialog();

…and many more

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"

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."

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

SEF 2012 - A jQuery Primer for Sharepoint

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Mehr von Marc D Anderson

Mehr von Marc D Anderson (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

SEF 2012 - A jQuery Primer for Sharepoint