CHAPTER 11 Developing with jQuery, HTML5, and CSS3
It’s no secret that a big trend in web development today is making websites more responsive and more user experience-focused than in the past. Technologies such as jQuery, HTML5, and CSS3 are at the heart of that movement and will continue to be a core focus in creating modern websites for the near future. While SharePoint Online wasn’t really designed specifically for use with these technologies, we can still leverage them in ways that hopefully help make our SharePoint sites more adaptive, more user- friendly, and more modern-looking.
This chapter discusses the following topics:
• Introduction to jQuery
• Using jQuery in SharePoint Online
• jQuery and the client object model
• Introduction to HTML5 and CSS3
• Using HTML5 and CSS3 in SharePoint Online
Introduction to jQuery
What Is jQuery?
The definition on jQuery’s own website (http://jquery.com) describes it well:
Where Can You Get It?
You can download the latest version of jQuery from the jQuery website at http://jquery.com. At the time of this writing, the current release is version 1.7.2. The website gives you a choice of downloading a production version of the library (slimmed-down or “minified” for best performance) or a development version for debugging (human-readable, uncompressed code).
Alternatively, you can also reference jQuery using a content delivery network (CDN). A list of publicly available CDNs you can link to is available on the jQuery website at http://bit.ly/aqJ92n.
The jQuery website also has some great documentation and tutorials that can teach you how to use the library if you haven’t used it before.
In addition to the core jQuery library, you can also download and use the jQuery user interface (UI) that is built on top of the core jQuery library and provides controls and abstractions for building highly interactive UIs. You can download jQuery UI from http://jqueryui.com.
At the time of this writing, the jQuery UI home page provides a “Build custom download” button that lets you decide exactly how much of the library to download based on your needs. (For example, you might want the drag-and-drop behavior but not the resize, sort, and selection behaviors.) You can also choose the theme you want (or design your own), and the appropriate CSS will be included in your download.
What Does jQuery Give Us?
At a high level, the core jQuery library provides the following capabilities and functionality (across browsers):
• Selectors (for finding and referencing elements in the DOM)
• Attribute manipulation (e.g., retrieving an element’s value or changing its CSS class)
• Traversal of DOM elements (e.g., looping over a collection of elements or finding all the children of a parent element)
• Document Object Model (DOM) manipulation (e.g., adding and removing elements)
• Events (e.g., adding a click event handler to an element)
• Effects (e.g., making an element fade in or out of view)
• Ajax (e.g., loading data from a server without requiring a full page refresh)
• Utilities and other “core” functionality (e.g., manipulating arrays and strings, and associating arbitrary data with elements in the DOM)
As you can see, the core library gives us a lot. And if you download the jQuery UI, you also get the behaviors, themes, and controls that come with the jQuery UI library. All in all, it’s a lot of functionality, and it’s all free.
Note DOM refers to the Document Object Model, which is a model used by web browsers to represent the content and structure of an HTML document (web page). For more information, see http://www.w3.org/DOM.
Using jQuery in SharePoint Online
There are two ways to reference, or “include,” jQuery in a web page: by using a CDN or by referencing your own local copy of the library. Regardless of which approach you plan to use, you’ll use a <script> tag to reference jQuery in your page. You can’t run jQuery code on a page unless that page has a reference to the jQuery library.
Here’s a quick example of a CDN reference (in this case hosted by Google):
And here’s a quick example of a local reference (assuming in this case that jQuery resides in your site collection’s style library):
Note The server-side <ScriptLink> tag can also be used to reference jQuery. The Name attribute supports absolute URLs as well as URLs containing the ~site and ~sitecollection tokens.
If you’re wondering how to actually add the jQuery reference to your page, there are several different approaches you can take. We’ve listed three common ones with pros and cons (to help you decide when each is appropriate) in Table 11-1.
Table 11-1. Common Approaches for Referencing jQuery in SharePoint Online
Now that we’ve outlined three common approaches, let’s take a closer look at each one so you know how to do it should the need arise.
Content Editor Web Part (CEWP) Approach
To demonstrate this approach, let’s start with a standard site page (like what you get with a team site). Begin by inserting a Content Editor Web Part (CEWP) from the Media and Content category of web parts into the page, as shown in Figure 11-1.
Figure 11-1. Empty CEWP on site page