CHAPTER 11 Developing with jQuery, HTML5, and CSS3


Advertisement

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?

 

Remember the days of struggling to write cross-browser client-side code  in JavaScript? Yeah, neither do we. Why not? Because for years now, we’ve had  JavaScript libraries at our fingertips that make the task much easier (and frankly, much more enjoyable). jQuery is one of those libraries and  is also one of the most popular.


The definition on jQuery’s own website (http://jquery.com) describes it well:

 

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 you write JavaScript.

 

The last sentence of that definition stands out because it captures exactly what  jQuery  has done: it changed the way developers write JavaScript.

 

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.

 

jQuery UI

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

Referencing jQuery

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):

 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"  type="text/javascript"></script> 

 

And here’s  a quick example of a local reference (assuming in this case that jQuery  resides in your site collection’s style library):

 

<script src=”/Style Library/js/jQuery-1.7.2.min.js” type=”text/javascript”></script> 

 

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.

 


Advertisement

 

Figure 11-1. Empty CEWP on site page