SharePoint Saturday Melbourne 2011

1. Sponsors
Gold
Silver
Bronze
SharePoint + jQuery
Chris O’Connor
OBS
[Blog]
www.sharepointroot.com
[Twitter]
@GrumpyWookie
[GamerTag]
WalkingCarpet

2. Melbourne 2011
SharePoint + jQuery
What is it ?
• What is jQuery ?
– For animation + effects
• JavaScript !
• Uses the language of the web
– HTML
– CSS
• Browser independent

3. Melbourne 2011
SharePoint + jQuery
How does it work ?
• Include JS file
– <SCRIPT> tag – within Master Page (for example)
• Reference using jQuery syntax
<script>
$(document).ready(
{
$('a').addClass('test');
});
</script>

4. Melbourne 2011
SharePoint + jQuery
How does it work ?
• Selectors
– DOM element
– By ID or Class or tag type
• $('#myDivId')
• $('.myCssClass')
• $('a')
• Attributes
– addClass()
– removeClass()

5. Melbourne 2011
SharePoint + jQuery
How does it work ?
<div id="announcements">
<div class="article">
<h1>Check out my blog !</h1>
<p>www.grumpywookie.com is an awesome blog<p>
</div>
</div>
$('#announcements').addClass('test');

6. Melbourne 2011
SharePoint + jQuery
How does it work ?
<div id="announcements">
<div class="article">
<h1>Check out my blog !</h1>
<p>www.grumpywookie.com is an awesome blog<p>
</div>
</div>
$('.article').addClass('test');

7. Melbourne 2011
SharePoint + jQuery
How does it work ?
<div id="announcements">
<div class="article">
<h1>Check out my blog !</h1>
<p>www.grumpywookie.com is an awesome blog</p>
</div>
</div>
$('p').addClass('test');

8. Melbourne 2011
SharePoint + jQuery
How does it work ?
• Events
– click()
– hocus()
– hover()
• Effects
– animate()
– fadeIn()
– accordian()

9. Melbourne 2011
SharePoint + jQuery
How does it work ?
<script>
$('#right').click(function()
{
$('.block').animate(
{
'left': '+=50px'
},
'slow');
});
</script>

10. Melbourne 2011
SharePoint + jQuery
How to get it ?
• Download from http://jquery.com/
– Minified : jquery-1.6.2.min.js (31 kB)
– Development / Debug : jquery-1.6.2.js (229 kB)
• Plug-ins – much less code needed
– jQuery UI – additional functions
– jQuery Cycle
– SharePoint Web Services

11. Melbourne 2011
SharePoint + jQuery
How to include it ?
• SharePoint Site – upload JS file
– Eg. Site Assets library
• Include in Master Page
<script type="text/javascript"
src="/SiteAssets/jquery-1.6.2.min.js" />

12. Melbourne 2011
SHOW ME THE DEMO !
SharePoint + jQuery

13. Melbourne 2011
SharePoint + jQuery
Demos
• List View Web Part
– News Accordian
– Image Rotator
– News Rotator
• Custom XSLT
– HTML
– CSS
– Animate with jQuery -> jQuery UI plug-in

14. Melbourne 2011
SharePoint + jQuery
Quick re-cap
• Upload jQuery files – JavaScript (JS)
• Create new Master Page – with <SCRIPT> reference
• Add List View Web Part
• Change XSLT – to desired HTML structure (DOM)
• Apply jQuery syntax -> animation
• Apply CSS
P.S. It’s just HTML + JavaScript + CSS !!

15. Melbourne 2011
QUESTION AND ANSWER
SharePoint + jQuery

16. Melbourne 2011
Related Links
• http://www.jQuery.com
Examples, tutorials, demos, downloads
• http://www.sharepointroot.com
Slides, demos
• mailto:chris.oconnor@obs.com.au
• http://www.grumpywookie.com
Or say hello via Twitter : @GrumpyWookie

17. Thanks for listening!
Remember to submit your feedback so
you can go into the raffle draw at the
end of the day! And don’t forget that
you have to be at the draw to claim your
prizes!
Sponsors
Gold
Silver
Bronze