Transcript jQuery & SharePoint

jQuery & SharePoint
San Antonio Users Group – September Meeting
September 22, 2009
Microsoft
SharePoint
Server
2
jQuery getting started
What is jQuery?
•
jQuery is a free, open source, lightweight JavaScript library that
emphasizes interaction between JavaScript & HTML.
•
jQuery simplifies how you traverse HTML documents, handle events,
perform animations, and add Ajax interactions to your web pages.
jQuery is designed to change the way that you write JavaScript.
* Microsoft plans to bundle jQuery with Framework 4
Where do I get it?
•
http://jquery.com/ (latest version now 1.3.2) 19k (I said lightweight)
•
You can use a live version from Google Code @
http://code.google.com/p/jqueryjs/ i.e.
<script type="text/javascript" language="javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js" />
©2009 Hitachi Consulting. Proprietary and Confidential.
3
Loading jQuery
• Download jQuery (or know where to include it from Google Code)
• Add the reference to the jQuery framework. 2 basic options:
1. Include jQuery in your project and added to the page with the
folowing mark-up:
<script type="text/javascript" language="javascript" src=“/include/js/jquery-1.3.2.min.js" />
2.
jQuery can also be loaded using the Google AJAX Libraries API with
the following mark-up:
<script type="text/javascript" language="javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" language=javascript>
google.load("jquery", "1.3.2");
</script>
3.
Add a direct link to the framework on Google Code
<script type="text/javascript" language="javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js" />
©2009 Hitachi Consulting. Proprietary and Confidential.
4
Using the Framework
•
The starting $, this is the alias to the jQuery namespace. Here is an
example of the most common function. It will wait until the document
is done loading before executing it’s functional script (here alert):
$(document).ready(function() {
alert('jQuery rulz!');
});
•
You can, and will have to mix regular JavaScript and jQuery:
$(document).ready(function() {
try {
if ($("a#lnkSignin").length > 0) {
if ($("a#lnkSignin[href*='?']").length > 0) {
$("#lnkSignin").attr('href', $("#lnkSignin").attr("href") + "&goto=" + window.location.href);
}
else {
$("#lnkSignin").attr('href', $("#lnkSignin").attr("href") + "?goto=" + window.location.href);
}
}
}
catch (e) { }
});
©2009 Hitachi Consulting. Proprietary and Confidential.
5
Functional jQuery
•
$("div.test").add("p.quote").addClass("blue").slideDown("slow");
...finds the union of all div tags with class attribute test and all p tags with CSS class attribute quote, adds the class attribute blue to each
matched element, and then slides them down with an animation. The $ and add functions affect the matched set, while the addClass and
slideDown affect the referenced nodes.
•
$.ajax({
type: "POST",
url: "some.aspx",
data: "name=Dave&location=SA",
success: function(msg) {
alert("Data Saved: " + msg);
}
});
... will request some.php from the server with parameters name=John and location=Boston and when the request is finished successfully, the
success function will be called to alert the user.
•
Functions; jQuery provides a varity of functions that can be used or “chained” in the query
statement, or used on independently.
var str = "
foo
";
jQuery.trim(str);
$.trim(str);
/* both return “foo” */
©2009 Hitachi Consulting. Proprietary and Confidential.
6
jQuery 1.3 Cheat Sheet
http://www.gmtaz.com/index.php/jquery-13-cheatsheet-wallpaper/
©2009 Hitachi Consulting. Proprietary and Confidential.
7
Integrating with SharePoint
• What do I need?
• The jQuery library
• SharePoint Designer (a free download now!)
• Ummmmmm, that’s it, ohh wait, you need a SharePoint instance ;-)
• What else? Some reccomended stuff
• IE8 has developer tools built in, or firebug in Firefox will make your
life easier when trying to inspect the HTML
•
jQuerify – checks to see if jQuery is loaded and loads it in the current
page
javascript: (function() {
document.body.appendChild(document.createElement('script')).src =
'http://jquery.com/src/jquery-latest.js'; })();
•
Selector gadget – point and click select items to build query
http://www.selectorgadget.com/
©2009 Hitachi Consulting. Proprietary and Confidential.
8
Now the easy part
•
Open up your site with the SharePoint designer. DO NOT modify the
original master page. Copy, Past rename and assign the copy as
your master page you could run into issue.
•
•
•
•
On you master page add the pointer to the jQuery file.
Add a JS file and link it to the master page.
Add JS to an HTML web-part
Various methods…. Let’s see a demo…
If only Bill Gates had a penny for every time we’ve seen the
SharePoint wheel, ohhh wait, he does!
©2009 Hitachi Consulting. Proprietary and Confidential.
9
Questions? Ask me!
Dave Cooper - Manager, Socialized Services
Hitachi Consulting
Microsoft National Portal & Collaboration Practice
Mobile: (720) 366-3274
Mail: [email protected]
MSN: [email protected]
Twitter: cooperfdiv
Quick Links:
• jQuery web-site: http://jquery.com/
• jQuery on Google Code: http://code.google.com/p/jqueryjs/
• jQuery docs: http://docs.jquery.com/Main_Page
• “See how I used Firebug to learn jQuery”:
http://encosia.com/2009/09/21/updated-see-how-i-used-firebug-to-learn-jquery/
• jQuery for absolute beginners Video Series:
http://blog.themeforest.net/screencasts/jquery-for-absolute-beginners-video-series/
• jQuery Library for SharePoint Web Services - http://spservices.codeplex.com/
• Heather Solomon’s Branding - http://www.heathersolomon.com/blog/ the best base master page on the planet!
*Next time, why Chuck Norris and SharePoint are alike!
©2009 Hitachi Consulting. Proprietary and Confidential.