WebFund 2013W: jQuery UI - Revision history

Abeinges at 20:24, 1 February 2013

2013-02-01T20:24:43Z

← Older revision		Revision as of 20:24, 1 February 2013
Line 2:		Line 2:

	This application uses:		This application uses:
	jQuery		* jQuery
	jQuery-UI (jQuery plugin)		* jQuery-UI (jQuery plugin)
	jQuery-validate (jQuery plugin)		* jQuery-validate (jQuery plugin)
	Bootstrap		* Bootstrap

	You will need to look up the documentation on these to understand how the application works.		You will need to look up the documentation on these to understand how the application works.

Abeinges at 20:24, 1 February 2013

2013-02-01T20:24:20Z

← Older revision		Revision as of 20:24, 1 February 2013
Line 1:		Line 1:
	In this tutorial you will examine and modify a simple example page using [http://jqueryui.com/ jQuery UI].		In this tutorial you will examine and modify a simple example page using [http://jqueryui.com/ jQuery UI].

			This application uses:
			jQuery
			jQuery-UI (jQuery plugin)
			jQuery-validate (jQuery plugin)
			Bootstrap

			You will need to look up the documentation on these to understand how the application works.

	The file [http://homeostasis.scs.carleton.ca/~soma/webfund-2013w/demo-jquery-ui.zip demo-jquery-ui.zip] contains the example index.html file and associated libraries. Please download this file locally, unzip it, and navigate to the local file <tt>demo-jquery-ui/index.html</tt> in your browser. (Note we will not be using node.js in this tutorial). You should see something like this:		The file [http://homeostasis.scs.carleton.ca/~soma/webfund-2013w/demo-jquery-ui.zip demo-jquery-ui.zip] contains the example index.html file and associated libraries. Please download this file locally, unzip it, and navigate to the local file <tt>demo-jquery-ui/index.html</tt> in your browser. (Note we will not be using node.js in this tutorial). You should see something like this:

Soma: Soma moved page WebFund 2013W: jQuery to WebFund 2013W: jQuery UI

2013-02-01T17:54:01Z

Soma moved page WebFund 2013W: jQuery to WebFund 2013W: jQuery UI

← Older revision	Revision as of 17:54, 1 February 2013
(No difference)

Soma: Created page with "In this tutorial you will examine and modify a simple example page using [http://jqueryui.com/ jQuery UI]. The file [http://homeostasis.scs.carleton.ca/~soma/webfund-2013w/de..."

2013-02-01T17:53:47Z

Created page with "In this tutorial you will examine and modify a simple example page using [http://jqueryui.com/ jQuery UI]. The file [http://homeostasis.scs.carleton.ca/~soma/webfund-2013w/de..."

New page

In this tutorial you will examine and modify a simple example page using [http://jqueryui.com/ jQuery UI].

The file [http://homeostasis.scs.carleton.ca/~soma/webfund-2013w/demo-jquery-ui.zip demo-jquery-ui.zip] contains the example index.html file and associated libraries. Please download this file locally, unzip it, and navigate to the local file <tt>demo-jquery-ui/index.html</tt> in your browser. (Note we will not be using node.js in this tutorial). You should see something like this:

[[File:Demo-jquery-ui-screenshot.png]]

Note that:
* The country field auto-completes with a few countries.
* The Birthday field brings up a calendar.
* If you click the email me button, you get another field for entering your email address.
* If you hit submit where all the fields are "valid", they all go blank (and the URL contains the values you entered). If you try submitting an invalid form, the colors of the invalid entries are shown.

Modify this page as follows:
# Remove the loading of [http://twitter.github.com/bootstrap/ bootstrap] (JS and style sheet at top of index.hml) - what changed?
# Make an alert dialog pop up when you hit submit on a valid form that says "Form validated."
# Make the email address validate only if it has a "@".
# Print a message below the country field that says "invalid Country" if you manually type in a new country that isn't in the list.
# Add some of the other widgets that are part of [http://jqueryui.com/ jQuery UI].