SlideShare a Scribd company logo

2011 - SharePoint + jQuery

•Download as PPTX, PDF•
•
Chris O'Connor
Chris O'Connor

This document discusses using jQuery with SharePoint. It begins with an introduction to jQuery and how it works by allowing selection of DOM elements and manipulation of attributes. Examples are provided of adding and removing classes. The document also covers jQuery events and effects. It provides information on downloading jQuery files and including them in SharePoint master pages. Finally, it discusses some jQuery plugin demos that can be used in SharePoint like accordions and image rotators.

1 of 21
Melbourne 2011 @GrumpyWookie Chris O’Connor [ OBS ] www.sharepointroot.com SHAREPOINT + JQUERY (c) 2011 Microsoft. All rights #FunkyWookie
Melbourne 2011 SharePoint + jQuery What is it ? What is jQuery ? For animation + effects JavaScript ! Uses the language of the web HTML CSS Browser independent (c) 2011 Microsoft. All rights
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> (c) 2011 Microsoft. All rights
Melbourne 2011 SharePoint + jQuery How does it work ? Selectors DOM element By ID or Class or tag type $('#myDivId') $('.myCssClass') $('a') Attributes addClass() removeClass() (c) 2011 Microsoft. All rights
Melbourne 2011 SharePoint + jQuery How does it work ? (c) 2011 Microsoft. All rights <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 SharePoint + jQuery How does it work ? (c) 2011 Microsoft. All rights <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> $('.article').addClass("test");
Melbourne 2011 SharePoint + jQuery How does it work ? (c) 2011 Microsoft. All rights <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> $('p').addClass("test");
Melbourne 2011 SharePoint + jQuery How does it work ? Events click() hocus() hover() Effects animate() fadeIn() accordian() (c) 2011 Microsoft. All rights
Melbourne 2011 SharePoint + jQuery How does it work ? <script> $('#right').click(function() { $('.block').animate( { 'left': '+=50px‘ }, 'slow'); }); </script> (c) 2011 Microsoft. All rights
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 (c) 2011 Microsoft. All rights
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" /> (c) 2011 Microsoft. All rights
Melbourne 2011 • List View Web Part – News Accordian – Image Rotator – News Rotator • Custom XSLT – HTML – CSS – Animate with jQuery -> jQuery UI plug-in (c) 2011 Microsoft. All rights SharePoint + jQuery Demos
Melbourne 2011 QUESTION & ANSWER SESSION (c) 2011 Microsoft. All rights
Melbourne 2011 Chris O’Connor [ OBS ] @GrumpyWookie chris.oconnor@obs.com.au www.sharepointroot.com (c) 2011 Microsoft. All rights
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. (c) 2011 Microsoft. All rights
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 code function 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 ANSWER SP Saturday Slide Template Example
Melbourne 2011 Related Links • http://www.sharepointsaturday.org Here is an example link • http://www.bing.com Don’t use this page if you don’t need it • http://blog.brianfarnhill.com Consider posting links on your blog instead!
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

More Related Content

2011 - SharePoint + jQuery

  • 1. Melbourne 2011 @GrumpyWookie Chris O’Connor [ OBS ] www.sharepointroot.com SHAREPOINT + JQUERY (c) 2011 Microsoft. All rights #FunkyWookie
  • 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 (c) 2011 Microsoft. All rights
  • 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> (c) 2011 Microsoft. All rights
  • 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() (c) 2011 Microsoft. All rights
  • 5. Melbourne 2011 SharePoint + jQuery How does it work ? (c) 2011 Microsoft. All rights <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");
  • 6. Melbourne 2011 SharePoint + jQuery How does it work ? (c) 2011 Microsoft. All rights <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> $('.article').addClass("test");
  • 7. Melbourne 2011 SharePoint + jQuery How does it work ? (c) 2011 Microsoft. All rights <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> $('p').addClass("test");
  • 8. Melbourne 2011 SharePoint + jQuery How does it work ? Events click() hocus() hover() Effects animate() fadeIn() accordian() (c) 2011 Microsoft. All rights
  • 9. Melbourne 2011 SharePoint + jQuery How does it work ? <script> $('#right').click(function() { $('.block').animate( { 'left': '+=50px‘ }, 'slow'); }); </script> (c) 2011 Microsoft. All rights
  • 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 (c) 2011 Microsoft. All rights
  • 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" /> (c) 2011 Microsoft. All rights
  • 12. Melbourne 2011 • List View Web Part – News Accordian – Image Rotator – News Rotator • Custom XSLT – HTML – CSS – Animate with jQuery -> jQuery UI plug-in (c) 2011 Microsoft. All rights SharePoint + jQuery Demos
  • 13. Melbourne 2011 QUESTION & ANSWER SESSION (c) 2011 Microsoft. All rights
  • 14. Melbourne 2011 Chris O’Connor [ OBS ] @GrumpyWookie chris.oconnor@obs.com.au www.sharepointroot.com (c) 2011 Microsoft. All rights
  • 15. 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. (c) 2011 Microsoft. All rights
  • 16. 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)
  • 17. Melbourne 2011 HEY YOU, WATCH THIS! SP Saturday Slide Template Example
  • 18. Melbourne 2011 Showing off code function 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; }
  • 19. Melbourne 2011 QUESTION AND ANSWER SP Saturday Slide Template Example
  • 20. Melbourne 2011 Related Links • http://www.sharepointsaturday.org Here is an example link • http://www.bing.com Don’t use this page if you don’t need it • http://blog.brianfarnhill.com Consider posting links on your blog instead!
  • 21. 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

Editor's Notes

  1. 8/28/2015 5:54 AM
  2. 8/28/2015 5:54 AM
  3. 8/28/2015 5:54 AM
  4. 8/28/2015 5:54 AM
  5. 8/28/2015 5:54 AM
  6. 8/28/2015 5:54 AM
  7. 8/28/2015 5:54 AM
  8. 8/28/2015 5:54 AM
  9. 8/28/2015 5:54 AM
  10. 8/28/2015 5:54 AM
  11. 8/28/2015 5:54 AM
  12. 8/28/2015 5:54 AM