Quick start guide to java script frameworks for sharepoint add ins sharepoint days
Download as PPTX, PDF3 likes527 views
This document provides an overview of JavaScript frameworks and libraries that can be used to develop SharePoint add-ins, including jQuery, Bootstrap, LESS, and Modernizr. It explains that jQuery is a popular JavaScript library for selecting elements and handling AJAX calls. Bootstrap is an HTML, CSS, and JS framework for developing responsive, mobile-first projects that includes grids, components, and plugins. LESS extends CSS with features like variables and mixins, and Bootstrap is based on LESS. Modernizr detects browser support for HTML5 and CSS3 features to add polyfills for older browsers.
Quick start guide to java script frameworks for sharepoint add ins sharepoint days
- 1. Quick Start Guide to JavaScript Frameworks for SharePoint Add-ins
- 2. JavaScript Frameworks and Libraries 2
- 4. SharePoint 2003-2010 JavaScript frameworks and libraries SharePoint REST, CSOM SharePoint 2010-2013
- 5. JavaScript Frameworks 5 Standardized code structure and rules HTML, CSS and JS Front-end frameworks β’ CSS to position elements β’ Typography styles β’ Browser compatibility β’ Standard CSS classes β’ Set of tools β’ Imposes no structure
- 6. jQuery 6 JavaScript library Most popular Open-source Released in 2006 Easy to select DOM elements Used in Bootstrap and other libraries
- 7. jQuery Start with $(document).ready(function(){ AJAX calls $.ajax({ Element selector $(".item") Chaining $(".item").addClass("blue").slideDown("slow"); Jquery.ui, jquery.validation 7
- 8. Bootstrap The most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web Open-source Twitter Bootstrap in 2011 Bootstrap 3.0 - mobile first Bootstrap 4 alpha 8
- 9. Elements CSS β’ Grid, typography, code, tables, forms, buttons, images Components β’ Glyphicons, dropdowns, input, navs, nav bars, breadcrumbs, pagination, labels, badges, jumbotron, page header, thumbnails, alerts, progress bars, media object, list group, panels, responsive embed, wells JavaScript ο Transitions, modal, dropdown, scrollspy, tab, tooltip, popover, alert, button, collapse, carousel, affix Customize 9
- 12. What is Bootstrap? Grid Forms Navigation, tabs Popovers, badges, collapse, pagination⦠12
- 17. Grid HTML <div class="col-md-12"> - entire page <div class="col-md-6β> - 50% <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12"> <div class="col-md-12 hidden-xs"> 17
- 18. Button HTML 18 <a href="#" class="btn btn-default btn-md active">Cancel MEDIUM</a> <button type="button" class="btn btn-success"> Success</button>
- 19. DEMO Bootstrap Provider Add-in
- 20. DEMO Bootstrap SharePoint hosted Add-in
- 21. LESS Extends the CSS language, adding features that allow variables, mixins, functions Bootstrap is based on LESS Bootstrap 4.0 is based on SASS 21
- 22. DEMO Bootstrap with LESS SharePoint hosted add-in
- 23. Bootstrap Themes Bootswatch β free themes at bootswatch.com Wrapbootstrap β payed themes at wrapbootstrap.com Official Bootstrap themes - http://themes.getbootstrap.com/collections/all 23
- 24. jQuery Validation / Unobtrusive HTML <input type=βtextβ id=βSiteTitleβ JavaScript rules: { "SiteTitle": { required: true, minlength: 5 } }, messages: { "SiteTitle": { required: "Please enter the site title.", minlength: "Minimum length is 5 letters." } } HTML <input type="textβ id=βSiteTitleβ data-rule-required="true" data-msg-required="The Site Title field is required.β data-rule-minlength="5" data-msg-minlength="The minimum length is 5 letters.β JavaScript $form.validate(); 24
- 27. Modernizr Detects HTML5 and CSS3 features that your browser supports on page load Result of βfeature detectionβ is βyesβ or βnoβ Adds classes to HTML https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross- browser-Polyfills Support IE6+, Firefox 3.5+, Opera 9.6+, Safari 2+, Chrome 27
- 28. Support IE6+, Firefox 3.5+, Opera 9.6+, Safari 2+, Chrome
- 29. Modernizr Modernizr.load({ test: Modernizr.borderradius, yep : alert("This browser supports border radius."), nope: 'PIE_IE678.js' }); 29
- 30. Respondjs It loops through the CSS referenced on the page IE8: re-requests the CSS files using Ajax Polyfill for CSS min-width and max-width in browsers that don't support CSS3 Media Queries 30
- 31. Polyfills, shims Shim: a generic code, a library that brings a new API to an older environment Polyfill: downloadable code with fallback for functionality that is not available in your browser Also with newer browsers 31
- 32. Links jQuery http://api.jquery.com/ Bootstrap tutorial http://www.tutorialspoint.com/bootstrap/bootstrap_tutorial.pdf Modernizr http://modernizr.com/docs/ Respond https://github.com/scottjehl/Respond Building Responsive UI with Bootstrap on MVA http://www.microsoftvirtualacademy.com/training-courses/building-responsive-ui- with-bootstrap LESS http://lesscss.org/ Polyfills https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills 32
- 33. 33