Embed Size (px)
Citation preview
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
