Navigation

Getting Started

In this first step get the basics of a jQuery UI project in place. We will make a page that includes the standard jQuery UI calendar widget.

For this tutorial, we are using the `Google AJAX Libraries
<http://code.google.com/apis/ajaxlibs/documentation/>`_ loader to get jQuery and jQuery UI into our project. Loading from Google’s content delivery network (CDN) improves performance and decreases the work of writing this tutorial.

HTML Page

In demo.html we have some basic markup for a page:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
      <title>GridTable Demo</title>
      <script src="http://www.google.com/jsapi"></script>
      <script>
	google.load("jquery", "1.3.2");
	google.load("jqueryui", "1.7.2");
      </script>
      <link rel="stylesheet" 
	    href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/smoothness/jquery-ui.css" 
	    />
      <link rel="stylesheet" href="demo.css"/>
      <script src="demo.js"></script>
  </head>

  <body>
    <h1>GridTable Demo</h1>
    <input type="text" name="date" id="date" />
  </body>

</html>
  1. Line 5. Include the Google script that lets us load common Ajax libraries.
  2. Lines 7-8. Load current versions of the jQuery and jQuery UI libraries.
  3. Lines 10-12. Use the Google CDN to get the CSS for a particular jQuery UI theme (smoothness).
  4. Lines 13-14. Link to our custom CSS and JS.

JS

The demo.js has very little in it:

1
2
3
$(document).ready(function() {
    $('#date').datepicker();
});
  1. Line 1. The traditional jQuery way to execute code safely when the page is loaded.
  2. Line 2. Turn an HTML node into a jQuery UI widget.

CSS

The CSS used in demo.css is really just a placeholder:

1
2
3
4
body {
    font-family: sans-serif;
    margin: 2em;
}

With these basics in place we can look the basics of writing our first jQuery UI widget. We will gradually build the widget into our GridTable.

Table Of Contents

Previous topic

Background

Next topic

First Widget

This Page

Navigation

© Copyright 2008, Open Society Institute. Last updated on Sep 06, 2010. Created using Sphinx 0.6.1.