jquery and sharepoint in harmony
DESCRIPTION
TRANSCRIPT
![Page 1: jquery and sharepoint in harmony](https://reader033.vdocument.in/reader033/viewer/2022061301/548e82e9b4795937278b460b/html5/thumbnails/1.jpg)
jQuery and SharePoint in HarmonyGreg GalipeauEnterprise SharePoint ArchitectGovernmenthttp://greggalipeau.com
![Page 2: jquery and sharepoint in harmony](https://reader033.vdocument.in/reader033/viewer/2022061301/548e82e9b4795937278b460b/html5/thumbnails/2.jpg)
Working fulltime with SharePoint since 2003
Started with the 2001 version of SharePoint
Started as .Net developer and learned the correct ways to develop against SharePoint over the last 10+ years
Learned SharePoint Administration, Design, Architecture, Analysis, Power end-user along the way
Certified Microsft MCP, MCAD, MCSD, etc.., etc.. (stopped counting after a while)
Have been a consultant, private employee and currently a government employee
About Me
Greg Galipeauwww.greggalipeau.comTwitter: @ggalipeau
![Page 3: jquery and sharepoint in harmony](https://reader033.vdocument.in/reader033/viewer/2022061301/548e82e9b4795937278b460b/html5/thumbnails/3.jpg)
“jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.” – jquery.com
“jQuery is a multi-browser Javascript Library designed to simplify the client-side-scripting of HTML”- wikipedia.org
In essence – jQuery makes writing Javascript easy
jQuery
![Page 4: jquery and sharepoint in harmony](https://reader033.vdocument.in/reader033/viewer/2022061301/548e82e9b4795937278b460b/html5/thumbnails/4.jpg)
Client side – no code to deploy Manipulation of DOM for animation, event
handling, Ajax applications Enables developers to create advanced,
high-level effects Lightweight, high-performance (if done
right) compared to some server side techniques or ASP.Net Ajax
Why Javascript
![Page 5: jquery and sharepoint in harmony](https://reader033.vdocument.in/reader033/viewer/2022061301/548e82e9b4795937278b460b/html5/thumbnails/5.jpg)
jQuery UI is reusable UI elements that use the jQuery library
You should understand jQuery UI theming before using this
I always include a jQuery UI reference with jQuery so I can do things like tabbing, accordions, etc…
jQuery vs jQuery UI
![Page 6: jquery and sharepoint in harmony](https://reader033.vdocument.in/reader033/viewer/2022061301/548e82e9b4795937278b460b/html5/thumbnails/6.jpg)
Master page reference Either a “local” version or on a CDN<script src=“jquery.js”></script>(the src can be in the 14/layout folder or in a style library in your site)
Or<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js></script>
Feature Helpful when you have multiple master pages
or want to use the out-of-the-box SharePoint master page
Use the AdditionalPageHead Delegate and an .ascx control
Important – used the minified version for Production! Full version is only for dev and debugging
How to include jQuery
![Page 7: jquery and sharepoint in harmony](https://reader033.vdocument.in/reader033/viewer/2022061301/548e82e9b4795937278b460b/html5/thumbnails/7.jpg)
Master Page or Feature is preferred method for global implementation on a SharePoint site
Sometimes you don’t have control over this
What to do? Use the Content Editor WebPart Even better
Put the jQuery reference in a Text file Store in a Central Location Reference the Text file from a Content Editor WebPart Export that Content Editor WebPart Add it to your WebPart gallery Now you can drag and drop the jQuery reference
WebPart on any page
Other ways to include jQuery
![Page 8: jquery and sharepoint in harmony](https://reader033.vdocument.in/reader033/viewer/2022061301/548e82e9b4795937278b460b/html5/thumbnails/8.jpg)
Don’t use the dollar sign ($) – SharePoint uses this on the calendar. If you use it you will have a CONFLICT anywhere a calendar is
The $() is just shorthand for the word jQuery
$(function() { alert(“hello”);}
Other option = jquery no conflict Var j = jquery.noConflict(); j(function() {
alert(“hello”);}
Jquery Basics - $()
=
jQuery(function() {
alert(“hello”);
}
![Page 9: jquery and sharepoint in harmony](https://reader033.vdocument.in/reader033/viewer/2022061301/548e82e9b4795937278b460b/html5/thumbnails/9.jpg)
IE Developer toolbar Has come a long way Already part of IE (unless you have an old
version) I use to be a Firebug guy – I’ve been turned to
the Toolbar Lets you set breakpoints in javascript to debug
on the client side Lets you select html elements to change css
on the client side
Debugging
DarksideMicrosoftToolbar
![Page 10: jquery and sharepoint in harmony](https://reader033.vdocument.in/reader033/viewer/2022061301/548e82e9b4795937278b460b/html5/thumbnails/10.jpg)
- Hiding and Showing elements on the page using jQuery
- Using jQuery Ajax and HttpHandlers to create high performance, great looking functionality
- Easy SharePoint Tabs (if time)
Demo Time
jQuery
![Page 11: jquery and sharepoint in harmony](https://reader033.vdocument.in/reader033/viewer/2022061301/548e82e9b4795937278b460b/html5/thumbnails/11.jpg)
Thanks to our sponsors!
![Page 12: jquery and sharepoint in harmony](https://reader033.vdocument.in/reader033/viewer/2022061301/548e82e9b4795937278b460b/html5/thumbnails/12.jpg)
Questions? Evaluations?
![Page 13: jquery and sharepoint in harmony](https://reader033.vdocument.in/reader033/viewer/2022061301/548e82e9b4795937278b460b/html5/thumbnails/13.jpg)
SharePint!!!
5335 Wisconsin Avenue NW6th FloorWashington, DC 200156pm - 8pm
![Page 14: jquery and sharepoint in harmony](https://reader033.vdocument.in/reader033/viewer/2022061301/548e82e9b4795937278b460b/html5/thumbnails/14.jpg)
Want to know more? Following me on Twitter?
@ggalipeau Reading my blog?
http://greggalipeau.com