Enhancing the SharePoint User Experience with jQuery

1. Enhancing the SharePoint User Experience with jQuery Brian Wilson

2. What is jQuery? • Simple JavaScript • Client-side • Fast • Reduces lines of code • Cross-browser compliant • You don’t have to worry about writing tons of code to handle each browser

3. jQueryOverview • Created by John Resig • Open Source • Small footprint • 19KB – Minified and Gzipped • CSS3 Compliant • Major company websites using it

4. jQueryBasics • Selectors • $(“p”) • $(“#tagName”) • $(“.className”) • Animations • .show() • .hide() • .fadeIn() • .fadeOut() • .slideUp() • .slideDown() • Plugins • User community generated • Thousands of different functions created

5. Plugins

6. More Basics • Use the document ready handler • Formal - $(document).ready(function() {}); • Short - $(function() {}); • Child selector • p > a – direct child of p elements • Attribute selector • p[myAttr] – all elements with myAttr attribute • :first • :nth-child(n) – returns nth child • :even and :odd

7. Deploying jQuery in SharePoint • Add <script> to page you want to reference • You can also add a CEWP to a page • Able to control the scope and who has access • Adding to multiple locations can be tedious to keep track of • Add to master page • Easy to reference on any page referencing the master page • Have to add to each master page • Use AdditionalPageHead delegate control • Create a feature • Turn jQuery reference on/off for entire site • Best option for deployment

8. demo

9. Summary • Easy to use • Tons of free content • Jan Tielens – Basic overview and simple examples • www.endusersharepoint.com – good examples • Supported by Microsoft and included with future releases of Visual Studio • Books • jQuery in Action – Bibeault/Katz

10. Questions • Email questions to bwilson@idarchitects.com • Twitter - @bcwilsonttu • Blog - http://businesstechinfo.blogspot.com/