SharePoint Solutions with SPServices jQuery in SharePoint 2010... · Referencing jQuery, jQueryUI, and SPServices from CDNs –Revisited ... •.NET Applications like SharePoint generate

is

Referencing jQuery, jQueryUI, and SPServices from CDNs – Revisited

http://sympmarc.com/2013/02/07/referencing-jquery-jqueryui-and-spservices-from-cdns-revisited/

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

Opening tag Closing tag

Attribute Value

.article {color: red;

}

Select HTML element(s)

Modify them!

<p>

Paragraph of text.

</p>

p {

color: red;

}

Paragraph of text.

<div class="article">

This is an article.

</div>

.article {

color: red;

}

This is an article.

<div id="header">

This is a header.

</div>

#header {

color: red;

}

This is a header.

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

</h1></div>

#header h1 {

color: red;

}

This is a header.

<div id="header">

<ul class="top-nav">

<li>Item 1</li>

<li>Item 2</li>

<li>Item 3</li>

</ul>

</div>

#header ul.top-nav li {

color: red;

}

• Item 1

• Item 2

• Item 3

<ul class="top-nav"><li>Item 1</li><li class="has-submenu">

Item 2<ul class="menu">

<li>Menu 1</li></ul>

</li></ul>

ul.top-nav li.has-submenu li {

color: red;}

• Item 1

• Item 2

• Menu 1

unique

xyz-x51-

xyz-

x51-

The DOM is HTML, which is XML, which is data!

Internet Explorer Developer Tools

Firefox with Firebug

$('.article').hide();

Select something

Do something!

$(document).ready(function() {

// do something

});

$(function() {

// do something

});

jQuery(function($) {

// do something

});

jQuery API Documentation

Finding DOM Elements

electin

collection

$("p")

<p>

Paragraph of text.

</p>

var allParagraphs = $("p");

<p>Paragraph 1 of text.</p><p>Paragraph 2 of text.</p>

allParagraphs is now defined as a jQuery object

which contains pointers to all paragraphs in the page

$(".article")

<div class="article">This is an article.

</div>

$("#header")

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

</div>

$("#header h1")

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

</h1></div>

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

<div id="header"><ul class="top-nav">

<li>Item 1</li><li>Item 2</li><li>Item 3</li>

</ul></div>

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

<ul class="top-nav"><li>Item 1</li><li>

Item 2<ul class="menu">

<li>Menu 1</li></ul>

</li></ul>

$("ul.s4-specialNavLinkList li:first")

$("div.ms-socialNotif-Container")

$("[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

• .NET Applications like SharePoint generate some

long and ugly markup and IDsctl00_PlaceHolderLeftNavBar_PlaceHolderQuickLaunchBottom_PlaceHolderQuickLaunchBottomV4_idNavLinkRecycleBin

•These selector tricks really help

Set or get element attributes

GET: var thisSrc = $("#helloImg").attr("src");

SET: $("#helloSrc").attr("src", "/images/2.png");

<img id="helloImg" src="/images/1.png">

$("div.ms-socialNotif-Container a:first img")

.attr("src");

$("div.ms-socialNotif-Container a:first img")

.attr("src", "/_layouts/images/plus.gif");

Traverse to act upon related elements

<div id="helloDiv" class="ms-bold"><ul>

<li>Item 1</li> <li>Item 2</li> <li>Item 3</li>

</ul></div>

$(“#helloDiv").find("li");

<div id="helloDiv" class="ms-bold"><ul>

<li class="first-li">Item 1</li> <li>Item 2</li> <li>Item 3</li>

</ul></div>

$("ul").parent();

$("li.first-li").closest("div");

$("div.ms-quickLaunch ul.root ul.static")

.find("a.menu-item")

$(".ms-vh2").closest("table")

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

SelectCandidate SelectResult

<select name="ctl00$m$g_e845e690_00da_428f_afbd_fbe804787763$ctl00$ctl04$ctl07$ctl00$ctl00$ctl04$ctl00$ctl00$SelectResult" title=“Food selected values" id="ctl00_m_g_e845e690_00da_428f_afbd_fbe804787763_ctl00_ctl04_ctl07_ctl00_ctl00_ctl04_ctl00_ctl00_SelectResult" style="width: 162px;" onkeydown="GipHandleHScroll(event)" ondblclick="GipRemoveSelectedItems(ctl00_m_g_e845e690_00da_428f_afbd_fbe804787763_ctl00_ctl04_ctl07_ctl00_ctl00_ctl04_ctl00_ctl00_MultiLookupPicker_m); return false" onchange="GipSelectResultItems(ctl00_m_g_e845e690_00da_428f_afbd_fbe804787763_ctl00_ctl04_ctl07_ctl00_ctl00_ctl04_ctl00_ctl00_MultiLookupPicker_m);" size="20" multiple="">

<select name="ctl00$m$g_e845e690_00da_428f_afbd_fbe804787763$ctl00$ctl04$ctl07$ctl00$ctl00$ctl04$ctl00$ctl00$SelectCandidate" title=“Food possible values" id="ctl00_m_g_e845e690_00da_428f_afbd_fbe804787763_ctl00_ctl04_ctl07_ctl00_ctl00_ctl04_ctl00_ctl00_SelectCandidate" style="width: 162px;" onkeydown="GipHandleHScroll(event)" ondblclick="GipAddSelectedItems(ctl00_m_g_e845e690_00da_428f_afbd_fbe804787763_ctl00_ctl04_ctl07_ctl00_ctl00_ctl04_ctl00_ctl00_MultiLookupPicker_m); return false" onchange="GipSelectCandidateItems(ctl00_m_g_e845e690_00da_428f_afbd_fbe804787763_ctl00_ctl04_ctl07_ctl00_ctl00_ctl04_ctl00_ctl00_MultiLookupPicker_m);" size="350" multiple="">

Manipulate elements to change their behavior, look, or structure

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

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

</div>

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

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

</div>

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

</div>

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

<a href="http://cnn.com"><div id="helloDiv" class="ms-bold">

Hello, world! </div>

</a>

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

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

</div>

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

$("#helloDiv").css({border: "1px black solid",color: "red"

});

Bind to DOM events to add behavior and functionality

$('.article').click(function(){

// do something

});

$('.article').mouseover(function(){

// do something

});

$("h3.ms-WPTitle").click(function() {

alert(“Go directly to the list.");

});

$("h3.ms-WPTitle").hover(function() {

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

},function() {

$(this).css("background-color", "blue");

});

Use jQuery effects to add pizazz

$('.article').hide();

$('.article').slideUp();

$('.article').after('<em>Hello!</em>');

$('.article').css('color', 'red');

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

// Collect all of the choices$(thisFormField).find("tr").each(function() {

columnOptions.push($(this).html());});out = "<TR>";

// Add all of the options to the out stringfor(i=0; i < columnOptions.length; i++) {

out += columnOptions[i];// If we've already got perRow columnOptions in the row, close off the rowif((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);

$('.article').tabs();

$('input').autocomplete();

$('#infoBox').dialog();

http://compressorrater.thruhere.net/

http://jslint.com/

http://jshint.com/

eMail [email protected]

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