-
-
-
-
Defaults
-
A date picker can easily be added to an input field with default settings.
-
Default date picker:
-
-
-
IE select issue:
- Show how the date picker covers a select in IE
-
The defaults are:
-
- Date picker appears on focus
- Text is in English
- Date format is mm/dd/yyyy
- Clear /Close controls show at the topMonth and year are selectable directly
- 10 years before and after the selected year are shown
- Show a single month
- Select a single date
- Week starts on Sunday
- Day names are clickable to change the first day of the week
- Days in other months are not displayed
- No date restrictions
- Clicking elsewhere closes the date picker
-
-
Processed fields are marked with a class of hasDatepicker
- and are not re-processed if targetted a second time.
-
You can override the default settings that apply to all date picker instances.
-
-
-
-
Invocation
-
The date picker can be invoked in a variety of ways, as shown below.
- Also shown is the use of an image only trigger,
- and how the controls and buttons appear when disabled.
-
Datepicker appears on focus:
-
-
-
Appears via text button:
-
-
-
Appears both ways:
-
-
-
You can embed the trigger image within the input area via CSS.
-
Embedded button:
-
-
-
Enable and disable datepicker with 'enable' and 'disable' commands.
-
-
The date picker can also be triggered externally for a particular input.
-
External trigger:
- Open date picker
-
-
Or even opened as a "dialog". If the blockUI plugin is available,
- it is used to create a modal dialog.
-
Date picker dialog:
- Open dialog
-
-
-
-
Keystrokes
-
The date picker also responds to keystrokes entered in the input field.
-
Keyboard driven:
-
-
The relevant keystrokes are:
-
- page up/down previous/next monthctrl+page up/down previous/next yearctrl+home current month or open when closedctrl+left/right previous/next dayctrl+up/down previous/next weekenter accept the selected datectrl+end close and erase the dateescape close the date picker without selection
-
-
-
Restricting
-
You can restrict the functionality of the date picker in various ways.
- The first example sets the first day of the week to Monday and prevents it from being
- changed, as well as preventing the month and year from being selected directly.
-
Restricted functionality:
-
-
-
You can also limit the range of dates selectable within the date picker.
- Here it's between 26-Jan-05 and 26-Jan-07.
-
Limited dates:
-
-
-
Or set a range relative to today by specifying a number
- rather than an exact date, in this case in the coming year.
-
Limited dates (relative):
-
-
-
The relative dates can also be specified as a number and a period -
- 'd' for days, 'w' for weeks, 'm' for months, or 'y' for years.
-
Limited dates (extended):
-
-
-
Note that the range of selectable months and years changes appropriately. Also,
- note that the Today link is no longer available as today is not in the range.
- By default, the Prev and Next links are disabled if they are not
- applicable. You can override this to remove them instead, with the
- hideIfNoPrevNext setting.
-
-
-
-
Customize
-
You can customize the selectability and/or appearance of individual days
- by setting a callback function that accepts a date and returns an array
- with the first entry being true/false for selectability and the second
- entry being a CSS class to apply (or '' for none). One appropriate
- function is built-in that prevents the selection of days on weekends.
-
No weekends:
-
-
-
Or you can provide your own function. The one below highlights and
- prevents selection of a set of national days.
-
National days:
-
-
-
With CSS like the following:
-
.au_day { color: blue !important; background: #eee url(au.gif) no-repeat center !important; }
-
-
-
Localisation
-
You can localise the date picker for other languages and regional differences.
- The date picker defaults to English with a date format of MM/DD/YYYY,
- but you can easily translate the text into another language and date format.
-
-
- 简体中文 (Chinese Simplified)
- 簡體中文 (Chinese Traditional)
- български език (Bulgarian)
- Català (Catalan)
- Čeština (Czech)
- Dansk (Danish)
- Deutsch (German)
- Español (Spanish)
- Français (French)
- 한국어 (Korean)
- Íslenska (Icelandic)
- Italiano (Italian)
- Magyar (Hungarian)
- Nederlands (Dutch)
- 日本語 (Japanese)
- lietuvių kalba (Lithuanian)
- Norsk (Norwegian)
- Phasa thai (Thai)
- Polski (Polish)
- Português (Portuguese)
- Română (Romanian)
- Русский (Russian)
- Slovenčina (Slovak)
- suomi (Finnish)
- Svenska (Swedish)
- Türkçe (Turkish)
- :
-
-
The presentation is slightly different for right-to-left languages.
-
-
- עברית (Hebrew)
- :
-
-
You need to load the appropriate language package, which
- adds a language set ($.datepicker.regional[langCode]) and
- automatically sets this language as the default for all date pickers.
-
<script type="text/javascript" src="ui.datepicker-fr.js"></script>
-
Thereafter, if desired, you can restore the original language settings.
-
$.datepicker.setDefaults($.datepicker.regional['']);
-
And then configure the language per date picker instance.
-
-
Localisation packages:
-
Localisation packages can be found below under Settings and Documentation .
-
-
-
-
Miscellaneous 1
-
Set the date shown when first opening the date picker. The default is today.
-
Open at 01-Jan-2007:
-
-
-
Open at 7 days from today:
-
-
-
Or specify a period from today - 'd' for days,
- 'w' for weeks, 'm' for months, or 'y' for years.
-
Open at 2 weeks from today:
-
-
-
Show the weeks of the year. Defaults to the ISO 8601 definition (weeks start
- on Mondays and the first week of the year contains January 4). Change the
- week calculation by setting calculateWeek to a function that
- takes a date as a parameter and returns the number of the week.
-
Show week of the year:
-
-
-
Additional settings let you move the Clear /Close controls
- to the bottom, hide the Clear control to make the date mandatory,
- display the days in other months (non-selectable),
- and show a status bar (with a custom display for today).
- Callback functions are also added to operate when a date
- is selected and when the datepicker is closed.
- If no onSelect callback is specified, the
- onchange event of the input field is triggered.
-
Additional settings:
-
-
-
-
-
Miscellaneous 2
-
Hide the datepicker on demand (press alt-h here) or
- remove the datepicker altogether if you've finished with it.
-
Remove popup datepicker:
- Remove
-
Remove inline datepicker:
-
-
-
(Advanced Technique)
-
Linked drop-downs:
- Jan Feb
- Mar Apr
- May Jun
- Jul Aug
- Sep Oct
- Nov Dec 1 2
- 3 4
- 5 6
- 7 8
- 9 10
- 11 12
- 13 14
- 15 16
- 17 18
- 19 20
- 21 22
- 23 24
- 25 26
- 27 28
- 29 30
- 31 2001 2002
- 2003 2004
- 2005 2006
- 2007 2008
- 2009 2010
-
-
-
-
Changing Settings
-
If necessary, the datepicker settings for an input (or set of inputs)
- can be changed on the fly. As an example, here we change the
- animation and speed at which the datepicker appears.
-
Display animation and speed:
-
- show
- fade in
- slide down
-
-
- immediate
- slow
- medium
- fast
-
-
-
Change datepicker:
-
-
When the option in the select changes, the following function is called:
-
-
Date pickers can also be configured inline.
- Add attributes to the input control with the namespace "date:"
- corresponding to the date picker properties.
- The attribute values are evaluated as JavaScript.
-
Inline configuration 1:
- blank
-
Inline configuration 2:
-
-
-
-
-
Inline
-
The date picker can be used inline rather than as a popup.
- Use inline mode by attaching the datepicker to a span or div element.
-
-
-
-
Show a number of months at once and set the range directly.
-
Inline range with two months:
-
-
-
- Selected range is:
-
-
-
(Advanced Technique)
-
- Set Inline Range to +and- one week
-
-
-
-
-
Stylesheets
-
The date picker can be formatted through the use of a stylesheet.
- The default stylesheet is used in the rest of this demo
- with an alternate one used here.
-
Alternate style:
-
-
In a dialog:
- Open dialog
-
The basic HTML structure of the date picker is shown below:
-
<div id="datepicker_div" class="datepicker_multi">
- <div class="datepicker_control">
- <div class="datepicker_clear"><a>Clear</a></div>
- <div class="datepicker_close"><a>Close</a></div>
- </div>
- <div class="datepicker_links">
- <div class="datepicker_prev"><a><Prev</a></div>
- <div class="datepicker_current"><a>Today</a></div>
- <div class="datepicker_next"><a>Next></a></div>
- </div>
- <div class="datepicker_oneMonth datepicker_newRow">
- <div class="datepicker_header">
- <select class="datepicker_newMonth"></select>
- <select class="datepicker_newYear"></select>
- </div>
- <table class="datepicker" cellpadding="0" cellspacing="0">
- <thead>
- <tr class="datepicker_titleRow">
- <td><a>Su</a></td><td><a>Mo</a></td>...
- </tr>
- </thead>
- <tbody>
- <tr class="datepicker_daysRow">
- <td class="datepicker_daysCell datepicker_weekEndCell
- datepicker_otherMonth datepicker_unselectable">31</td>
- <td class="datepicker_daysCell"><a>1</a></td>
- <td class="datepicker_daysCell datepicker_daysCellOver"><a>2</a></td>
- <td class="datepicker_daysCell datepicker_daysCellOver datepicker_currentDay"><a>3</a></td>
- <td class="datepicker_daysCell datepicker_today"><a>4</a></td>
- ...
- </tr>
- ...
- </tbody>
- </table>
- </div>
- <div class="datepicker_oneMonth">
- ...
- </div>
- <div style="clear: both;"></div>
-</div>
-
-
-
Compatibility
-
v3.3 to v3.4
-
The jQuery UI interfaces changed again, so here's another compatibility module.
-
Users of v3.3 of the datepicker should use the following
- header code to work with their existing implementation:
-
<link rel="stylesheet" type="text/css" href="ui.datepicker.css "/>
-<script type="text/javascript" src="ui.datepicker.js "></script>
-<script type="text/javascript" src="ui.datepicker.compatibility-3.3.js "></script>
-
Download the ui.datepicker.compatibility-3.3.js module.
-
To migrate fully, the following steps need to be taken:
-
- Replace references to the $(selector).attachDatepicker(...)
- function with $(selector).datepicker(...).
- Replace references to the $(selector).removeDatepicker()
- function with $(selector).datepicker('destroy').
- Replace references to the $(selector).datepicker.changDatepicker(...)
- function with $(selector).datepicker('change', ...).
- Replace references to the $(selector).datepicker.enableDatepicker()
- function with $(selector).datepicker('enable').
- Replace references to the $(selector).disableDatepicker()
- function with $(selector).datepicker('disable').
- Replace references to the $(selector).isDisabledDatepicker()
- function with $(selector).datepicker('isDisabled').
- Replace references to the $(selector).showDatepicker()
- function with $(selector).datepicker('show').
- Replace references to the $.datepicker.hideDatepicker()
- function with $(selector).datepicker('hide').
- Replace references to the $(selector).getDatepickerDate()
- function with $(selector).datepicker('getDate').
- Replace references to the $(selector).setDatepickerDate(...)
- function with $(selector).datepicker('setDate', ...).
-
-
For example, this old style code:
-
$('inputs').attachDatepicker (...);
-$('inputs').changeDatepicker (...);
-
becomes:
-
$('inputs').datepicker (...);
-$('inputs').datepicker('change', ...);
-
-
v3.2 to v3.4
-
To align the datepicker more closely with other jQuery UI components,
- further changes were made in v3.3, resulting in another compatibility module.
-
Users of v3.2 of the datepicker should use the following
- header code to work with their existing implementation:
-
<link rel="stylesheet" type="text/css" href="ui.datepicker.css "/>
-<script type="text/javascript" src="ui.datepicker.js "></script>
-<script type="text/javascript" src="ui.datepicker.compatibility-3.2.js "></script>
-
Download the ui.datepicker.compatibility-3.2.js module.
-
To migrate fully, the following steps need to be taken:
-
- Replace references to the $.datepicker.reconfigureFor(selector, ...)
- function with $(selector).datepicker('change', ...).
- Replace references to the $.datepicker.enableFor(selector)
- function with $(selector).datepicker('enable').
- Replace references to the $.datepicker.disableFor(selector)
- function with $(selector).datepicker('disable').
- Replace references to the $.datepicker.isDisabled(selector)
- function with $(selector).datepicker('isDisabled').
- Replace references to the $.datepicker.showFor(selector)
- function with $(selector).datepicker('show').
- Replace references to the $.datepicker.getDateFor(selector)
- function with $(selector).datepicker('getDate').
- Replace references to the $.datepicker.setDateFor(selector, ...)
- function with $(selector).datepicker('setDate', ...).
-
-
For example, this old style code:
-
$.datepicker.reconfigureFor ('inputs', {...});
-
becomes:
-
$('inputs').datepicker('change', {...});
-
-
v2.x to v3.3
-
The date picker has been refactored to better fit
- within the jQuery UI project.
- This has involved renaming the main function and some properties,
- resulting in current uses of the plugin no longer functioning correctly.
- To assist in the transition to the new format a compatibility
- plugin is also provided, allowing current code to continue
- to operate with minimal changes.
-
Existing users of v2 of the calendar should use the following
- header code to work with their existing implementation:
-
<link rel="stylesheet" type="text/css" href="ui.datepicker.css "/>
-<script type="text/javascript" src="ui.datepicker.js "></script>
-<script type="text/javascript" src="jquery-calendar-compatibility.js "></script>
-
Download the jquery-calendar-compatibility.js module.
-
To migrate fully, the following steps need to be taken:
-
- Replace references to the jquery-calendar*
- files with ui.datepicker*.
- Replace references to the popUpCal
- object with $.datepicker.
- Replace references to the calendar
- function with datepicker.
- Replace references to the autoPopUp
- setting with showOn.
- Replace references to the fieldSettings
- setting with beforeShow.
- Replace references to the customDate
- setting with beforeShowDay.
- Replace references to inline attributes with the cal:
- namespace with date:.
- Replace references to the hideCalendar
- function with hideDatepicker.
- Replace references to the dialogCalendar
- function with dialogDatepicker.
- Replace references to the $.datepicker.reconfigureFor(selector, ...)
- function with $(selector).datepicker('change', ...).
- Replace references to the $.datepicker.enableFor(selector)
- function with $(selector).datepicker('enable').
- Replace references to the $.datepicker.disableFor(selector)
- function with $(selector).datepicker('disable').
- Replace references to the $.datepicker.showFor(selector)
- function with $(selector).datepicker('show').
- Replace references to the $.datepicker.getDateFor(selector)
- function with $(selector).datepicker('getDate').
- Replace references to the $.datepicker.setDateFor(selector, ...)
- function with $(selector).datepicker('setDate', ...).
- Replace references to the calendar*
- CSS styles with datepicker*.
-
-
For example, this old style code:
-
$('inputs').calendar ({autoPopUp : 'both', fieldSettings : setDateRange,
- customDate : popUpCal .noWeekends});
-
-<input type="text" id="inlineConfig" cal: defaultDate="+7"/>
-
becomes:
-
$('inputs').datepicker ({showOn : 'both', beforeShow : setDateRange,
- beforeShowDay : $.datepicker .noWeekends});
-
-<input type="text" id="inlineConfig" date: defaultDate="+7"/>
-
-
Localization Packages
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/demos/functional/images/Thumbs.db b/demos/functional/images/Thumbs.db
new file mode 100644
index 000000000..378e981d2
Binary files /dev/null and b/demos/functional/images/Thumbs.db differ
diff --git a/demos/functional/images/ajax-loader.gif b/demos/functional/images/ajax-loader.gif
new file mode 100644
index 000000000..5a4f384a8
Binary files /dev/null and b/demos/functional/images/ajax-loader.gif differ
diff --git a/demos/functional/images/body_bg.jpg b/demos/functional/images/body_bg.jpg
new file mode 100644
index 000000000..0beed722f
Binary files /dev/null and b/demos/functional/images/body_bg.jpg differ
diff --git a/demos/functional/images/body_bg.png b/demos/functional/images/body_bg.png
new file mode 100644
index 000000000..2213c6ace
Binary files /dev/null and b/demos/functional/images/body_bg.png differ
diff --git a/demos/functional/images/content_bg.png b/demos/functional/images/content_bg.png
new file mode 100644
index 000000000..6cb278c7e
Binary files /dev/null and b/demos/functional/images/content_bg.png differ
diff --git a/demos/functional/images/content_body_bg.png b/demos/functional/images/content_body_bg.png
new file mode 100644
index 000000000..cca6d945f
Binary files /dev/null and b/demos/functional/images/content_body_bg.png differ
diff --git a/demos/functional/images/content_top_bg.png b/demos/functional/images/content_top_bg.png
new file mode 100644
index 000000000..1faf799e9
Binary files /dev/null and b/demos/functional/images/content_top_bg.png differ
diff --git a/demos/functional/images/dot.png b/demos/functional/images/dot.png
new file mode 100644
index 000000000..dfbcff237
Binary files /dev/null and b/demos/functional/images/dot.png differ
diff --git a/demos/functional/images/favicon.ico b/demos/functional/images/favicon.ico
new file mode 100644
index 000000000..77e3bd2dd
Binary files /dev/null and b/demos/functional/images/favicon.ico differ
diff --git a/demos/functional/images/footer_bg.png b/demos/functional/images/footer_bg.png
new file mode 100644
index 000000000..b96db440e
Binary files /dev/null and b/demos/functional/images/footer_bg.png differ
diff --git a/demos/functional/images/functional-demo-face.png b/demos/functional/images/functional-demo-face.png
new file mode 100644
index 000000000..cf21240a8
Binary files /dev/null and b/demos/functional/images/functional-demo-face.png differ
diff --git a/demos/functional/images/html_bg.png b/demos/functional/images/html_bg.png
new file mode 100644
index 000000000..e97e6042d
Binary files /dev/null and b/demos/functional/images/html_bg.png differ
diff --git a/demos/functional/images/icon_liferay.gif b/demos/functional/images/icon_liferay.gif
new file mode 100644
index 000000000..bfdf1d439
Binary files /dev/null and b/demos/functional/images/icon_liferay.gif differ
diff --git a/demos/functional/images/logo.gif b/demos/functional/images/logo.gif
new file mode 100644
index 000000000..a6cfb9745
Binary files /dev/null and b/demos/functional/images/logo.gif differ
diff --git a/demos/functional/index.html b/demos/functional/index.html
new file mode 100644
index 000000000..b5ccf8155
--- /dev/null
+++ b/demos/functional/index.html
@@ -0,0 +1,164 @@
+
+
+
+
jQuery UI - Functional demos
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/demos/functional/js/beautify.js b/demos/functional/js/beautify.js
new file mode 100644
index 000000000..6c6ef29b4
--- /dev/null
+++ b/demos/functional/js/beautify.js
@@ -0,0 +1,533 @@
+/*
+
+ JS Beautifier
+---------------
+ $Date: 2008-04-21 16:13:36 +0300 (Mon, 21 Apr 2008) $
+ $Revision: 53 $
+
+
+ Written by Einars "elfz" Lielmanis,
+ http://elfz.laacz.lv/beautify/
+
+ Originally converted to javascript by Vital,
+ http://my.opera.com/Vital/blog/2007/11/21/javascript-beautify-on-javascript-translated
+
+
+ You are free to use this in any way you want, in case you find this useful or working for you.
+
+ Usage:
+ js_beautify(js_source_text);
+
+*/
+
+
+function js_beautify(js_source_text, indent_size, indent_character)
+{
+
+ var input, output, token_text, last_type, last_text, last_word, current_mode, modes, indent_level, indent_string;
+ var whitespace, wordchar, punct, parser_pos, line_starters, in_case;
+ var prefix, token_type;
+
+ function print_newline(ignore_repeated)
+ {
+ ignore_repeated = typeof ignore_repeated === 'undefined' ? true: ignore_repeated;
+
+ // remove trailing whitespace and indent
+ while (output.length && (output[output.length - 1] === ' ' || output[output.length - 1] === indent_string)) {
+ output.pop();
+ }
+
+ if (!output.length) {
+ return; // no newline on start of file
+ }
+
+ if (output[output.length - 1] !== "\n" || !ignore_repeated) {
+ output.push("\n");
+ }
+ for (var i = 0; i < indent_level; i++) {
+ output.push(indent_string);
+ }
+ }
+
+
+
+ function print_space()
+ {
+ var last_output = output.length ? output[output.length - 1] : ' ';
+ if (last_output !== ' ' && last_output !== '\n' && last_output !== indent_string) { // prevent occassional duplicate space
+ output.push(' ');
+ }
+ }
+
+
+ function print_token()
+ {
+ output.push(token_text);
+ }
+
+ function indent()
+ {
+ indent_level++;
+ }
+
+
+ function unindent()
+ {
+ if (indent_level) {
+ indent_level--;
+ }
+ }
+
+
+ function remove_indent()
+ {
+ if (output.length && output[output.length - 1] === indent_string) {
+ output.pop();
+ }
+ }
+
+
+ function set_mode(mode)
+ {
+ modes.push(current_mode);
+ current_mode = mode;
+ }
+
+
+ function restore_mode()
+ {
+ current_mode = modes.pop();
+ }
+
+
+ function in_array(what, arr)
+ {
+ for (var i = 0; i < arr.length; i++)
+ {
+ if (arr[i] === what) {
+ return true;
+ }
+ }
+ return false;
+ }
+
+
+
+ function get_next_token()
+ {
+ var n_newlines = 0;
+ var c = '';
+
+ do {
+ if (parser_pos >= input.length) {
+ return ['', 'TK_EOF'];
+ }
+ c = input.charAt(parser_pos);
+
+ parser_pos += 1;
+ if (c === "\n") {
+ n_newlines += 1;
+ }
+ }
+ while (in_array(c, whitespace));
+
+ if (n_newlines > 1) {
+ for (var i = 0; i < 2; i++) {
+ print_newline(i === 0);
+ }
+ }
+ var wanted_newline = (n_newlines === 1);
+
+
+ if (in_array(c, wordchar)) {
+ if (parser_pos < input.length) {
+ while (in_array(input.charAt(parser_pos), wordchar)) {
+ c += input.charAt(parser_pos);
+ parser_pos += 1;
+ if (parser_pos === input.length) {
+ break;
+ }
+ }
+ }
+
+ // small and surprisingly unugly hack for 1E-10 representation
+ if (parser_pos !== input.length && c.match(/^[0-9]+[Ee]$/) && input.charAt(parser_pos) === '-') {
+ parser_pos += 1;
+
+ var t = get_next_token(parser_pos);
+ c += '-' + t[0];
+ return [c, 'TK_WORD'];
+ }
+
+ if (c === 'in') { // hack for 'in' operator
+ return [c, 'TK_OPERATOR'];
+ }
+ return [c, 'TK_WORD'];
+ }
+
+ if (c === '(' || c === '[') {
+ return [c, 'TK_START_EXPR'];
+ }
+
+ if (c === ')' || c === ']') {
+ return [c, 'TK_END_EXPR'];
+ }
+
+ if (c === '{') {
+ return [c, 'TK_START_BLOCK'];
+ }
+
+ if (c === '}') {
+ return [c, 'TK_END_BLOCK'];
+ }
+
+ if (c === ';') {
+ return [c, 'TK_END_COMMAND'];
+ }
+
+ if (c === '/') {
+ var comment = '';
+ // peek for comment /* ... */
+ if (input.charAt(parser_pos) === '*') {
+ parser_pos += 1;
+ if (parser_pos < input.length) {
+ while (! (input.charAt(parser_pos) === '*' && input.charAt(parser_pos + 1) && input.charAt(parser_pos + 1) === '/') && parser_pos < input.length) {
+ comment += input.charAt(parser_pos);
+ parser_pos += 1;
+ if (parser_pos >= input.length) {
+ break;
+ }
+ }
+ }
+ parser_pos += 2;
+ return ['/*' + comment + '*/', 'TK_BLOCK_COMMENT'];
+ }
+ // peek for comment // ...
+ if (input.charAt(parser_pos) === '/') {
+ comment = c;
+ while (input.charAt(parser_pos) !== "\x0d" && input.charAt(parser_pos) !== "\x0a") {
+ comment += input.charAt(parser_pos);
+ parser_pos += 1;
+ if (parser_pos >= input.length) {
+ break;
+ }
+ }
+ parser_pos += 1;
+ if (wanted_newline) {
+ print_newline();
+ }
+ return [comment, 'TK_COMMENT'];
+ }
+
+ }
+
+ if (c === "'" || // string
+ c === '"' || // string
+ (c === '/' &&
+ ((last_type === 'TK_WORD' && last_text === 'return') || (last_type === 'TK_START_EXPR' || last_type === 'TK_END_BLOCK' || last_type === 'TK_OPERATOR' || last_type === 'TK_EOF' || last_type === 'TK_END_COMMAND')))) { // regexp
+ var sep = c;
+ var esc = false;
+ c = '';
+
+ if (parser_pos < input.length) {
+
+ while (esc || input.charAt(parser_pos) !== sep) {
+ c += input.charAt(parser_pos);
+ if (!esc) {
+ esc = input.charAt(parser_pos) === '\\';
+ } else {
+ esc = false;
+ }
+ parser_pos += 1;
+ if (parser_pos >= input.length) {
+ break;
+ }
+ }
+
+ }
+
+ parser_pos += 1;
+ if (last_type === 'TK_END_COMMAND') {
+ print_newline();
+ }
+ return [sep + c + sep, 'TK_STRING'];
+ }
+
+ if (in_array(c, punct)) {
+ while (parser_pos < input.length && in_array(c + input.charAt(parser_pos), punct)) {
+ c += input.charAt(parser_pos);
+ parser_pos += 1;
+ if (parser_pos >= input.length) {
+ break;
+ }
+ }
+ return [c, 'TK_OPERATOR'];
+ }
+
+ return [c, 'TK_UNKNOWN'];
+ }
+
+
+ //----------------------------------
+
+ indent_character = indent_character || ' ';
+ indent_size = indent_size || 4;
+
+ indent_string = '';
+ while (indent_size--) {
+ indent_string += indent_character;
+ }
+
+ input = js_source_text;
+
+ last_word = ''; // last 'TK_WORD' passed
+ last_type = 'TK_START_EXPR'; // last token type
+ last_text = ''; // last token text
+ output = [];
+
+ whitespace = "\n\r\t ".split('');
+ wordchar = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789_$'.split('');
+ punct = '+ - * / % & ++ -- = += -= *= /= %= == === != !== > < >= <= >> << >>> >>>= >>= <<= && &= | || ! !! , : ? ^ ^= |='.split(' ');
+
+ // words which should always start on new line.
+ line_starters = 'continue,try,throw,return,var,if,switch,case,default,for,while,break,function'.split(',');
+
+ // states showing if we are currently in expression (i.e. "if" case) - 'EXPRESSION', or in usual block (like, procedure), 'BLOCK'.
+ // some formatting depends on that.
+ current_mode = 'BLOCK';
+ modes = [current_mode];
+
+ indent_level = 0;
+ parser_pos = 0; // parser position
+ in_case = false; // flag for parser that case/default has been processed, and next colon needs special attention
+ while (true) {
+ var t = get_next_token(parser_pos);
+ token_text = t[0];
+ token_type = t[1];
+ if (token_type === 'TK_EOF') {
+ break;
+ }
+
+ switch (token_type) {
+
+ case 'TK_START_EXPR':
+
+ set_mode('EXPRESSION');
+ if (last_type === 'TK_END_EXPR' || last_type === 'TK_START_EXPR') {
+ // do nothing on (( and )( and ][ and ]( ..
+ } else if (last_type !== 'TK_WORD' && last_type !== 'TK_OPERATOR') {
+ print_space();
+ } else if (in_array(last_word, line_starters) && last_word !== 'function') {
+ print_space();
+ }
+ print_token();
+ break;
+
+ case 'TK_END_EXPR':
+
+ print_token();
+ restore_mode();
+ break;
+
+ case 'TK_START_BLOCK':
+
+ set_mode('BLOCK');
+ if (last_type !== 'TK_OPERATOR' && last_type !== 'TK_START_EXPR') {
+ if (last_type === 'TK_START_BLOCK') {
+ print_newline();
+ } else {
+ print_space();
+ }
+ }
+ print_token();
+ indent();
+ break;
+
+ case 'TK_END_BLOCK':
+ if (last_type === 'TK_START_BLOCK') {
+ // nothing
+ unindent();
+ } else {
+ unindent();
+ print_newline();
+ }
+ print_token();
+ restore_mode();
+ break;
+
+ case 'TK_WORD':
+
+ if (token_text === 'case' || token_text === 'default') {
+ if (last_text === ':') {
+ // switch cases following one another
+ remove_indent();
+ } else {
+ // case statement starts in the same line where switch
+ unindent();
+ print_newline();
+ indent();
+ }
+ print_token();
+ in_case = true;
+ break;
+ }
+
+ prefix = 'NONE';
+ if (last_type === 'TK_END_BLOCK') {
+ if (!in_array(token_text.toLowerCase(), ['else', 'catch', 'finally'])) {
+ prefix = 'NEWLINE';
+ } else {
+ prefix = 'SPACE';
+ print_space();
+ }
+ } else if (last_type === 'TK_END_COMMAND' && current_mode === 'BLOCK') {
+ prefix = 'NEWLINE';
+ } else if (last_type === 'TK_END_COMMAND' && current_mode === 'EXPRESSION') {
+ prefix = 'SPACE';
+ } else if (last_type === 'TK_WORD') {
+ prefix = 'SPACE';
+ } else if (last_type === 'TK_START_BLOCK') {
+ prefix = 'NEWLINE';
+ } else if (last_type === 'TK_END_EXPR') {
+ print_space();
+ prefix = 'NEWLINE';
+ }
+
+ if (in_array(token_text, line_starters) || prefix === 'NEWLINE') {
+
+ if (last_text === 'else') {
+ // no need to force newline on else break
+ print_space();
+ } else if ((last_type === 'TK_START_EXPR' || last_text === '=') && token_text === 'function') {
+ // no need to force newline on 'function': (function
+ // DONOTHING
+ } else if (last_type === 'TK_WORD' && (last_text === 'return' || last_text === 'throw')) {
+ // no newline between 'return nnn'
+ print_space();
+ } else if (last_type !== 'TK_END_EXPR') {
+ if ((last_type !== 'TK_START_EXPR' || token_text !== 'var') && last_text !== ':') {
+ // no need to force newline on 'var': for (var x = 0...)
+ if (token_text === 'if' && last_type === 'TK_WORD' && last_word === 'else') {
+ // no newline for } else if {
+ print_space();
+ } else {
+ print_newline();
+ }
+ }
+ }
+ } else if (prefix === 'SPACE') {
+ print_space();
+ }
+ print_token();
+ last_word = token_text;
+ break;
+
+ case 'TK_END_COMMAND':
+
+ print_token();
+ break;
+
+ case 'TK_STRING':
+
+ if (last_type === 'TK_START_BLOCK' || last_type === 'TK_END_BLOCK') {
+ print_newline();
+ } else if (last_type === 'TK_WORD') {
+ print_space();
+ }
+ print_token();
+ break;
+
+ case 'TK_OPERATOR':
+
+ var start_delim = true;
+ var end_delim = true;
+
+ if (token_text === ':' && in_case) {
+ print_token(); // colon really asks for separate treatment
+ print_newline();
+ break;
+ }
+
+ in_case = false;
+
+ if (token_text === ',') {
+ if (last_type === 'TK_END_BLOCK') {
+ print_token();
+ print_newline();
+ } else {
+ if (current_mode === 'BLOCK') {
+ print_token();
+ print_newline();
+ } else {
+ print_token();
+ print_space();
+ }
+ }
+ break;
+ } else if (token_text === '--' || token_text === '++') { // unary operators special case
+ if (last_text === ';') {
+ // space for (;; ++i)
+ start_delim = true;
+ end_delim = false;
+ } else {
+ start_delim = false;
+ end_delim = false;
+ }
+ } else if (token_text === '!' && last_type === 'TK_START_EXPR') {
+ // special case handling: if (!a)
+ start_delim = false;
+ end_delim = false;
+ } else if (last_type === 'TK_OPERATOR') {
+ start_delim = false;
+ end_delim = false;
+ } else if (last_type === 'TK_END_EXPR') {
+ start_delim = true;
+ end_delim = true;
+ } else if (token_text === '.') {
+ // decimal digits or object.property
+ start_delim = false;
+ end_delim = false;
+
+ } else if (token_text === ':') {
+ // zz: xx
+ // can't differentiate ternary op, so for now it's a ? b: c; without space before colon
+ start_delim = false;
+ }
+ if (start_delim) {
+ print_space();
+ }
+
+ print_token();
+
+ if (end_delim) {
+ print_space();
+ }
+ break;
+
+ case 'TK_BLOCK_COMMENT':
+
+ print_newline();
+ print_token();
+ print_newline();
+ break;
+
+ case 'TK_COMMENT':
+
+ // print_newline();
+ print_space();
+ print_token();
+ print_newline();
+ break;
+
+ case 'TK_UNKNOWN':
+ print_token();
+ break;
+ }
+
+ last_type = token_type;
+ last_text = token_text;
+ }
+
+ return output.join('');
+
+}
diff --git a/demos/functional/js/behaviour.functionaldemos.js b/demos/functional/js/behaviour.functionaldemos.js
new file mode 100644
index 000000000..8e375db28
--- /dev/null
+++ b/demos/functional/js/behaviour.functionaldemos.js
@@ -0,0 +1,13 @@
+$(document).ready(function() {
+
+ $('.component-links a').click(function() {
+ var comp = $(this).attr('href').replace(/^#/, "");
+ loadDemo(comp);
+ });
+
+ // hash listener
+ if (location.hash) {
+ loadDemo(location.hash.replace(/^#/, ""));
+ }
+
+});
\ No newline at end of file
diff --git a/demos/functional/js/behaviour.js b/demos/functional/js/behaviour.js
new file mode 100644
index 000000000..2ac0305f7
--- /dev/null
+++ b/demos/functional/js/behaviour.js
@@ -0,0 +1,205 @@
+$(document).ready(function() {
+
+ // link demos
+
+ $(".demoflow div.wrapper").click(function() {
+
+ var demo = $(this).children('img').attr('_demo');
+
+ if (demo) {
+ location.href = '/repository/real-world/' + demo;
+ }else {
+ //alert('Under construction!');
+ }
+
+ });
+
+ if ($("div.demoflow").size()) {
+
+ var inst = new $.ui.carousel($("div.demoflow")[0], { height: 200, width: 310 });
+
+ $("div.demoflow-button-left, div.demoflow-button-right").bind("mousedown", function() {
+ var right = this.className.indexOf("right") == -1;
+ if(inst.autoRotator) window.clearInterval(inst.autoRotator);
+ inst.timer = window.setInterval(function() { inst.rotate(right ? "right" : null); }, 13);
+ })
+ .bind("mouseup", function() {
+ window.clearInterval(inst.timer);
+ });
+
+ $('.demoflow div.shadow').hover(function() {
+ this._lastopacity = $(this).css('opacity');
+ $(this).stop().animate({opacity: 0 }, 300);
+ }, function() {
+ $(this).stop().animate({opacity: this._lastopacity }, 300);
+ });
+
+
+ window.setTimeout(function() {
+ inst.element.animate({ opacity: 1 },2000); inst.rotate(0,2000,0.45);
+ window.setTimeout(function() {
+ inst.autoRotator = window.setInterval(function() { inst.rotate(0,2000,0.45); },5000);
+ },3000);
+ },0);
+
+ }
+
+ $('a').click(function(){
+ this.blur();
+ });
+
+ // smooth hover effects by DragonInteractive
+ var hover = hoverEffects();
+ hover.init();
+
+});
+
+ $.ui.carousel = function(element, options) {
+
+ this.element = $(element);
+ this.options = $.extend({}, options);
+ var self = this;
+
+ $.extend(this, {
+ start: Math.PI/2,
+ step: 2*Math.PI/$("> *", this.element).length,
+ radiusX: 400,
+ radiusY: -45,
+ paddingX: this.element.outerWidth() / 2,
+ paddingY: this.element.outerHeight() / 2
+ });
+
+ $("> *", this.element).css({ position: "absolute", top: 0, left: 0, zIndex: 1 });
+ this.rotate();
+ this.rotate("right");
+
+ this.element.parent().bind("mousewheel", function(e,delta) {
+ if(self.autoRotator) window.clearInterval(self.autoRotator);
+ self.rotate(delta < 0 ? "right" : "left");
+ return false;
+ });
+
+ };
+
+ $.ui.carousel.prototype.rotate = function(d,ani,speed) {
+
+ this.start = this.start + (d == "right" ? -(speed || 0.03) : (speed || 0.03));
+ var o = this.options;
+ var self = this;
+
+ setTimeout(function(){
+ $("> *", self.element).each(function(i) {
+ var angle = self.start + i * self.step;
+ var x = self.radiusX * Math.cos(angle);
+ var y = self.radiusY * Math.sin(angle);
+ var _self = this;
+
+ var width = o.width * ((self.radiusY+y) / (2 * self.radiusY));
+ width = (width * width * width) / (o.width * o.width); //This makes the pieces smaller
+ var height = parseInt(width * o.height / o.width);
+
+ //This is highly custom - it will hide the elements at the back
+ $(_self).css({ visibility: height < 30 ? "hidden" : "visible" });
+ if(height < 30 && !ani) return; //This imrpoves the speed, but cannot be used with animation
+
+
+ if(ani) {
+ $(_self).animate({
+ top: Math.round(self.paddingY + y - height/2) + "px",
+ left: Math.round(self.paddingX + x - width/2) + "px",
+ width: Math.round(width) + "px",
+ height: Math.round(height) + "px"
+ },{ duration: ani, easing: "easeOutQuad" });
+ $(_self).css({ zIndex: Math.round(parseInt(100 * (self.radiusY+y) / (2 * self.radiusY))) });
+ } else {
+ $(_self).css({
+ top: self.paddingY + y - height/2 + "px",
+ left: self.paddingX + x - width/2 + "px",
+ width: width + "px",
+ height: height + "px",
+ zIndex: parseInt(100 * (self.radiusY+y) / (2 * self.radiusY))
+ });
+ }
+
+ $("div.shadow",_self).css({ opacity: 1 - (width / o.width) });
+
+ });
+ }, 0);
+ }
+
+
+/**
+ * All credit here goes to DragonInteractive and Yuri Vishnevsky
+ */
+var hoverEffects = function() {
+ var me = this;
+ var args = arguments;
+ var self = {
+ c: {
+ navItems: '.download .click-to-download, #launch-pad .launch-pad-button, div.demoflow-button-left, div.demoflow-button-right',
+ navSpeed: ($.browser.safari ? 600: 350),
+ snOpeningSpeed: ($.browser.safari ? 400: 250),
+ snOpeningTimeout: 150,
+ snClosingSpeed: function() {
+ if (self.subnavHovered()) return 123450;
+ return 150
+ },
+ snClosingTimeout: 700
+ },
+ init: function() {
+ //$('.bg', this.c.navItems).css({
+ // 'opacity': 0
+ //});
+ this.initHoverFades()
+ },
+ subnavHovered: function() {
+ var hovered = false;
+ $(self.c.navItems).each(function() {
+ if (this.hovered) hovered = true
+ });
+ return hovered
+ },
+ initHoverFades: function() {
+ //$('#navigation .bg').css('opacity', 0);
+ $(self.c.navItems).hover(function() {
+ self.fadeNavIn.apply(this)
+ },
+ function() {
+ var el = this;
+ setTimeout(function() {
+ if (!el.open) self.fadeNavOut.apply(el)
+ },
+ 10)
+ })
+ },
+ fadeNavIn: function() {
+ $('.bg', this).stop().animate({
+ 'opacity': 1
+ },
+ self.c.navSpeed)
+ },
+ fadeNavOut: function() {
+ $('.bg', this).stop().animate({
+ 'opacity': 0
+ },
+ self.c.navSpeed)
+ },
+ initSubmenus: function() {
+ $(this.c.navItems).hover(function() {
+ $(self.c.navItems).not(this).each(function() {
+ self.fadeNavOut.apply(this);
+ });
+ this.hovered = true;
+ var el = this;
+ self.fadeNavIn.apply(el);
+ },
+ function() {
+ this.hovered = false;
+ var el = this;
+ if (!el.open) self.fadeNavOut.apply(el);
+ })
+ }
+ };
+
+ return self;
+};
\ No newline at end of file
diff --git a/demos/functional/js/chili-recipes.js b/demos/functional/js/chili-recipes.js
new file mode 100644
index 000000000..727ffa09c
--- /dev/null
+++ b/demos/functional/js/chili-recipes.js
@@ -0,0 +1,163 @@
+/*
+===============================================================================
+Chili is the jQuery code highlighter plugin
+...............................................................................
+ Copyright 2007 / Andrea Ercolino
+-------------------------------------------------------------------------------
+LICENSE: http://www.opensource.org/licenses/mit-license.php
+WEBSITE: http://noteslog.com/chili/
+===============================================================================
+*/
+
+/*
+this file shows how to configure a static setup
+it must be linked from the head of a page like:
+
+*/
+
+ChiliBook.recipeLoading = false;
+
+ChiliBook.recipes[ "jquery.js" ] =
+{
+ steps:
+ {
+ mlcom : { exp: /\/\*[^*]*\*+(?:[^\/][^*]*\*+)*\// }
+ , com : { exp: /\/\/.*/ }
+ , regexp : { exp: /\/[^\/\\\n]*(?:\\.[^\/\\\n]*)*\/[gim]*/ }
+ , string : { exp: /(?:\'[^\'\\\n]*(?:\\.[^\'\\\n]*)*\')|(?:\"[^\"\\\n]*(?:\\.[^\"\\\n]*)*\")/ }
+ , numbers : { exp: /\b[+-]?(?:\d*\.?\d+|\d+\.?\d*)(?:[eE][+-]?\d+)?\b/ }
+ , keywords: { exp: /\b(arguments|break|case|catch|continue|default|delete|do|else|false|for|function|if|in|instanceof|new|null|return|switch|this|true|try|typeof|var|void|while|with)\b/ }
+ , global : { exp: /\b(toString|valueOf|window|element|prototype|constructor|document|escape|unescape|parseInt|parseFloat|setTimeout|clearTimeout|setInterval|clearInterval|NaN|isNaN|Infinity)\b/ }
+
+ , "jquery utilities" : {
+ exp : /(?:\$\.browser|\$\.each|\$\.extend|\$\.grep|\$\.map|\$\.merge|\$\.trim)\b/
+ , replacement: '$$ $$ $$ $$ $$ $$ $$ $$ $$ $$ $$ 
Prev',
- nextText: 'Next 
'});
- $('#button3').click(function() {
- $(this).datepicker('dialog', $('#altDialog').val(),
- setAltDateFromDialog, {prompt: 'Choose a date', speed: '',
- prevText: '