2011 - jQuery + SharePoint (TechEd)
Download as PPTX, PDF0 likes477 views
The document discusses how to use jQuery with SharePoint. It explains that jQuery is a JavaScript library that makes interacting with HTML documents and DOM elements easier. It also describes how jQuery selectors and functions like addClass() and click() allow manipulating elements on a page. Finally, it provides instructions for including jQuery in SharePoint by uploading files and referencing them in master pages or web parts.
![SHAREPOINT + JQUERY
Chris O’Connor [ OBS ]
@GrumpyWookie
www.sharepointroot.com
(c) 2011 Microsoft. All rights reserved.](https://image.slidesharecdn.com/jquerysharepoint-150828060237-lva1-app6892/85/2011-jQuery-SharePoint-TechEd-2-320.jpg)
![Chris O’Connor [ OBS ]
@GrumpyWookie
chris.oconnor@obs.com.au
www.sharepointroot.com
(c) 2011 Microsoft. All rights reserved.](https://image.slidesharecdn.com/jquerysharepoint-150828060237-lva1-app6892/85/2011-jQuery-SharePoint-TechEd-12-320.jpg)
2011 - jQuery + SharePoint (TechEd)
- 2. SHAREPOINT + JQUERY Chris O’Connor [ OBS ] @GrumpyWookie www.sharepointroot.com (c) 2011 Microsoft. All rights reserved.
- 3. SharePoint + jQuery What is it ? ► What is jQuery ? ► JavaScript ! ► Language of the web – HTML – CSS ► Browser independent (c) 2011 Microsoft. All rights reserved.
- 4. 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 reserved.
- 5. SharePoint + jQuery How does it work ? <script> $(document).ready( { $('a').addClass("test"); }); </script> (c) 2011 Microsoft. All rights reserved.
- 6. SharePoint + jQuery How does it work ? ►Events – click() – hocus() – hover() ►Effects – animate() – fadeIn() (c) 2011 Microsoft. All rights reserved.
- 7. SharePoint + jQuery How does it work ? <script> $('#right').click(function() { $('.block').animate( { 'left': '+=50px‘ }, 'slow'); }); </script> (c) 2011 Microsoft. All rights reserved.
- 8. 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 reserved.
- 9. 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 reserved.
- 10. ►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 reserved. SharePoint + jQuery Demos
- 11. QUESTION & ANSWER SESSION (c) 2011 Microsoft. All rights reserved.
- 12. Chris O’Connor [ OBS ] @GrumpyWookie chris.oconnor@obs.com.au www.sharepointroot.com (c) 2011 Microsoft. All rights reserved.
- 13. © 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 reserved.