2011 - sharepoint + jquery
Post on 14-Apr-2017
290 Views
Preview:
TRANSCRIPT
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
(c) 2011 Microsoft. All rights reserved.
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>
(c) 2011 Microsoft. All rights reserved.
Melbourne 2011
SharePoint + jQueryHow does it work ?
SelectorsDOM elementBy ID or Class or tag type
$('#myDivId') $('.myCssClass') $('a')
AttributesaddClass()removeClass()
(c) 2011 Microsoft. All rights reserved.
Melbourne 2011
SharePoint + jQueryHow does it work ?
(c) 2011 Microsoft. All rights reserved.
<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 + jQueryHow does it work ?
(c) 2011 Microsoft. All rights reserved.
<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 + jQueryHow does it work ?
(c) 2011 Microsoft. All rights reserved.
<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 + jQueryHow does it work ?
Eventsclick()hocus()hover()
Effectsanimate()fadeIn()accordian()
(c) 2011 Microsoft. All rights reserved.
Melbourne 2011
SharePoint + jQueryHow does it work ?
<script>$('#right').click(function(){
$('.block').animate({
'left': '+=50px‘}, 'slow');
});
</script>
(c) 2011 Microsoft. All rights reserved.
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
(c) 2011 Microsoft. All rights reserved.
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" />
(c) 2011 Microsoft. All rights reserved.
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 reserved.
SharePoint + jQueryDemos
Melbourne 2011
QUESTION & ANSWER SESSION
(c) 2011 Microsoft. All rights reserved.
Melbourne 2011
Chris O’Connor [ OBS ]@GrumpyWookie
chris.oconnor@obs.com.auwww.sharepointroot.com
(c) 2011 Microsoft. All rights reserved.
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 reserved.
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!
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
top related