2011 - SharePoint + jQuery

Melbourne 2011

@GrumpyWookieChris O’Connor [ OBS ]

www.sharepointroot.com

SHAREPOINT + JQUERY

(c) 2011 Microsoft. All rights reserved.

#FunkyWookie

Melbourne 2011

SharePoint + jQueryWhat is it ?

What is jQuery ?For animation + effects

JavaScript !

Uses the language of the webHTMLCSS

Browser independent


Melbourne 2011

SharePoint + jQueryHow does it work ?

Include JS file<SCRIPT> tag – within Master Page (for example)

Reference using jQuery syntax

<script>$(document).ready({

$('a').addClass("test");});

</script>


Melbourne 2011


SelectorsDOM elementBy ID or Class or tag type

$('#myDivId') $('.myCssClass') $('a')

AttributesaddClass()removeClass()


Melbourne 2011



<div id="announcements"> <div class="article"> <h1>Check out my blog !</h1> <p>The most awesome blog on the planet is www.grumpywookie.com <p> </div></div>

$('#announcements').addClass("test");

Melbourne 2011




$('.article').addClass("test");

Melbourne 2011




$('p').addClass("test");

Melbourne 2011


Eventsclick()hocus()hover()

Effectsanimate()fadeIn()accordian()


Melbourne 2011


<script>$('#right').click(function(){

$('.block').animate({

'left': '+=50px‘}, 'slow');

});

</script>


Melbourne 2011

SharePoint + jQueryHow 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 neededjQuery UI – additional functionsjQuery CycleSharePoint Web Services


http://jquery.com/

http://jquery.com/

Melbourne 2011

SharePoint + jQueryHow to include it ?

SharePoint Site – upload JS fileEg. Site Assets library

Include in Master Page

<script type="text/javascript" src="/SiteAssets/jquery-1.6.2.min.js" />


Melbourne 2011

• List View Web Part– News Accordian– Image Rotator– News Rotator

• Custom XSLT – HTML– CSS– Animate with jQuery -> jQuery UI plug-in


SharePoint + jQueryDemos

Melbourne 2011

QUESTION & ANSWER SESSION


Melbourne 2011

Chris O’Connor [ OBS ]@GrumpyWookie

[email protected]


Melbourne 2011

© 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.

The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this

presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.


Melbourne 2011

Sample slide

• This is an example of what a slide might look like

• It’s pretty basic, feel free to add to it• Try to keep true to the theme (colours, fonts,

all that design stuff)

Melbourne 2011

HEY YOU, WATCH THIS!SP Saturday Slide Template Example

Melbourne 2011

Showing off codefunction SampleCodeSlideDescription(){

var desc = “use this slide to demonstrate code”var desc2 = “Add a new code slide from the new slide menu”var desc3 = “Use tab to indent content, we just hid the bullets

here”}

function IsBrianAwesome(){

return true;}

Melbourne 2011

QUESTION AND ANSWERSP Saturday Slide Template Example

Melbourne 2011

Related Links

• http://www.sharepointsaturday.orgHere is an example link

• http://www.bing.comDon’t use this page if you don’t need it

• http://blog.brianfarnhill.comConsider posting links on your blog instead!

http://www.sharepointsaturday.org/

http://www.bing.com/

http://blog.brianfarnhill.com/

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!

SponsorsGold

Silver

Bronze

Technology

2011 - SharePoint + jQuery