2011 - SharePoint + jQuery

2011 - SharePoint + jQuery

• 1.
  Sponsors Gold Silver Bronze SharePoint + jQuery ChrisO’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 METHE 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 ANDANSWER 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! Rememberto 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