diff options
Diffstat (limited to 'demos/functional/templates')
57 files changed, 0 insertions, 1739 deletions
diff --git a/demos/functional/templates/images/P1010020.JPG b/demos/functional/templates/images/P1010020.JPG Binary files differdeleted file mode 100644 index cba634588..000000000 --- a/demos/functional/templates/images/P1010020.JPG +++ /dev/null diff --git a/demos/functional/templates/images/P1010036.JPG b/demos/functional/templates/images/P1010036.JPG Binary files differdeleted file mode 100644 index 1d062b364..000000000 --- a/demos/functional/templates/images/P1010036.JPG +++ /dev/null diff --git a/demos/functional/templates/images/P1010039.JPG b/demos/functional/templates/images/P1010039.JPG Binary files differdeleted file mode 100644 index 2d0b6c726..000000000 --- a/demos/functional/templates/images/P1010039.JPG +++ /dev/null diff --git a/demos/functional/templates/images/P1010044.JPG b/demos/functional/templates/images/P1010044.JPG Binary files differdeleted file mode 100644 index 9d0cccf86..000000000 --- a/demos/functional/templates/images/P1010044.JPG +++ /dev/null diff --git a/demos/functional/templates/images/P1010050.JPG b/demos/functional/templates/images/P1010050.JPG Binary files differdeleted file mode 100644 index 89a36b78b..000000000 --- a/demos/functional/templates/images/P1010050.JPG +++ /dev/null diff --git a/demos/functional/templates/images/P1010055.JPG b/demos/functional/templates/images/P1010055.JPG Binary files differdeleted file mode 100644 index 889b4e67d..000000000 --- a/demos/functional/templates/images/P1010055.JPG +++ /dev/null diff --git a/demos/functional/templates/images/P1010058.JPG b/demos/functional/templates/images/P1010058.JPG Binary files differdeleted file mode 100644 index 6a83a628b..000000000 --- a/demos/functional/templates/images/P1010058.JPG +++ /dev/null diff --git a/demos/functional/templates/images/P1010059.JPG b/demos/functional/templates/images/P1010059.JPG Binary files differdeleted file mode 100644 index 6aac87261..000000000 --- a/demos/functional/templates/images/P1010059.JPG +++ /dev/null diff --git a/demos/functional/templates/images/P1010061.JPG b/demos/functional/templates/images/P1010061.JPG Binary files differdeleted file mode 100644 index bfe698e86..000000000 --- a/demos/functional/templates/images/P1010061.JPG +++ /dev/null diff --git a/demos/functional/templates/images/P1010063.JPG b/demos/functional/templates/images/P1010063.JPG Binary files differdeleted file mode 100644 index 88c22e021..000000000 --- a/demos/functional/templates/images/P1010063.JPG +++ /dev/null diff --git a/demos/functional/templates/images/ar.gif b/demos/functional/templates/images/ar.gif Binary files differdeleted file mode 100644 index f34c90f5c..000000000 --- a/demos/functional/templates/images/ar.gif +++ /dev/null diff --git a/demos/functional/templates/images/au.gif b/demos/functional/templates/images/au.gif Binary files differdeleted file mode 100644 index db005b4c7..000000000 --- a/demos/functional/templates/images/au.gif +++ /dev/null diff --git a/demos/functional/templates/images/br.gif b/demos/functional/templates/images/br.gif Binary files differdeleted file mode 100644 index 8b8bf147d..000000000 --- a/demos/functional/templates/images/br.gif +++ /dev/null diff --git a/demos/functional/templates/images/calendar.gif b/demos/functional/templates/images/calendar.gif Binary files differdeleted file mode 100644 index d0abaa7c0..000000000 --- a/demos/functional/templates/images/calendar.gif +++ /dev/null diff --git a/demos/functional/templates/images/clear.gif b/demos/functional/templates/images/clear.gif Binary files differdeleted file mode 100644 index 217608912..000000000 --- a/demos/functional/templates/images/clear.gif +++ /dev/null diff --git a/demos/functional/templates/images/close.gif b/demos/functional/templates/images/close.gif Binary files differdeleted file mode 100644 index 5710ebc44..000000000 --- a/demos/functional/templates/images/close.gif +++ /dev/null diff --git a/demos/functional/templates/images/cn.gif b/demos/functional/templates/images/cn.gif Binary files differdeleted file mode 100644 index 5482753d6..000000000 --- a/demos/functional/templates/images/cn.gif +++ /dev/null diff --git a/demos/functional/templates/images/id.gif b/demos/functional/templates/images/id.gif Binary files differdeleted file mode 100644 index d7f4ab8a3..000000000 --- a/demos/functional/templates/images/id.gif +++ /dev/null diff --git a/demos/functional/templates/images/ie.gif b/demos/functional/templates/images/ie.gif Binary files differdeleted file mode 100644 index 827c498d2..000000000 --- a/demos/functional/templates/images/ie.gif +++ /dev/null diff --git a/demos/functional/templates/images/ke.gif b/demos/functional/templates/images/ke.gif Binary files differdeleted file mode 100644 index e352177c7..000000000 --- a/demos/functional/templates/images/ke.gif +++ /dev/null diff --git a/demos/functional/templates/images/lb.gif b/demos/functional/templates/images/lb.gif Binary files differdeleted file mode 100644 index f204918fe..000000000 --- a/demos/functional/templates/images/lb.gif +++ /dev/null diff --git a/demos/functional/templates/images/next.gif b/demos/functional/templates/images/next.gif Binary files differdeleted file mode 100644 index 6058cb0c7..000000000 --- a/demos/functional/templates/images/next.gif +++ /dev/null diff --git a/demos/functional/templates/images/nz.gif b/demos/functional/templates/images/nz.gif Binary files differdeleted file mode 100644 index 86b89cb27..000000000 --- a/demos/functional/templates/images/nz.gif +++ /dev/null diff --git a/demos/functional/templates/images/prev.gif b/demos/functional/templates/images/prev.gif Binary files differdeleted file mode 100644 index ee630975b..000000000 --- a/demos/functional/templates/images/prev.gif +++ /dev/null diff --git a/demos/functional/templates/images/puppy.jpg b/demos/functional/templates/images/puppy.jpg Binary files differdeleted file mode 100644 index df6db4e9b..000000000 --- a/demos/functional/templates/images/puppy.jpg +++ /dev/null diff --git a/demos/functional/templates/images/se.gif b/demos/functional/templates/images/se.gif Binary files differdeleted file mode 100644 index 7301c598e..000000000 --- a/demos/functional/templates/images/se.gif +++ /dev/null diff --git a/demos/functional/templates/images/target.jpeg b/demos/functional/templates/images/target.jpeg Binary files differdeleted file mode 100644 index a433b1e30..000000000 --- a/demos/functional/templates/images/target.jpeg +++ /dev/null diff --git a/demos/functional/templates/images/us.gif b/demos/functional/templates/images/us.gif Binary files differdeleted file mode 100644 index 39c472e26..000000000 --- a/demos/functional/templates/images/us.gif +++ /dev/null diff --git a/demos/functional/templates/images/white.gif b/demos/functional/templates/images/white.gif Binary files differdeleted file mode 100644 index b4b40edda..000000000 --- a/demos/functional/templates/images/white.gif +++ /dev/null diff --git a/demos/functional/templates/images/za.gif b/demos/functional/templates/images/za.gif Binary files differdeleted file mode 100644 index 197cbd888..000000000 --- a/demos/functional/templates/images/za.gif +++ /dev/null diff --git a/demos/functional/templates/ui.accordion.data.html b/demos/functional/templates/ui.accordion.data.html deleted file mode 100644 index aa2f77157..000000000 --- a/demos/functional/templates/ui.accordion.data.html +++ /dev/null @@ -1,23 +0,0 @@ -<ul id="accordionDemo" style="width: 200px; height: 450px;"> - <li class="ui-accordion-group"> - <h3 class="ui-accordion-header"> - <a href='#'>Test 1</a> - </h3> - <div class="ui-accordion-data">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. - </div> - </li> - <li class="ui-accordion-group"> - <h3 class="ui-accordion-header"> - <a href='#'>Test 2</a> - </h3> - <div class="ui-accordion-data">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - </div> - </li> - <li class="ui-accordion-group"> - <h3 class="ui-accordion-header"> - <a href='#'>Test 3</a> - </h3> - <div class="ui-accordion-data">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. - </div> - </li> -</ul>
\ No newline at end of file diff --git a/demos/functional/templates/ui.accordion.html b/demos/functional/templates/ui.accordion.html deleted file mode 100644 index ad3374c62..000000000 --- a/demos/functional/templates/ui.accordion.html +++ /dev/null @@ -1,33 +0,0 @@ -<script type="text/javascript"> - - var model = { - - renderAt: '#containerDemo', - - title: 'Accordion Demos', - - desc: 'Simple accordion', - - demos: [ - - { - title: 'Simple accordion', - html: { url: 'templates/ui.accordion.data.html' }, - destroy: '$("#accordionDemo").accordion("destroy");', - - options: [ - { desc: 'Simple Accordion Mouse over', source: '$("#accordionDemo").accordion({event: "mouseover", header:".ui-accordion-header"});' }, - { desc: 'Simple Accordion', source: '$("#accordionDemo").accordion({ header: ".ui-accordion-header"});' } - ] - } - ] - - }; - - $(function(){ - - uiRenderDemo(model); - - }); - -</script>
\ No newline at end of file diff --git a/demos/functional/templates/ui.datepicker.dbd.html b/demos/functional/templates/ui.datepicker.dbd.html deleted file mode 100644 index e686b3d25..000000000 --- a/demos/functional/templates/ui.datepicker.dbd.html +++ /dev/null @@ -1,40 +0,0 @@ -<input type="text" size="10" value="" id="dayByDay"/> -<style type="text/css"> -.ar_day { color: white !important; background: #eee url(templates/images/ar.gif) no-repeat center !important; } -.au_day { color: blue !important; background: #eee url(templates/images/au.gif) no-repeat center !important; } -.br_day { color: green !important; background: #eee url(templates/images/br.gif) no-repeat center !important; } -.cn_day { color: red !important; background: #eee url(templates/images/cn.gif) no-repeat center !important; } -.id_day { color: white !important; background: #eee url(templates/images/id.gif) no-repeat center !important; } -.ie_day { color: white !important; background: #eee url(templates/images/ie.gif) no-repeat center !important; } -.ke_day { color: red !important; background: #eee url(templates/images/ke.gif) no-repeat center !important; } -.lb_day { color: white !important; background: #eee url(templates/images/lb.gif) no-repeat center !important; } -.nz_day { color: blue !important; background: #eee url(templates/images/nz.gif) no-repeat center !important; } -.se_day { color: blue !important; background: #eee url(templates/images/se.gif) no-repeat center !important; } -.us_day { color: white !important; background: #eee url(templates/images/us.gif) no-repeat center !important; } -.za_day { color: green !important; background: #eee url(templates/images/za.gif) no-repeat center !important; } -</style> -<script type="text/javascript"> -var natDays = [[1, 26, "au"], [2, 6, "nz"], [3, 17, "ie"], [4, 27, "za"], [5, 25, "ar"], [6, 6, "se"], - [7, 4, "us"], [8, 17, "id"], [9, 7, "br"], [10, 1, "cn"], [11, 22, "lb"], [12, 12, "ke"]]; - -function nationalDays(date) { - for (i = 0; i < natDays.length; i++) { - if (date.getMonth() == natDays[i][0] - 1 && date.getDate() == natDays[i][1]) { - return [false, natDays[i][2] + "_day"]; - } - } - return [true, ""]; -} - -function highlightToday(date, inst) { - var today = new Date(); - today = new Date(today.getFullYear(), today.getMonth(), today.getDate()); - return $.datepicker.dateStatus(date, inst) + - (today.getTime() == date.getTime() ? " (today)" : ""); -} - -function showDayOfYear(date) { - var lastYearEnd = new Date(date.getFullYear() - 1, 12 - 1, 31, 0, 0, 0, 0); - return [true, "", "Day " + ((date.getTime() - lastYearEnd.getTime()) / 86400000) + " of the year"]; -} -</script>
\ No newline at end of file diff --git a/demos/functional/templates/ui.datepicker.dlg.html b/demos/functional/templates/ui.datepicker.dlg.html deleted file mode 100644 index fe82c181b..000000000 --- a/demos/functional/templates/ui.datepicker.dlg.html +++ /dev/null @@ -1,6 +0,0 @@ -<input type="text" size="10" value="" id="dialog" readonly="readonly"/> <button id="dialogButton" type="button">Open dialog</button> -<script type="text/javascript"> -function setDateFromDialog(date) { - $("#dialog").val(date); -} -</script>
\ No newline at end of file diff --git a/demos/functional/templates/ui.datepicker.html b/demos/functional/templates/ui.datepicker.html deleted file mode 100644 index ece1cfe69..000000000 --- a/demos/functional/templates/ui.datepicker.html +++ /dev/null @@ -1,415 +0,0 @@ -<script type="text/javascript"> -// Prepare to show a date picker linked to three select controls -function readLinked() { - $("#linkedDates").val($("#selectMonth").val() + "/" + - $("#selectDay").val() + "/" + $("#selectYear").val()); - return {}; -} - -// Update three select controls to match a date picker selection -function updateLinked(date) { - $("#selectMonth").val(date.substring(0, 2)); - $("#selectDay").val(date.substring(3, 5)); - $("#selectYear").val(date.substring(6, 10)); -} - -// Prevent selection of invalid dates through the select controls -function checkLinkedDays() { - var daysInMonth = 32 - new Date($("#selectYear").val(), - $("#selectMonth").val() - 1, 32).getDate(); - $("#selectDay option").attr("disabled", ""); - $("#selectDay option:gt(" + (daysInMonth - 1) +")").attr("disabled", "disabled"); - if ($("#selectDay").val() > daysInMonth) { - $("#selectDay").val(daysInMonth); - } -} -function customRange(input) { - return {minDate: (input.id == "endDate" ? $("#startDate").datepicker("getDate") : null), - maxDate: (input.id == "startDate" ? $("#endDate").datepicker("getDate") : null)}; -} -</script> - -<script type="text/javascript"> - - var model = { - - renderAt: '#containerDemo', - - title: 'Datepicker Demos', - - demos: [ - - { - title: 'Datepicker Basics', - desc: 'A datepicker can easily be added to an input field with default settings:' + - '<ul style="list-style: disc; padding-left: 2em;"><li>Datepicker appears on focus</li>' + - '<li>Text is in English</li>' + - '<li>Date format is mm/dd/yyyy</li>' + - '<li>Clear/Close controls show at the top</li>' + - '<li>Month and year are selectable directly</li>' + - '<li>10 years before and after the current year are shown</li>' + - '<li>Show a single month</li>' + - '<li>Select a single date</li>' + - '<li>Week starts on Sunday</li>' + - '<li>Day names are clickable to change the first day of the week</li>' + - '<li>Days in other months are not displayed</li>' + - '<li>No date restrictions</li>' + - '<li>Clicking elsewhere closes the date picker</li></ul>', - html: '<input type="text" size="10" value="click here" id="basics"/>\n' + - '<style type="text/css">.embed + img { position: relative; left: -21px; top: -1px; }</style>', - destroy: '$("#basics").removeClass("embed").datepicker("enable").datepicker("destroy");', - - options: [ - { desc: 'Default datepicker - open on focus', source: '$("#basics").datepicker();' }, - { desc: 'Open on button only', source: '$("#basics").datepicker({showOn: "button"});' }, - { desc: 'Open on image button only', source: '$("#basics").datepicker({showOn: "button", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'Open on focus or button', source: '$("#basics").datepicker({showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'Embed the button in the input (with CSS)', source: '$("#basics").datepicker({showOn: "button", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}).addClass("embed");' }, - { desc: 'Disabled datepicker', source: '$("#basics").datepicker({showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}).datepicker("disable");' } - ] - }, - - { - title: 'Keystrokes', - desc: 'You can use the keyboard to enter dates and to control the datepicker:' + - '<ul style="list-style: disc; padding-left: 2em;"><li>page up/down - previous/next month (based on <i>stepMonths</i>)</li>' + - '<li>ctrl+page up/down - previous/next year (based on <i>stepBigMonths</i>)</li>' + - '<li>ctrl+home - current month or open when closed</li>' + - '<li>ctrl+left/right - previous/next day</li>' + - '<li>ctrl+up/down - previous/next week</li>' + - '<li>enter - accept the selected date</li>' + - '<li>ctrl+end - close and erase the date</li>' + - '<li>escape - close the datepicker without selection</li></ul>', - html: '<input type="text" size="10" value="" id="keys"/>', - destroy: '$("#keys").removeAttr("readonly").datepicker("destroy");', - - options: [ - { desc: 'Default datepicker', source: '$("#keys").datepicker({showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'Readonly input', source: '$("#keys").datepicker({showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}).attr("readonly", "readonly");' } - ] - }, - - { - title: 'Restricting Datepicker', - desc: 'A datepicker can have its basic functionality restricted in various ways.', - html: '<input type="text" size="10" value="" id="restricting"/>', - destroy: '$("#restricting").datepicker("destroy");', - - options: [ - { desc: 'First day of week is Monday and can\'t change it', source: '$("#restricting").datepicker({firstDay: 1, changeFirstDay: false, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'Can\'t change month/year from dropdowns', source: '$("#restricting").datepicker({changeMonth: false, changeYear: false, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'Year dropdown shows last 20 years', source: '$("#restricting").datepicker({yearRange: "-20:+0", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'Year dropdown shows 2000 to 2010', source: '$("#restricting").datepicker({yearRange: "2000:2010", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'Dates from Jan 26 2005 to Jan 26 2007 only', source: '$("#restricting").datepicker({minDate: new Date(2005, 1 - 1, 26), maxDate: new Date(2007, 1 - 1, 26), showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'Dates within the next 365 days only', source: '$("#restricting").datepicker({minDate: 0, maxDate: 365, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'Dates from yesterday to 6 years away only', source: '$("#restricting").datepicker({minDate: "-1d", maxDate: "6y", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' } - ] - }, - - { - title: 'Date Formats', - desc: 'A datepicker can display its value in numerous formats, with the default being "mm/dd/yy". ' + - 'The formatting codes are:' + - '<ul style="list-style: disc; padding-left: 2em;"><li>d - day of month (no leading zero)</li>' + - '<li>dd - day of month (two digit)</li>' + - '<li>D - day name short</li>' + - '<li>DD - day name long</li>' + - '<li>m - month of year (no leading zero)</li>' + - '<li>mm - month of year (two digit)</li>' + - '<li>M - month name short</li>' + - '<li>MM - month name long</li>' + - '<li>y - year (two digit)</li>' + - '<li>yy - year (four digit)</li>' + - '<li>@ - Unix timestamp (ms since 01/01/1970)</li>' + - '<li>\'...\' - literal text</li>' + - '<li>\'\' - single quote</li></ul>', - html: '<input type="text" size="30" value="" id="formatted"/>', - destroy: '$("#formatted").datepicker("destroy");', - - options: [ - { desc: 'Medium format', source: '$("#formatted").datepicker({dateFormat: "M d, yy", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'Long format', source: '$("#formatted").datepicker({dateFormat: "MM d, yy", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'Full format', source: '$("#formatted").datepicker({dateFormat: "DD, MM d, yy", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'French full format', source: '$("#formatted").datepicker($.extend({}, $.datepicker.regional["fr"], {dateFormat: "DD, MM d, yy", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));' }, - { desc: 'With no century', source: '$("#formatted").datepicker({dateFormat: "dd/mm/y", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'ATOM format (ISO 8601)', source: '$("#formatted").datepicker({dateFormat: $.datepicker.ATOM, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'Cookie format', source: '$("#formatted").datepicker({dateFormat: $.datepicker.COOKIE, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'ISO 8601 format', source: '$("#formatted").datepicker({dateFormat: $.datepicker.ISO_8601, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'RFC 822 format', source: '$("#formatted").datepicker({dateFormat: $.datepicker.RFC_822, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'RFC 850 format', source: '$("#formatted").datepicker({dateFormat: $.datepicker.RFC_850, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'RFC 1026 format', source: '$("#formatted").datepicker({dateFormat: $.datepicker.RFC_1036, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'RFC 1123 format', source: '$("#formatted").datepicker({dateFormat: $.datepicker.RFC_1123, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'RFC 2822 format', source: '$("#formatted").datepicker({dateFormat: $.datepicker.RFC_2822, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'RSS format (RFC 822)', source: '$("#formatted").datepicker({dateFormat: $.datepicker.RSS, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'Timestamp format (ms since 01/01/1970)', source: '$("#formatted").datepicker({dateFormat: $.datepicker.TIMESTAMP, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'W3C format (ISO 8601)', source: '$("#formatted").datepicker({dateFormat: $.datepicker.W3C, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' } - ] - }, - - { - title: 'Day-by-day Modifications', - desc: 'You have several mechanisms for modifying the datepicker\'s appearance on a day-by-day basis.', - html: { url: 'templates/ui.datepicker.dbd.html' }, - destroy: '$("#dayByDay").datepicker("destroy");', - - options: [ - { desc: 'Weekends are not selectable', source: '$("#dayByDay").datepicker({beforeShowDay: $.datepicker.noWeekends, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'Highlight some national days (via CSS)', source: '$("#dayByDay").datepicker({beforeShowDay: nationalDays, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'Show day of year as cell title', source: '$("#dayByDay").datepicker({beforeShowDay: showDayOfYear, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'Customise status line for today', source: '$("#dayByDay").datepicker({showStatus: true, statusForDate: highlightToday, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' } - ] - }, - - { - title: 'Date Ranges', - desc: 'Choose a range of dates instead of a single one by clicking firstly on the starting date, then on the ending date.', - html: '<input type="text" size="24" value="" id="ranges"/>', - destroy: '$("#ranges").datepicker("destroy");', - - options: [ - { desc: 'Range select with a single month', source: '$("#ranges").datepicker({rangeSelect: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'Range select showing two months', source: '$("#ranges").datepicker({rangeSelect: true, numberOfMonths: 2, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'Range select showing six months (moving three at a time)', source: '$("#ranges").datepicker({rangeSelect: true, numberOfMonths: [2, 3], stepMonths: 3, prevText: "<< Previous Months", nextText: "Next Months >>", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'Range select excluding weekends', source: '$("#ranges").datepicker({rangeSelect: true, numberOfMonths: 2, beforeShowDay: $.datepicker.noWeekends, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'Range select with min/max settings', source: '$("#ranges").datepicker({rangeSelect: true, numberOfMonths: 2, minDate: "6w", maxDate: "2y", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' } - ] - }, - - { - title: 'Another Date Range', - desc: 'Synchronise two datepickers to together select a date range.', - html: { url: 'templates/ui.datepicker.two.html' }, - destroy: '$("#startDate,#endDate").datepicker("destroy");', - - options: [ - { desc: 'Range select with two datepickers', source: '$("#startDate,#endDate").datepicker({beforeShow: customRange, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' } - ] - }, - - { - title: 'Inline Datepicker', - desc: 'A datepicker can also be shown inline, rather than popping-up, by targetting a division instead of an input field. ' + - 'Use the <i>onSelect</i> callback to be notified of date selections.', - html: { url: 'templates/ui.datepicker.inl.html' }, - destroy: '$("#inline").datepicker("destroy");$("#altInline").unbind("keyup");', - - options: [ - { desc: 'Single month inline', source: '$("#inline").datepicker({onSelect: function(date) { alert("The chosen date is " + date); }});$("#altInline").hide();' }, - { desc: 'Range select inline', source: '$("#inline").datepicker({rangeSelect: true, onSelect: function(date) { alert("The chosen dates are " + date); }});$("#altInline").hide();' }, - { desc: 'Range select showing two months inline', source: '$("#inline").datepicker({rangeSelect: true, numberOfMonths: 2});$("#altInline").hide();' }, - { desc: 'Highlight some national days (via CSS)', source: '$("#inline").datepicker({beforeShowDay: nationalDays});$("#altInline").hide();' }, - { desc: 'Inline linked to an input field', source: '$("#inline").datepicker({altField: "#altInline", altFormat: "mm/dd/yy"});$("#altInline").show().keyup(setInlineDate);' }, - { desc: 'Disabled inline', source: '$("#inline").datepicker().datepicker("disable");$("#altInline").hide();' } - ] - }, - - { - title: 'Datepicker in a Dialog', - desc: 'A datepicker can also be opened within a "dialog" box.', - html: { url: 'templates/ui.datepicker.dlg.html' }, - destroy: '', - - options: [ - { desc: 'Open in a dialog', source: '$("#dialogButton").click(function() { $(this).datepicker("dialog", $("#dialog").val(), setDateFromDialog, {prompt: "Choose a date", duration: ""}); return false; });' } - ] - }, - - { - title: 'Datepicker Linked to Dropdowns', - desc: 'With a bit of wiring code, you can link the datepicker with three dropdowns for date selection.', - html: { url: 'templates/ui.datepicker.sel.html' }, - destroy: '', - - options: [ - { desc: 'Linked to dropdowns', source: '$("#linkedDates").datepicker({minDate: new Date(2001, 1 - 1, 1), maxDate: new Date(2010, 12 - 1, 31), beforeShow: readLinked, onSelect: updateLinked, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}); $("#selectMonth, #selectYear").change(checkLinkedDays);' } - ] - }, - - { - title: 'Callbacks', - desc: 'Custom functions may be invoked when certain events occur within the datepicker.', - html: '<input type="text" size="24" value="" id="callbacks"/>', - destroy: '$("#callbacks").datepicker("destroy");', - - options: [ - { desc: 'On select', source: '$("#callbacks").datepicker({onSelect: function(date) { alert("The chosen date is " + date); }, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'On close', source: '$("#callbacks").datepicker({onClose: function(date) { alert("Closed with date " + date); }, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'On change of month/year', source: '$("#callbacks").datepicker({onChangeMonthYear: function(year, month) { alert("Moved to month " + month + "/" + year); }, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'On select for range', source: '$("#callbacks").datepicker({onSelect: function(date) { alert("The chosen dates are " + date); }, rangeSelect: true, numberOfMonths: 2, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'On close for range', source: '$("#callbacks").datepicker({onClose: function(date) { alert("Closed with dates " + date); }, rangeSelect: true, numberOfMonths: 2, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'On change of month/year for range', source: '$("#callbacks").datepicker({onChangeMonthYear: function(year, month) { alert("Moved to month " + month + "/" + year); }, rangeSelect: true, numberOfMonths: 2, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' } - ] - }, - - { - title: 'Alternate Field and Format', - desc: 'Simultaneously update an alternate field using an alternate date format. ' + - 'This could be used to display selected dates in one format, while submitting ' + - 'the dates in another format from a hidden field. The alternate field is ' + - 'displayed here to demonstrate the functionality.', - html: '<input type="text" size="24" value="" id="alt1" readonly="readonly"/>\n' + - '<input type="text" size="24" value="" id="alt2" readonly="readonly"/>', - destroy: '$("#alt1").datepicker("destroy"); $("#alt2").val("");', - - options: [ - { desc: 'Single date selection', source: '$("#alt1").datepicker({altField: "#alt2", altFormat: "yy-mm-dd", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'Range date selection', source: '$("#alt1").datepicker({altField: "#alt2", altFormat: "yy-mm-dd", rangeSelect: true, numberOfMonths: 2, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' } - ] - }, - - { - title: 'Default Date', - desc: 'Control which date is shown if the datepicker is opened with no value. The default is today.', - html: '<input type="text" size="10" value="" id="defaultDate"/>', - destroy: '$("#defaultDate").datepicker("destroy");', - - options: [ - { desc: 'Specific date - January 1, 2007', source: '$("#defaultDate").datepicker({defaultDate: new Date(2007, 1 - 1, 1), showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'Relative date - 7 days from today', source: '$("#defaultDate").datepicker({defaultDate: +7, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'Relative date - 2 weeks from today', source: '$("#defaultDate").datepicker({defaultDate: "+2w", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'Relative date - 10 days and 1 month from today', source: '$("#defaultDate").datepicker({defaultDate: "+10 D +1 M", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' } - ] - }, - - { - title: 'Miscellaneous', - desc: 'There are many other miscellaneous settings you can apply.', - html: '<input type="text" size="10" value="" id="misc"/>', - destroy: '$("#misc").datepicker("destroy");', - - options: [ - { desc: 'Append text to the datepicker', source: '$("#misc").datepicker({appendText: "(format mm/dd/yyyy)", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'Show controls as images', source: '$("#misc").datepicker({clearText: "<img src=\'templates/images/clear.gif\'>", closeText: "<img src=\'templates/images/close.gif\'>", prevText: "<img src=\'templates/images/prev.gif\'>", currentText: "<img src=\'templates/images/calendar.gif\'>", nextText: "<img src=\'templates/images/next.gif\'>", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'Move Clear/Close controls to the bottom', source: '$("#misc").datepicker({closeAtTop: false, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'Make the datepicker mandatory (no Clear)', source: '$("#misc").datepicker({mandatory: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'Show big Prev/Next links', source: '$("#misc").datepicker({showBigPrevNext: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'Show big Prev/Next links moving 6 months', source: '$("#misc").datepicker({showBigPrevNext: true, stepBigMonths: 6, prevText: "<", prevBigText: "<6M", nextText: ">", nextBigText: "6M>", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'Hide Prev/Next links if not applicable', source: '$("#misc").datepicker({hideIfNoPrevNext: true, minDate: new Date(2008, 1 - 1, 26), maxDate: new Date(2008, 3 - 1, 26), showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'Prev/Today/Next links as date formats', source: '$("#misc").datepicker({navigationAsDateFormat: true, prevText: "<M", currentText: "M y", nextText: "M>", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'Prev/Today/Next links as date formats in French', source: '$("#misc").datepicker($.extend({}, $.datepicker.regional["fr"], {navigationAsDateFormat: true, prevText: "<MM", currentText: "MM yy", nextText: "MM>", numberOfMonths: 2, stepMonths: 2, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));' }, - { desc: 'Today link goes to current selection', source: '$("#misc").datepicker({gotoCurrent: true, currentText: "Current", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'Show the month select after the year one', source: '$("#misc").datepicker({showMonthAfterYear: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'Highlight the hovered week', source: '$("#misc").datepicker({highlightWeek: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'Show days from other months', source: '$("#misc").datepicker({showOtherMonths: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'Show week of the year (ISO 8601)', source: '$("#misc").datepicker({showWeeks: true, firstDay: 1, changeFirstDay: false, showOtherMonths: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'Show a status bar with more explanation', source: '$("#misc").datepicker({showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'Show three months at a time', source: '$("#misc").datepicker({numberOfMonths: 3, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'Show three months with current in the middle', source: '$("#misc").datepicker({numberOfMonths: 3, showCurrentAtPos: 1, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'Show three months ending at current one', source: '$("#misc").datepicker({numberOfMonths: 3, showCurrentAtPos: 2, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' } - ] - }, - - { - title: 'Inline Configuration', - desc: 'You can configure each input field inline by adding attributes with the same name '+ - 'as the datepicker settings and a "date:" prefix.', - html: '<input type="text" size="10" value="" id="config" \n' + - 'date:closeAtTop="false" date:firstDay="1" date:appendText="(pick a date)"/>', - destroy: '$("#config").datepicker("destroy");', - - options: [ - { desc: 'Inline configuration - see source', source: '$("#config").datepicker({showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' } - ] - }, - - { - title: 'Animations', - desc: 'You can control how the datepicker appears - both its style and duration. The default is a medium duration animation expanding from the top-left (show).', - html: '<input type="text" size="10" value="" id="anim"/>', - destroy: '$("#anim").datepicker("destroy");', - - options: [ - { desc: 'Show at slow duration', source: '$("#anim").datepicker({duration: "slow", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'Show at normal duration (default)', source: '$("#anim").datepicker({duration: "normal", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'Show at fast duration', source: '$("#anim").datepicker({duration: "fast", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'Show immediately', source: '$("#anim").datepicker({duration: "", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'Fade in at normal duration', source: '$("#anim").datepicker({showAnim: "fadeIn", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'Slide down at slow duration', source: '$("#anim").datepicker({showAnim: "slideDown", duration: "slow", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'Blind horizontally', source: '$("#anim").datepicker({showAnim: "blind", showOptions: {direction: "horizontal"}, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'Blind vertically', source: '$("#anim").datepicker({showAnim: "blind", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'Clip horizontally', source: '$("#anim").datepicker({showAnim: "clip", showOptions: {direction: "horizontal"}, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'Clip vertically', source: '$("#anim").datepicker({showAnim: "clip", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'Drop up', source: '$("#anim").datepicker({showAnim: "drop", showOptions: {direction: "up"}, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'Drop down', source: '$("#anim").datepicker({showAnim: "drop", showOptions: {direction: "down"}, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'Drop left', source: '$("#anim").datepicker({showAnim: "drop", showOptions: {direction: "left"}, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'Drop right', source: '$("#anim").datepicker({showAnim: "drop", showOptions: {direction: "right"}, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'Explode (2 secs duration)', source: '$("#anim").datepicker({showAnim: "explode", duration: 2000, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'Fold', source: '$("#anim").datepicker({showAnim: "fold", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'Puff', source: '$("#anim").datepicker({showAnim: "puff", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'Scale to center', source: '$("#anim").datepicker({showAnim: "scale", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'Scale to top-left', source: '$("#anim").datepicker({showAnim: "scale", showOptions: {origin: ["top", "left"]}, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'Slide up', source: '$("#anim").datepicker({showAnim: "slide", showOptions: {direction: "up"}, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'Slide down', source: '$("#anim").datepicker({showAnim: "slide", showOptions: {direction: "down"}, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'Slide left', source: '$("#anim").datepicker({showAnim: "slide", showOptions: {direction: "left"}, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }, - { desc: 'Slide right', source: '$("#anim").datepicker({showAnim: "slide", showOptions: {direction: "right"}, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' } - ] - }, - - { - title: 'International Datepickers', - desc: 'Numerous international packs are available for the datepicker.', - html: '<input type="text" size="10" value="" id="i18n"/> thanks to <span id="contrib"></span>', - destroy: '$("#i18n").datepicker("destroy");', - - options: [ - { desc: 'Bahasa Indonesia (Indonesian)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["id"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Deden Fathurahman");' }, - { desc: 'български език (Bulgarian)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["bg"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Stoyan Kyosev");' }, - { desc: 'Català (Catalan)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["ca"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Joan Leon");' }, - { desc: 'Čeština (Czech)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["cs"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Tomas Muller");' }, - { desc: 'Dansk (Danish)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["da"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Jan Christensen");' }, - { desc: 'Deutsch (German)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["de"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Milian Wolff");' }, - { desc: 'Español (Spanish)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["es"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Vester");' }, - { desc: 'Esperanto', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["eo"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Olivier M.");' }, - { desc: 'Français (French)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["fr"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Stéphane Nahmani");' }, - { desc: 'Gjuha shqipe (Albanian)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["sq"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Flakron Bytyqi");' }, - { desc: '한국어 (Korean)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["ko"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("DaeKwon Kang");' }, - { desc: 'Hrvatski jezik (Croatian)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["hr"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Vjekoslav Nesek");' }, - { desc: 'Հայերեն (Armenian)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["hy"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Levon Zakaryan");' }, - { desc: 'Íslenska (Icelandic)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["is"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Haukur H. Thorsson");' }, - { desc: 'Italiano (Italian)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["it"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Apaella");' }, - { desc: 'Latviešu Valoda (Latvian)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["lv"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Arturas Paleicikas");' }, - { desc: 'lietuvių kalba (Lithuanian)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["lt"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Arturas Paleicikas");' }, - { desc: 'Magyar (Hungarian)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["hu"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Istvan Karaszi");' }, - { desc: 'Nederlands (Dutch)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["nl"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Mathias Bynens");' }, - { desc: '日本語 (Japanese)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["ja"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Milly");' }, - { desc: 'Norsk (Norwegian)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["no"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Naimdjon Takhirov");' }, - { desc: 'ภาษาไทย (Thai)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["th"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("pipo");' }, - { desc: 'Polski (Polish)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["pl"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Jacek Wysocki");' }, - { desc: 'Português (Portuguese/Brazilian)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["pt-BR"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Leonildo Costa Silva");' }, - { desc: 'Română (Romanian)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["ro"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Edmond L.");' }, - { desc: 'Русский (Russian)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["ru"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Andrew Stromnov");' }, - { desc: 'Slovenčina (Slovak)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["sk"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Vojtech Rinik");' }, - { desc: 'Slovenski Jezik (Slovenian)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["sl"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Jaka Jančar");' }, - { desc: 'suomi (Finnish)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["fi"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Harri Kilpiö");' }, - { desc: 'Svenska (Swedish)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["sv"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Anders Ekdahl");' }, - { desc: 'Türkçe (Turkish)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["tr"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Izzet Emre Erkan");' }, - { desc: 'Українська (Ukranian)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["uk"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Maxim Drogobitskiy");' }, - { desc: '简体中文 (Chinese Simplified)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["zh-CN"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Cloudream");' }, - { desc: '繁體中文 (Chinese Traditional)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["zh-TW"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Ressol");' } - ] - }, - - { - title: 'International Datepickers Right-to-left', - desc: 'Some international packs change the orientation of the datepicker to right-to-left.', - html: '<input type="text" size="10" value="" id="i18nrtl"/> thanks to <span id="contrib2"></span>', - destroy: '$("#i18nrtl").datepicker("destroy");', - - options: [ - { desc: '‫العربية (Arabic)', source: '$("#i18nrtl").datepicker($.extend({}, $.datepicker.regional["ar"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib2").html("Khaled Al Horani");' }, - { desc: '‫فارسی (Farsi/Persian)', source: '$("#i18nrtl").datepicker($.extend({}, $.datepicker.regional["fa"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib2").html("Javad Mowlanezhad");' }, - { desc: '‫עברית (Hebrew)', source: '$("#i18nrtl").datepicker($.extend({}, $.datepicker.regional["he"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib2").html("Amir Hardon");' } - ] - } - - ] - - }; - - $(function(){ - - uiRenderDemo(model); - - }); - -</script>
\ No newline at end of file diff --git a/demos/functional/templates/ui.datepicker.inl.html b/demos/functional/templates/ui.datepicker.inl.html deleted file mode 100644 index 925ef0718..000000000 --- a/demos/functional/templates/ui.datepicker.inl.html +++ /dev/null @@ -1,14 +0,0 @@ -<input type="text" id="altInline" size="10"/> -<div id="inline"></div> -<p style="clear: both;"><!-- See day-by-day example for highlighting days code --></p> -<script type="text/javascript"> -function setInlineDate() { - try { - var date = $.datepicker.parseDate("mm/dd/yy", $("#altInline").val()); - $("#inline").datepicker("setDate", date); - } - catch (e) { - // Ignore - } -} -</script>
\ No newline at end of file diff --git a/demos/functional/templates/ui.datepicker.sel.html b/demos/functional/templates/ui.datepicker.sel.html deleted file mode 100644 index a05b48438..000000000 --- a/demos/functional/templates/ui.datepicker.sel.html +++ /dev/null @@ -1,54 +0,0 @@ -<select id="selectMonth"><option value="01">Jan</option><option value="02">Feb</option> - <option value="03">Mar</option><option value="04">Apr</option> - <option value="05">May</option><option value="06">Jun</option> - <option value="07">Jul</option><option value="08">Aug</option> - <option value="09">Sep</option><option value="10">Oct</option> - <option value="11">Nov</option><option value="12">Dec</option></select> -<select id="selectDay"><option value="01">1</option><option value="02">2</option> - <option value="03">3</option><option value="04">4</option> - <option value="05">5</option><option value="06">6</option> - <option value="07">7</option><option value="08">8</option> - <option value="09">9</option><option value="10">10</option> - <option value="11">11</option><option value="12">12</option> - <option value="13">13</option><option value="14">14</option> - <option value="15">15</option><option value="16">16</option> - <option value="17">17</option><option value="18">18</option> - <option value="19">19</option><option value="20">20</option> - <option value="21">21</option><option value="22">22</option> - <option value="23">23</option><option value="24">24</option> - <option value="25">25</option><option value="26">26</option> - <option value="27">27</option><option value="28">28</option> - <option value="29">29</option><option value="30">30</option> - <option value="31">31</option></select> -<select id="selectYear"><option value="2001">2001</option><option value="2002">2002</option> - <option value="2003">2003</option><option value="2004">2004</option> - <option value="2005">2005</option><option value="2006">2006</option> - <option value="2007">2007</option><option value="2008">2008</option> - <option value="2009">2009</option><option value="2010">2010</option></select> -<input type="hidden" size="10" id="linkedDates" disabled="disabled"/></p> -<script type="text/javascript"> -// Prepare to show a date picker linked to three select controls -function readLinked() { - $("#linkedDates").val($("#selectMonth").val() + "/" + - $("#selectDay").val() + "/" + $("#selectYear").val()); - return {}; -} - -// Update three select controls to match a date picker selection -function updateLinked(date) { - $("#selectMonth").val(date.substring(0, 2)); - $("#selectDay").val(date.substring(3, 5)); - $("#selectYear").val(date.substring(6, 10)); -} - -// Prevent selection of invalid dates through the select controls -function checkLinkedDays() { - var daysInMonth = 32 - new Date($("#selectYear").val(), - $("#selectMonth").val() - 1, 32).getDate(); - $("#selectDay option").attr("disabled", ""); - $("#selectDay option:gt(" + (daysInMonth - 1) +")").attr("disabled", "disabled"); - if ($("#selectDay").val() > daysInMonth) { - $("#selectDay").val(daysInMonth); - } -} -</script> diff --git a/demos/functional/templates/ui.datepicker.two.html b/demos/functional/templates/ui.datepicker.two.html deleted file mode 100644 index 62e927859..000000000 --- a/demos/functional/templates/ui.datepicker.two.html +++ /dev/null @@ -1,7 +0,0 @@ -<input type="text" size="10" value="" id="startDate"/> to <input type="text" size="10" value="" id="endDate"/> -<script type="text/javascript"> -function customRange(input) { - return {minDate: (input.id == "endDate" ? $("#startDate").datepicker("getDate") : null), - maxDate: (input.id == "startDate" ? $("#endDate").datepicker("getDate") : null)}; -} -</script>
\ No newline at end of file diff --git a/demos/functional/templates/ui.dialog.html b/demos/functional/templates/ui.dialog.html deleted file mode 100644 index 91628119e..000000000 --- a/demos/functional/templates/ui.dialog.html +++ /dev/null @@ -1,34 +0,0 @@ -<script type="text/javascript"> - - var model = { - - renderAt: '#containerDemo', - - title: 'Dialog Demos', - - demos: [ - - { - title: 'Simple dialog', - desc: 'With few lines of code you could build a dialog. You can try more options on the fly!', - html: '<div id="dialog">jQuery UI Dialog</div>', - destroy: '$("#dialog").dialog("destroy");', - options: [ - { desc: 'Make a simple dialog', source: '$("#dialog").dialog();' }, - { desc: 'Modal dialog', source: '$("#dialog").dialog({ modal: true });' }, - { desc: 'Modal dialog with overlay', source: '$("#dialog").dialog({ modal: true, overlay: { opacity: 0.5, background: "black" } });' }, - { desc: 'With buttons', source: '$("#dialog").dialog({buttons: { "Ok": function() { alert("Ok"); }, "Cancel": function() { $(this).dialog("close"); } }});' }, - { desc: 'Close the dialog', source: '$("#dialog").dialog("close");' } - ] - } - - ] - }; - - $(function(){ - - uiRenderDemo(model); - - }); - -</script>
\ No newline at end of file diff --git a/demos/functional/templates/ui.draggable.html b/demos/functional/templates/ui.draggable.html deleted file mode 100644 index 703455e5d..000000000 --- a/demos/functional/templates/ui.draggable.html +++ /dev/null @@ -1,85 +0,0 @@ -<script type="text/javascript"> - - var model = { - - renderAt: '#containerDemo', - - title: 'Draggable Demos', - - demos: [ - - { - title: 'Simple image drag', - desc: 'You also can make images draggable!', - html: '<img id="dragImage" src="templates/images/puppy.jpg" style="width: 228px; height:157px;">', - destroy: '$("#dragImage").draggable("destroy");', - - options: [ - { desc: 'Using a helper clone', source: '$("#dragImage").draggable({ helper: "clone" });' }, - { desc: 'Simple Drag', source: '$("#dragImage").draggable();' }, - { desc: 'Axis x', source: '$("#dragImage").draggable({ axis: "x" });' }, - { desc: 'Axis y', source: '$("#dragImage").draggable({ axis: "y" });' }, - { desc: 'Axis x, Change cursor', source: '$("#dragImage").draggable({ axis: "x", cursor: "move" });' }, - { desc: 'Cursor position [top/left]', source: '$("#dragImage").draggable({ cursorAt: {top: 2, left: 2 } });' }, - { desc: 'Cursor position [right/bottom]', source: '$("#dragImage").draggable({ cursorAt: {bottom: 20, right: 14} });' }, - { desc: 'Drag on a Grid', source: '$("#dragImage").draggable({ grid: [50, 50] });' }, - { desc: 'Change the opacity', source: '$("#dragImage").draggable({ opacity: 0.40 });' }, - { desc: 'Drag and Revert to the original position', source: '$("#dragImage").draggable({ revert: true, helper: "clone" });' } - ] - }, - - { - title: 'Drag div element', - desc: 'With few lines of code you could make a div draggable. You can try more options on the fly!', - html: '<div id="divDrag" class="draggable">Drag me</div><br>', - destroy: '$("#divDrag").draggable("destroy");', - options: [ - { desc: 'Simple Drag', source: '$("#divDrag").draggable();' }, - { desc: 'Dragging elements in a Region', source: '$("#divDrag").draggable({ containment: "parent" });' }, - { desc: 'Axis x', source: '$("#divDrag").draggable({ axis: "x" });' }, - { desc: 'Axis y', source: '$("#divDrag").draggable({ axis: "y" });' }, - { desc: 'Axis x, Change cursor', source: '$("#divDrag").draggable({ axis: "x", cursor: "move" });' }, - { desc: 'Cursor position [top/left]', source: '$("#divDrag").draggable({ cursorAt: {top: 2, left: 2 } });' }, - { desc: 'Cursor position [right/bottom]', source: '$("#divDrag").draggable({ cursorAt: {bottom: 20, right: 14} });' }, - { desc: 'Drag on a Grid', source: '$("#divDrag").draggable({ grid: [50, 50] });' }, - { desc: 'Using a helper clone', source: '$("#divDrag").draggable({ helper: "clone" });' }, - { desc: 'Change the opacity', source: '$("#divDrag").draggable({ opacity: 0.40 });' }, - { desc: 'Drag and Revert to the original position', source: '$("#divDrag").draggable({ revert: true, helper: "clone" });' } - ] - }, - - { - title: 'Drag with a handle', - desc: 'Drag element by a handle.', - html: '<div id="draggable-handle-div" class="draggable"><div class="drag-handle"></div>Drag me</div>', - destroy: '$("#draggable-handle-div").draggable("destroy");', - - options: [ - { desc: 'Drag using a handle', source: '$("#draggable-handle-div").draggable({ handle: "div" });' }, - { desc: 'Drag using a handle with a helper', source: '$("#draggable-handle-div").draggable({ helper: "clone", handle: "div" });' } - ] - }, - - { - title: 'Drag prevention for pre-defined elements', - desc: 'You can change elements to not drag the parent.', - html: '<div id="draggable-dragPrevention" class="draggable"><a href="#">Drag me</a><br><input type="text" value="select me" style="width: 80px; font-size: 10px;" /></div>', - destroy: '$("#draggable-dragPrevention").draggable("destroy");', - - options: [ - { desc: 'Drag using a handle', source: '$("#draggable-dragPrevention").draggable({ cancel: "a,input,textarea" });' }, - { desc: 'Drag using a handle with a helper', source: '$("#draggable-dragPrevention").draggable({ helper: "clone", cancel: "a,input,textarea" });' } - ] - } - - ] - - }; - - $(function(){ - - uiRenderDemo(model); - - }); - -</script>
\ No newline at end of file diff --git a/demos/functional/templates/ui.droppable.html b/demos/functional/templates/ui.droppable.html deleted file mode 100644 index e475d9324..000000000 --- a/demos/functional/templates/ui.droppable.html +++ /dev/null @@ -1,87 +0,0 @@ -<script type="text/javascript"> - - var model = { - - renderAt: '#containerDemo', - - title: 'Droppable Demos', - - demos: [ - - { - title: 'Droppable', - desc: 'With few lines of code you could make an element droppable. You can try more options on the fly!', - html: { url: 'templates/ui.droppable.photos.html' }, - destroy: '$(".droppable-photos-container").droppable("destroy");', - options: [ - { - desc: 'Photo manager', - source: '$(".droppable-photos-container").droppable({ accept: ".img_content", drop: function(ev, ui) { ui.draggable.clone().fadeOut("fast", function() { $(this).fadeIn("fast") }).appendTo($(this).empty()); } });' - } - ] - }, - - { - title: 'Droppable', - desc: 'With few lines of code you could make an element droppable. You can try more options on the fly!', - html: '<div class="block">.block</div><div class="draggable red">.red</div><div class="draggable green">.green</div><div class="drop">Drop on me!<br><br></div>', - destroy: '$(".drop").droppable("destroy");', - options: [ - { - desc: 'Accept all, Active Class', - source: '$(".drop").droppable({ accept: ".block, .red, .green", activeClass: "droppable-active", drop: function(ev, ui) { $(this).append("Dropped! "); }});' - }, - { - desc: 'Only accept .block', - source: '$(".drop").droppable({ accept: ".block", drop: function(ev, ui) { $(this).append("Dropped! "); }});' - }, - { - desc: 'Only accept .red', - source: '$(".drop").droppable({ accept: ".red", drop: function(ev, ui) { $(this).append("Dropped! "); }});' - }, - { - desc: 'Only accept .green', - source: '$(".drop").droppable({ accept: ".green", drop: function(ev, ui) { $(this).append("Dropped! "); }});' - }, - { - desc: 'Accept all, Hover Class', - source: '$(".drop").droppable({ accept: ".block, .red, .green", hoverClass: "droppable-hover", drop: function(ev, ui) { $(this).append("Dropped! "); }});' - }, - { - desc: 'Accept all, Mouse tolerance', - source: '$(".drop").droppable({ accept: ".block, .red, .green", hoverClass: "silver", tolerance: "pointer", drop: function(ev, ui) { $(this).append("Dropped! "); }});' - }, - { - desc: 'Accept all, Touch tolerance', - source: '$(".drop").droppable({ accept: ".block, .red, .green", hoverClass: "silver", tolerance: "touch", drop: function(ev, ui) { $(this).append("Dropped! "); }});' - }, - { - desc: 'Accept all, Activate/Deactivate callbacks', - source: '$(".drop").droppable({ accept: ".block, .red, .green, .red, .green", activate: function(ev, ui) { $(this).append("Activate! "); }, deactivate: function(ev, ui) { $(this).append("Deactivate! "); }});' - }, - { - desc: 'Accept all, Over/Out callbacks', - source: '$(".drop").droppable({ accept: ".block, .red, .green", over: function(ev, ui) { $(this).append("Over! "); }, out: function(ev, ui) { $(this).append("Out! "); }});' - } - ] - } - ], - - onRenderEnd: function() { - $(".block, .green, .red").draggable({helper: "clone"}); - - $('ul.droppable-gallery img').addClass('img_content').draggable({ - helper: 'clone' - }); - - } - - }; - - $(function(){ - - uiRenderDemo(model); - - }); - -</script>
\ No newline at end of file diff --git a/demos/functional/templates/ui.droppable.photos.html b/demos/functional/templates/ui.droppable.photos.html deleted file mode 100644 index 7dbb7bdc9..000000000 --- a/demos/functional/templates/ui.droppable.photos.html +++ /dev/null @@ -1,17 +0,0 @@ -<div id="droppablePhotos" style="min-height: 130px; min-height:130px; height:auto !important; zoom:1;"> - - <ul class="droppable-gallery"> - <li class="droppable-img-content"> - <img src="templates/images/P1010020.JPG" alt="Tatry 1" title="Drag me!" /> - </li> - <li class="droppable-img-content"> - <img src="templates/images/P1010039.JPG" alt="Tatry 3" title="Drag me!" /> - </li> - <li class="droppable-img-content"> - <img src="templates/images/P1010044.JPG" alt="Tatry 4" title="Drag me!" /> - </li> - </ul> - - <div class="droppable-photos-container" style="text-align: center;">Drop here!</div> - -</div>
\ No newline at end of file diff --git a/demos/functional/templates/ui.effects.easing.ex2.html b/demos/functional/templates/ui.effects.easing.ex2.html deleted file mode 100644 index 651ba18ab..000000000 --- a/demos/functional/templates/ui.effects.easing.ex2.html +++ /dev/null @@ -1,19 +0,0 @@ -<div id="area" style="position: relative; width: 400px; height: 300px; border: 1px solid #bbb;"> - <img src="templates/images/white.gif" style="width: 400px; height: 300px;"/> - <img id="target" src="templates/images/target.jpeg" style="position: absolute; left: 0px; top: 0px;"/> -</div> -<script type="text/javascript"> -function moveToHere(event, easing) { - var area = $("#area"); - var target = $("#target"); - var offset = area.offset(); - var max = [area.width() - target.width(), area.height() - target.height()]; - var scroll = [document.documentElement.scrollLeft || document.body.scrollLeft, - document.documentElement.scrollTop || document.body.scrollTop]; - target.animate({left: Math.max(0, Math.min((event.clientX + scroll[0]) - - offset.left - (target.width() / 2), max[0])), - top: Math.max(0, Math.min((event.clientY + scroll[1]) - - offset.top - (target.height() / 2), max[1]))}, - 2000, easing); -} -</script>
\ No newline at end of file diff --git a/demos/functional/templates/ui.effects.easing.html b/demos/functional/templates/ui.effects.easing.html deleted file mode 100644 index b008b89ea..000000000 --- a/demos/functional/templates/ui.effects.easing.html +++ /dev/null @@ -1,109 +0,0 @@ -<script type="text/javascript"> - - var model = { - - renderAt: '#containerDemo', - - title: 'Easing Effects', - - demos: [ - - { - title: 'Easings', - desc: 'Easing is acceleration, a change in speed. Easings control how an animation progresses over time.<br/>' + - 'An ease-in starts slow and then speeds up.<br/>' + - 'An ease-out starts fast and then slows to a stop.<br/>' + - 'An ease-in-out combines the two so that the first half is an ease-in and the second half is an ease-out.', - html: '<button id="doBounce" type="button">Bounce</button><br/><br/>\n' + - '<div><img id="bounce" src="templates/images/puppy.jpg"/></div>', - destroy: '$("#doBounce").unbind();', - - options: [ - { desc: 'Linear easing', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "linear", times: 1}, 2000); });' }, - { desc: 'Swing easing', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "swing", times: 1}, 2000); });' }, - { desc: 'Quadratic ease in', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInQuad", times: 1}, 2000); });' }, - { desc: 'Quadratic ease out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeOutQuad", times: 1}, 2000); });' }, - { desc: 'Quadratic ease in out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInOutQuad", times: 1}, 2000); });' }, - { desc: 'Cubic ease in', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInCubic", times: 1}, 2000); });' }, - { desc: 'Cubic ease out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeOutCubic", times: 1}, 2000); });' }, - { desc: 'Cubic ease in out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInOutCubic", times: 1}, 2000); });' }, - { desc: 'Quartic ease in', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInQuart", times: 1}, 2000); });' }, - { desc: 'Quartic ease out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeOutQuart", times: 1}, 2000); });' }, - { desc: 'Quartic ease in out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInOutQuart", times: 1}, 2000); });' }, - { desc: 'Quintic ease in', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInQuint", times: 1}, 2000); });' }, - { desc: 'Quintic ease out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeOutQuint", times: 1}, 2000); });' }, - { desc: 'Quintic ease in out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInOutQuint", times: 1}, 2000); });' }, - { desc: 'Sinusoidal ease in', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInSine", times: 1}, 2000); });' }, - { desc: 'Sinusoidal ease out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeOutSine", times: 1}, 2000); });' }, - { desc: 'Sinusoidal ease in out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInOutSine", times: 1}, 2000); });' }, - { desc: 'Exponential ease in', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInExpo", times: 1}, 2000); });' }, - { desc: 'Exponential ease out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeOutExpo", times: 1}, 2000); });' }, - { desc: 'Exponential ease in out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInOutExpo", times: 1}, 2000); });' }, - { desc: 'Circular ease in', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInCirc", times: 1}, 2000); });' }, - { desc: 'Circular ease out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeOutCirc", times: 1}, 2000); });' }, - { desc: 'Circular ease in out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInOutCirc", times: 1}, 2000); });' }, - { desc: 'Elastic ease in (decaying sine wave)', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInElastic", times: 1}, 2000); });' }, - { desc: 'Elastic ease out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeOutElastic", times: 1}, 2000); });' }, - { desc: 'Elastic ease in out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInOutElastic", times: 1}, 2000); });' }, - { desc: 'Back ease in (overshooting cubic)', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInBack", times: 1}, 2000); });' }, - { desc: 'Back ease out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeOutBack", times: 1}, 2000); });' }, - { desc: 'Back ease in out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInOutBack", times: 1}, 2000); });' }, - { desc: 'Bounce ease in (decaying parabolic)', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInBounce", times: 1}, 2000); });' }, - { desc: 'Bounce ease out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeOutBounce", times: 1}, 2000); });' }, - { desc: 'Bounce ease in out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInOutBounce", times: 1}, 2000); });' }, - ] - }, - - { - title: 'Easings 2', - desc: 'Click within the bounded area to move the icon with the selected easing.', - html: { url: 'templates/ui.effects.easing.ex2.html' }, - destroy: '$("#area").unbind();', - - options: [ - { desc: 'Linear easing', source: '$("#area").click(function(event) { moveToHere(event, "linear"); });' }, - { desc: 'Swing easing', source: '$("#area").click(function(event) { moveToHere(event, "swing"); });' }, - { desc: 'Quadratic ease in', source: '$("#area").click(function(event) { moveToHere(event, "easeInQuad"); });' }, - { desc: 'Quadratic ease out', source: '$("#area").click(function(event) { moveToHere(event, "easeOutQuad"); });' }, - { desc: 'Quadratic ease in out', source: '$("#area").click(function(event) { moveToHere(event, "easeInOutQuad"); });' }, - { desc: 'Cubic ease in', source: '$("#area").click(function(event) { moveToHere(event, "easeInCubic"); });' }, - { desc: 'Cubic ease out', source: '$("#area").click(function(event) { moveToHere(event, "easeOutCubic"); });' }, - { desc: 'Cubic ease in out', source: '$("#area").click(function(event) { moveToHere(event, "easeInOutCubic"); });' }, - { desc: 'Quartic ease in', source: '$("#area").click(function(event) { moveToHere(event, "easeInQuart"); });' }, - { desc: 'Quartic ease out', source: '$("#area").click(function(event) { moveToHere(event, "easeOutQuart"); });' }, - { desc: 'Quartic ease in out', source: '$("#area").click(function(event) { moveToHere(event, "easeInOutQuart"); });' }, - { desc: 'Quintic ease in', source: '$("#area").click(function(event) { moveToHere(event, "easeInQuint"); });' }, - { desc: 'Quintic ease out', source: '$("#area").click(function(event) { moveToHere(event, "easeOutQuint"); });' }, - { desc: 'Quintic ease in out', source: '$("#area").click(function(event) { moveToHere(event, "easeInOutQuint"); });' }, - { desc: 'Sinusoidal ease in', source: '$("#area").click(function(event) { moveToHere(event, "easeInSine"); });' }, - { desc: 'Sinusoidal ease out', source: '$("#area").click(function(event) { moveToHere(event, "easeOutSine"); });' }, - { desc: 'Sinusoidal ease in out', source: '$("#area").click(function(event) { moveToHere(event, "easeInOutSine"); });' }, - { desc: 'Exponential ease in', source: '$("#area").click(function(event) { moveToHere(event, "easeInExpo"); });' }, - { desc: 'Exponential ease out', source: '$("#area").click(function(event) { moveToHere(event, "easeOutExpo"); });' }, - { desc: 'Exponential ease in out', source: '$("#area").click(function(event) { moveToHere(event, "easeInOutExpo"); });' }, - { desc: 'Circular ease in', source: '$("#area").click(function(event) { moveToHere(event, "easeInCirc"); });' }, - { desc: 'Circular ease out', source: '$("#area").click(function(event) { moveToHere(event, "easeOutCirc"); });' }, - { desc: 'Circular ease in out', source: '$("#area").click(function(event) { moveToHere(event, "easeInOutCirc"); });' }, - { desc: 'Elastic ease in (decaying sine wave)', source: '$("#area").click(function(event) { moveToHere(event, "easeInElastic"); });' }, - { desc: 'Elastic ease out', source: '$("#area").click(function(event) { moveToHere(event, "easeOutElastic"); });' }, - { desc: 'Elastic ease in out', source: '$("#area").click(function(event) { moveToHere(event, "easeInOutElastic"); });' }, - { desc: 'Back ease in (overshooting cubic)', source: '$("#area").click(function(event) { moveToHere(event, "easeInBack"); });' }, - { desc: 'Back ease out', source: '$("#area").click(function(event) { moveToHere(event, "easeOutBack"); });' }, - { desc: 'Back ease in out', source: '$("#area").click(function(event) { moveToHere(event, "easeInOutBack"); });' }, - { desc: 'Bounce ease in (decaying parabolic)', source: '$("#area").click(function(event) { moveToHere(event, "easeInBounce"); });' }, - { desc: 'Bounce ease out', source: '$("#area").click(function(event) { moveToHere(event, "easeOutBounce"); });' }, - { desc: 'Bounce ease in out', source: '$("#area").click(function(event) { moveToHere(event, "easeInOutBounce"); });' }, - ] - } - - ] - - }; - - $(function(){ - - uiRenderDemo(model); - - }); - -</script>
\ No newline at end of file diff --git a/demos/functional/templates/ui.effects.general.html b/demos/functional/templates/ui.effects.general.html deleted file mode 100644 index eb3943727..000000000 --- a/demos/functional/templates/ui.effects.general.html +++ /dev/null @@ -1,140 +0,0 @@ -<script type="text/javascript"> - - var model = { - - renderAt: '#containerDemo', - - title: 'General Effects', - - demos: [ - - { - title: 'Bounce', - desc: 'Bounce an element from its original location. The default settings are {times: 5, direction: "up", distance: 20}.', - html: '<button id="doBounce" type="button">Bounce</button><br/><br/>\n' + - '<div style="height: 108px;"><img id="bounce" src="templates/images/P1010036.JPG"/></div>', - destroy: '$("#doBounce").unbind();', - - options: [ - { desc: 'Bounce defaults', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {}, 500); });' }, - { desc: 'Bounce three times', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {times: 3}, 500); });' }, - { desc: 'Bounce once', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {times: 1}, 500); });' }, - { desc: 'Bounce down', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {direction: "down"}); });' }, - { desc: 'Bounce left', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {direction: "left"}); });' }, - { desc: 'Bounce right', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {direction: "right"}); });' }, - { desc: 'Bounce to height 50', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {distance: 50}); });' }, - { desc: 'Bounce and show/hide', source: '$("#doBounce").click(function() { $("#bounce").toggle("bounce", {times: 3}, 500); });' } - ] - }, - - { - title: 'Highlight', - desc: 'Highlight an element by fading its background color from another color back to its original.', - html: '<button id="doHighlight" type="button">Highlight</button><br/><br/>\n' + - '<div id="highlight" style="width: 144px; height: 108px; background-color: #ccffff; text-align: center;"><br/><br/>\n' + - 'This is an important announcement!</div>', - destroy: '$("#doHighlight").unbind();', - - options: [ - { desc: 'Highlight defaults (yellow)', source: '$("#doHighlight").click(function() { $("#highlight").effect("highlight", {}, 800); });' }, - { desc: 'Highlight to red', source: '$("#doHighlight").click(function() { $("#highlight").effect("highlight", {color: "red"}, 800); });' }, - { desc: 'Highlight to black', source: '$("#doHighlight").click(function() { $("#highlight").effect("highlight", {color: "#000000"}, 800); });' } - ] - }, - - { - title: 'Pulsate', - desc: 'Pulsate an element by changing its opacity.', - html: '<button id="doPulsate" type="button">Pulsate</button><br/><br/>\n' + - '<div style="height: 108px;"><img id="pulsate" src="templates/images/P1010061.JPG"/></div>', - destroy: '$("#doPulsate").unbind();', - - options: [ - { desc: 'Pulsate defaults (5 times)', source: '$("#doPulsate").click(function() { $("#pulsate").effect("pulsate", {}, 500); });' }, - { desc: 'Pulsate 3 times', source: '$("#doPulsate").click(function() { $("#pulsate").effect("pulsate", {times: 3}, 500); });' }, - { desc: 'Pulsate once', source: '$("#doPulsate").click(function() { $("#pulsate").effect("pulsate", {times: 1}, 1000); });' }, - { desc: 'Pulsate 3 times and show/hide', source: '$("#doPulsate").click(function() { $("#pulsate").toggle("pulsate", {times: 3}, 500); });' } - ] - }, - - { - title: 'Scale', - desc: 'Scales an element up or down by a percentage factor.', - html: '<button id="doScale" type="button">Scale</button> \n' + - '<button onclick="$(\'#scale\').css({width: 144, height: 108});" type="button">Reset</button><br/><br/>\n' + - '<div style="height: 108px;" type="button"><img id="scale" src="templates/images/P1010063.JPG"/></div>', - destroy: '$("#doScale").unbind();', - - options: [ - { desc: 'Scale to 0%', source: '$("#doScale").click(function() { $("#scale").effect("scale", {percent: 0}, 800); });' }, - { desc: 'Scale to 50%', source: '$("#doScale").click(function() { $("#scale").effect("scale", {percent: 50}, 800); });' }, - { desc: 'Scale to 200%', source: '$("#doScale").click(function() { $("#scale").effect("scale", {percent: 200}, 800); });' }, - { desc: 'Scale vertically only', source: '$("#doScale").click(function() { $("#scale").effect("scale", {direction: "vertical", percent: 150}, 800); });' }, - { desc: 'Scale horizontally only', source: '$("#doScale").click(function() { $("#scale").effect("scale", {direction: "horizontal", percent: 150}, 800); });' }, - { desc: 'Scale from middle-center', source: '$("#doScale").click(function() { $("#scale").effect("scale", {origin: ["middle", "center"], percent: 150}, 800); });' }, - { desc: 'Scale from bottom-right', source: '$("#doScale").click(function() { $("#scale").effect("scale", {origin: ["bottom", "right"], percent: 50}, 800); });' } - ] - }, - - { - title: 'Size', - desc: 'Changes the size of an element by specifying a width and height.', - html: '<button id="doSize" type="button">Size</button> \n' + - '<button onclick="$(\'#size\').css({width: 144, height: 108});" type="button">Reset</button><br/><br/>\n' + - '<div style="height: 108px;" type="button"><img id="size" src="templates/images/P1010063.JPG"/></div>', - destroy: '$("#doSize").unbind();', - - options: [ - { desc: 'Size to 75x200', source: '$("#doSize").click(function() { $("#size").effect("size", {to: {width:75, height:200}}, 800); });' }, - { desc: 'Size to 200x75', source: '$("#doSize").click(function() { $("#size").effect("size", {to: {width:200, height:75}}, 800); });' }, - { desc: 'Size (125x210) from middle-center', source: '$("#doSize").click(function() { $("#size").effect("size", {to: {width:125, height:210}, origin: ["middle", "center"]}, 800); });' }, - { desc: 'Size (210x125) from bottom-right', source: '$("#doSize").click(function() { $("#size").effect("size", {to: {width:210, height:125}, origin: ["bottom", "right"]}, 800); });' } - ] - }, - - { - title: 'Shake', - desc: 'Shake an element around.', - html: '<button id="doShake" type="button">Shake</button><br/><br/>\n' + - '<div style="height: 108px;"><img id="shake" src="templates/images/P1010039.JPG"/></div>', - destroy: '$("#doShake").unbind();', - - options: [ - { desc: 'Shake defaults', source: '$("#doShake").click(function() { $("#shake").effect("shake", {}, 300); });' }, - { desc: 'Shake 5 times', source: '$("#doShake").click(function() { $("#shake").effect("shake", {times: 5}, 250); });' }, - { desc: 'Shake right', source: '$("#doShake").click(function() { $("#shake").effect("shake", {direction: "right"}, 250); });' }, - { desc: 'Shake up', source: '$("#doShake").click(function() { $("#shake").effect("shake", {direction: "up"}, 250); });' }, - { desc: 'Shake down', source: '$("#doShake").click(function() { $("#shake").effect("shake", {direction: "down"}, 250); });' }, - { desc: 'Shake by 50px', source: '$("#doShake").click(function() { $("#shake").effect("shake", {distance: 50}, 250); });' } - ] - }, - - { - title: 'Transfer', - desc: 'Transfer the outline of one element to another.', - html: '<button id="doTransfer" type="button">Transfer</button><br/><br/>\n' + - '<div style="height: 108px;"><img id="transfer" src="templates/images/P1010044.JPG"/></div>\n' + - '<div id="target" style="margin: 20px 0px 0px 36px; width: 72px; height: 54px; border: 1px solid black;"></div>\n' + - '<style type="text/css">\n' + - '.ui-effects-transfer { border: 1px solid maroon; }\n' + - '.transferring { background-color: red; opacity: 0.5; }\n' + - '</style>', - destroy: '$("#doTransfer").unbind(); $("#target").removeClass("transferred");', - - options: [ - { desc: 'Transfer default', source: '$("#doTransfer").click(function() { $("#transfer").effect("transfer", {to: "#target"}, 800); });' }, - { desc: 'Transfer with extra class', source: '$("#doTransfer").click(function() { $("#transfer").effect("transfer", {to: "#target", className: "transferring"}, 800); });' } - ] - } - - ] - - }; - - $(function(){ - - uiRenderDemo(model); - - }); - -</script>
\ No newline at end of file diff --git a/demos/functional/templates/ui.effects.showhide.html b/demos/functional/templates/ui.effects.showhide.html deleted file mode 100644 index af0295a04..000000000 --- a/demos/functional/templates/ui.effects.showhide.html +++ /dev/null @@ -1,151 +0,0 @@ -<script type="text/javascript"> - - var model = { - - renderAt: '#containerDemo', - - title: 'Show/Hide Effects', - - demos: [ - - { - title: 'Blind', - desc: 'Gradually show or hide an element.', - html: '<button id="doBlind" type="button">Toggle</button><br/><br/>\n' + - '<ul><li style="float: left; width: 144px; height: 108px;"><img class="blindfx" style="width: 144px; height: 108px;" src="templates/images/P1010020.JPG"/></li>\n' + - '<li style="float: left; width: 144px; height: 108px; margin-left: 20px;"><div class="blindfx" style="width: 144px; height: 108px; background-color: #F2F2F2;">Lorem ipsum dolor sit amet.</div></li></ul>\n' + - '<div style="clear: both;"></div>', - destroy: '$("#doBlind").unbind();', - - options: [ - { desc: 'Vertical blind', source: '$("#doBlind").click(function() { $(".blindfx").toggle("blind", {direction: "vertical"}, 800); });' }, - { desc: 'Horizontal blind', source: '$("#doBlind").click(function() { $(".blindfx").toggle("blind", {direction: "horizontal"}, 800); });' } - ] - }, - - { - title: 'Clip', - desc: 'Gradually show or hide an element by expanding from or to the center.', - html: '<button id="doClip" type="button">Toggle</button><br/><br/>\n' + - '<ul><li style="float: left; width: 144px; height: 108px;"><img class="clipfx" style="width: 144px; height: 108px;" src="templates/images/P1010039.JPG"/></li>\n' + - '<li style="float: left; width: 144px; height: 108px; margin-left: 20px;"><div class="clipfx" style="width: 144px; height: 108px; background-color: #F2F2F2;">Lorem ipsum dolor sit amet.</div></li></ul>\n' + - '<div style="clear: both;"></div>', - destroy: '$("#doClip").unbind();', - - options: [ - { desc: 'Vertical clip', source: '$("#doClip").click(function() { $(".clipfx").toggle("clip", {direction: "vertical"}, 800); });' }, - { desc: 'Horizontal clip', source: '$("#doClip").click(function() { $(".clipfx").toggle("clip", {direction: "horizontal"}, 800); });' } - ] - }, - - { - title: 'Drop', - desc: 'Gradually show or hide an element by dropping it to one side and fading it.', - html: '<button id="doDrop" type="button">Toggle</button><br/><br/>\n' + - '<ul><li style="float: left; width: 144px; height: 108px;"><img class="dropfx" style="width: 144px; height: 108px;" src="templates/images/P1010044.JPG"/></li>\n' + - '<li style="float: left; width: 144px; height: 108px; margin-left: 20px;"><div class="dropfx" style="width: 144px; height: 108px; background-color: #F2F2F2;">Lorem ipsum dolor sit amet.</div></li></ul>\n' + - '<div style="clear: both;"></div>', - destroy: '$("#doDrop").unbind();', - - options: [ - { desc: 'Drop left', source: '$("#doDrop").click(function() { $(".dropfx").toggle("drop", {direction: "left"}, 800); });' }, - { desc: 'Drop right', source: '$("#doDrop").click(function() { $(".dropfx").toggle("drop", {direction: "right"}, 800); });' }, - { desc: 'Drop up', source: '$("#doDrop").click(function() { $(".dropfx").toggle("drop", {direction: "up"}, 800); });' }, - { desc: 'Drop down', source: '$("#doDrop").click(function() { $(".dropfx").toggle("drop", {direction: "down"}, 800); });' } - ] - }, - - { - title: 'Explode', - desc: 'Break an element into pieces and explode them away, or reassemble an element from pieces.', - html: '<button id="doExplode" type="button">Toggle</button><br/><br/>\n' + - '<ul><li style="float: left; width: 144px; height: 108px;"><img class="explodefx" style="width: 144px; height: 108px;" src="templates/images/P1010050.JPG"/></li>\n' + - '<li style="float: left; width: 144px; height: 108px; margin-left: 20px;"><div class="explodefx" style="width: 144px; height: 108px; background-color: #F2F2F2;">Lorem ipsum dolor sit amet.</div></li></ul>\n' + - '<div style="clear: both;"></div>', - destroy: '$("#doExplode").unbind();', - - options: [ - { desc: 'Explode defaults (9 pieces)', source: '$("#doExplode").click(function() { $(".explodefx").toggle("explode", {}, 800); });' }, - { desc: 'Explode into 4 pieces', source: '$("#doExplode").click(function() { $(".explodefx").toggle("explode", {pieces: 4}, 800); });' }, - { desc: 'Explode into 25 pieces', source: '$("#doExplode").click(function() { $(".explodefx").toggle("explode", {pieces: 25}, 800); });' } - ] - }, - - { - title: 'Fold', - desc: 'Reduce or enlarge an element partially in one direction and then fully in the other direction.', - html: '<button id="doFold" type="button">Toggle</button><br/><br/>\n' + - '<ul><li style="float: left; width: 144px; height: 108px;"><img class="foldfx" style="width: 144px; height: 108px;" src="templates/images/P1010055.JPG"/></li>\n' + - '<li style="float: left; width: 144px; height: 108px; margin-left: 20px;"><div class="foldfx" style="width: 144px; height: 108px; background-color: #F2F2F2;">Lorem ipsum dolor sit amet.</div></li></ul>\n' + - '<div style="clear: both;"></div>', - destroy: '$("#doFold").unbind();', - - options: [ - { desc: 'Fold defaults (to size 15)', source: '$("#doFold").click(function() { $(".foldfx").toggle("fold", {}, 800); });' }, - { desc: 'Fold to 30', source: '$("#doFold").click(function() { $(".foldfx").toggle("fold", {size: 30}, 800); });' }, - { desc: 'Fold in half (50%)', source: '$("#doFold").click(function() { $(".foldfx").toggle("fold", {size: "50%"}, 800); });' }, - { desc: 'Fold horizontally first', source: '$("#doFold").click(function() { $(".foldfx").toggle("fold", {size: 30, horizFirst: true}, 800); });' }, - { desc: 'Fold in half horizontally first', source: '$("#doFold").click(function() { $(".foldfx").toggle("fold", {size: "50%", horizFirst: true}, 800); });' } - ] - }, - - { - title: 'Puff', - desc: 'Scale an element up and fade out, or scale it down and fade in.', - html: '<button id="doPuff" type="button">Toggle</button><br/><br/>\n' + - '<ul><li style="float: left; width: 144px; height: 108px;"><img class="pufffx" style="width: 144px; height: 108px;" src="templates/images/P1010058.JPG"/></li>\n' + - '<li style="float: left; width: 144px; height: 108px; margin-left: 20px;"><div class="pufffx" style="width: 144px; height: 108px; background-color: #F2F2F2;">Lorem ipsum dolor sit amet.</div></li></ul>\n' + - '<div style="clear: both;"></div>', - destroy: '$("#doPuff").unbind();', - - options: [ - { desc: 'Puff defaults (scale to 150%)', source: '$("#doPuff").click(function() { $(".pufffx").toggle("puff", {}, 800); });' }, - { desc: 'Puff to 200%', source: '$("#doPuff").click(function() { $(".pufffx").toggle("puff", {percent: 200}, 800); });' } - ] - }, - - { - title: 'Scale', - desc: 'Grow/Shrink an element.', - html: '<button id="doScale" type="button">Toggle</button><br/><br/>\n' + - '<ul><li style="float: left; width: 144px; height: 108px;"><img class="scalefx" style="width: 144px; height: 108px;" src="templates/images/P1010058.JPG"/></li>\n' + - '<li style="float: left; width: 144px; height: 108px; margin-left: 20px;"><div class="scalefx" style="width: 144px; height: 108px; background-color: #F2F2F2;">Lorem ipsum dolor sit amet.</div></li></ul>\n' + - '<div style="clear: both;"></div>', - destroy: '$("#doScale").unbind();', - - options: [ - { desc: 'Scale defaults', source: '$("#doScale").click(function() { $(".scalefx").toggle("scale", {}, 800); });' }, - { desc: 'Scale from/to top-left', source: '$("#doScale").click(function() { $(".scalefx").toggle("scale", {origin:["top","left"]}, 800); });' }, - { desc: 'Scale from/to bottom-right', source: '$("#doScale").click(function() { $(".scalefx").toggle("scale", {origin:["bottom","right"]}, 800); });' }, - ] - }, - - - { - title: 'Slide', - desc: 'Slide an element out of or into the viewport.', - html: '<button id="doSlide" type="button">Toggle</button><br/><br/>\n' + - '<ul><li style="float: left; width: 144px; height: 108px;"><img class="slidefx" style="width: 144px; height: 108px;" src="templates/images/P1010059.JPG"/></li>\n' + - '<li style="float: left; width: 144px; height: 108px; margin-left: 20px;"><div class="slidefx" style="width: 144px; height: 108px; background-color: #F2F2F2;">Lorem ipsum dolor sit amet.</div></li></ul>\n' + - '<div style="clear: both;"></div>', - destroy: '$("#doSlide").unbind();', - - options: [ - { desc: 'Slide left', source: '$("#doSlide").click(function() { $(".slidefx").toggle("slide", {direction: "left"}, 800); });' }, - { desc: 'Slide right', source: '$("#doSlide").click(function() { $(".slidefx").toggle("slide", {direction: "right"}, 800); });' }, - { desc: 'Slide up', source: '$("#doSlide").click(function() { $(".slidefx").toggle("slide", {direction: "up"}, 800); });' }, - { desc: 'Slide down', source: '$("#doSlide").click(function() { $(".slidefx").toggle("slide", {direction: "down"}, 800); });' } - ] - } - - ] - - }; - - $(function(){ - - uiRenderDemo(model); - - }); - -</script>
\ No newline at end of file diff --git a/demos/functional/templates/ui.progressbar.html b/demos/functional/templates/ui.progressbar.html deleted file mode 100644 index 324f29fa4..000000000 --- a/demos/functional/templates/ui.progressbar.html +++ /dev/null @@ -1,35 +0,0 @@ -<script type="text/javascript"> - - var model = { - - renderAt: '#containerDemo', - - title: 'Progressbar Demos', - - demos: [ - - { - title: 'Simple Progressbar', - desc: 'With few lines of code you could build a progressbar. You can try more options on the fly!', - html: '<div id="progressbar"></div>', - destroy: '$("#progressbar").progressbar("destroy");', - options: [ - { desc: 'Start a progressbar', source: '$("#progressbar").progressbar({interval:2000}); $("#progressbar").progressbar("start");' }, - { desc: 'With different increment', source: '$("#progressbar").progressbar({interval:2000, increment:100}).progressbar("start");' }, - { desc: 'Set progress to 50%', source: '$("#progressbar").progressbar().progressbar("progress", 50);' }, - { desc: 'Callback when finish', source: '$("#progressbar").progressbar({interval: 1000, stop:function(){alert("Finished");}}).progressbar("start");' }, - { desc: 'Enable the progressbar', source: '$("#progressbar").progressbar().progressbar("enable");' }, - { desc: 'Disable the progressbar', source: '$("#progressbar").progressbar().progressbar("disable");' } - ] - } - - ] - }; - - $(function(){ - - uiRenderDemo(model); - - }); - -</script>
\ No newline at end of file diff --git a/demos/functional/templates/ui.resizable.html b/demos/functional/templates/ui.resizable.html deleted file mode 100644 index bb47accc4..000000000 --- a/demos/functional/templates/ui.resizable.html +++ /dev/null @@ -1,92 +0,0 @@ -<script type="text/javascript"> - - var model = { - - renderAt: '#containerDemo', - - title: 'Resizable Demos', - - demos: [ - - { - title: 'Simple div Resizing', - desc: 'You can play with the options listed below and check the results on the div.', - html: '<div id="simpleDiv" class="resizable">Resize me!</div><br>', - destroy: '$("#simpleDiv").resizable("destroy");', - - options: [ - { desc: 'All handles', source: '$("#simpleDiv").resizable({ handles: "all"});' }, - { desc: 'Using helper', source: '$("#simpleDiv").resizable({ handles: "all", helper: "proxy" });' }, - { desc: 'Preserving ratio', source: '$("#simpleDiv").resizable({ handles: "all", aspectRatio: true, helper: "proxy" });' }, - { desc: 'Autohide handles', source: '$("#simpleDiv").resizable({ handles: "all", autoHide:true });' }, - { desc: 'Transparent handles', source: '$("#simpleDiv").resizable({ handles: "all", transparent: true, helper: "proxy" });' }, - { desc: 'Pre-defined handles (e,w)', source: '$("#simpleDiv").resizable({ handles: "e,w" });' }, - { desc: 'Resize on a grid [50, 50]', source: '$("#simpleDiv").resizable({ handles: "all", grid: [50, 50] });' }, - { desc: 'Min/Max height and width', source: '$("#simpleDiv").resizable({ handles: "all", minWidth: 100, minHeight: 100, maxWidth: 250, maxHeight: 250 });' }, - { desc: 'Animated resizing', source: '$("#simpleDiv").resizable({ handles: "all", animate: true, animateDuration: "slow", animateEasing: "swing" });' }, - { desc: 'Knob handles (image cropper like)', source: '$("#simpleDiv").resizable({ handles: "all", knobHandles: true });' }, - { desc: 'Ghost resizing', source: '$("#simpleDiv").resizable({ handles: "all", ghost:true });' }, - { desc: 'Prevent default browser resize (safari textarea)', source: '$("#simpleDiv").resizable({ handles: "all", preventDefault: true });' }, - { desc: 'Preserve cursor on resize', source: '$("#simpleDiv").resizable({ handles: "all", preserveCursor: true });' }, - { desc: 'Using callbacks', source: '$("#simpleDiv").resizable({ handles: "all", start: function(e, ui) { $(this).append("<br>Start!") }, stop: function(e, ui) { $(this).append("<br>Stop!") }, resize: function(e, ui) { /*$(this).append("<br>Resize!");*/ } });' } - ] - }, - - { - title: 'Image Resizing', - desc: 'Try resize images! You can play with the options listed below.', - html: '<img id="resizebleImage" src="templates/images/puppy.jpg" width="200px" height="135px">', - destroy: '$("#resizebleImage").resizable("destroy");', - - options: [ - { desc: 'Ghost resizing', source: '$("#resizebleImage").resizable({ handles: "all", ghost:true });' }, - { desc: 'All handles', source: '$("#resizebleImage").resizable({ handles: "all"});' }, - { desc: 'Using helper', source: '$("#resizebleImage").resizable({ handles: "all", helper: "proxy" });' }, - { desc: 'Preserving ratio', source: '$("#resizebleImage").resizable({ handles: "all", aspectRatio: true, helper: "proxy" });' }, - { desc: 'Autohide handles', source: '$("#resizebleImage").resizable({ handles: "all", autoHide:true });' }, - { desc: 'Transparent handles', source: '$("#resizebleImage").resizable({ handles: "all", transparent: true, helper: "proxy" });' }, - { desc: 'Pre-defined handles (e,w)', source: '$("#resizebleImage").resizable({ handles: "e,w" });' }, - { desc: 'Resize on a grid [50, 50]', source: '$("#resizebleImage").resizable({ handles: "all", grid: [50, 50] });' }, - { desc: 'Min/Max height and width', source: '$("#resizebleImage").resizable({ handles: "all", minWidth: 100, minHeight: 100, maxWidth: 250, maxHeight: 250 });' }, - { desc: 'Animated resizing', source: '$("#resizebleImage").resizable({ handles: "all", animate: true, animateDuration: "slow", animateEasing: "swing" });' }, - { desc: 'Knob handles (image cropper like)', source: '$("#resizebleImage").resizable({ handles: "all", knobHandles: true });' }, - { desc: 'Prevent default browser resize (safari textarea)', source: '$("#resizebleImage").resizable({ handles: "all", preventDefault: true });' }, - { desc: 'Preserve cursor on resize', source: '$("#resizebleImage").resizable({ handles: "all", preserveCursor: true });' }, - { desc: 'Using callbacks', source: '$("#resizebleImage").resizable({ handles: "all", start: function(e, ui) { $(this).append("<br>Start!") }, stop: function(e, ui) { $(this).append("<br>Stop!") }, resize: function(e, ui) { /*$(this).append("<br>Resize!");*/ } });' } - ] - }, - - { - title: 'Textarea Resizing', - desc: 'Try to <b>resize textarea</b>! You can play with the options listed below.', - html: '<textarea id="resizebleTextarea">I am a textarea!</textarea>', - destroy: '$("#resizebleTextarea").resizable("destroy");', - options: [ - { desc: 'All handles', source: '$("#resizebleTextarea").resizable({ handles: "all"});' }, - { desc: 'Using helper', source: '$("#resizebleTextarea").resizable({ handles: "all", helper: "proxy" });' }, - { desc: 'Preserving ratio', source: '$("#resizebleTextarea").resizable({ handles: "all", aspectRatio: true, helper: "proxy" });' }, - { desc: 'Autohide handles', source: '$("#resizebleTextarea").resizable({ handles: "all", autoHide:true });' }, - { desc: 'Transparent handles', source: '$("#resizebleTextarea").resizable({ handles: "all", transparent: true, helper: "proxy" });' }, - { desc: 'Pre-defined handles (e,w)', source: '$("#resizebleTextarea").resizable({ handles: "e,w" });' }, - { desc: 'Resize on a grid [50, 50]', source: '$("#resizebleTextarea").resizable({ handles: "all", grid: [50, 50] });' }, - { desc: 'Min/Max height and width', source: '$("#resizebleTextarea").resizable({ handles: "all", minWidth: 100, minHeight: 100, maxWidth: 250, maxHeight: 250 });' }, - { desc: 'Animated resizing', source: '$("#resizebleTextarea").resizable({ handles: "all", animate: true, animateDuration: "slow", animateEasing: "swing" });' }, - { desc: 'Knob handles (image cropper like)', source: '$("#resizebleTextarea").resizable({ handles: "all", knobHandles: true });' }, - { desc: 'Ghost resizing', source: '$("#resizebleTextarea").resizable({ handles: "all", ghost:true });' }, - { desc: 'Prevent default browser resize (safari textarea)', source: '$("#resizebleTextarea").resizable({ handles: "all", preventDefault: true });' }, - { desc: 'Preserve cursor on resize', source: '$("#resizebleTextarea").resizable({ handles: "all", preserveCursor: true });' }, - { desc: 'Using callbacks', source: '$("#resizebleTextarea").resizable({ handles: "all", start: function(e, ui) { $(this).append("<br>Start!") }, stop: function(e, ui) { $(this).append("<br>Stop!") }, resize: function(e, ui) { /*$(this).append("<br>Resize!");*/ } });' } - ] - } - - ] - - }; - - $(function(){ - - uiRenderDemo(model); - - }); - -</script>
\ No newline at end of file diff --git a/demos/functional/templates/ui.selectable.data.html b/demos/functional/templates/ui.selectable.data.html deleted file mode 100644 index 6c05f56ee..000000000 --- a/demos/functional/templates/ui.selectable.data.html +++ /dev/null @@ -1,8 +0,0 @@ -<ul id="selectable-example" style="list-style:none; cursor: default;"> - <li style='padding: 5px; border: 1px solid #bbb; margin: 3px;'>Apples</li> - <li style='padding: 5px; border: 1px solid #bbb; margin: 3px;'>Bananas</li> - <li style='padding: 5px; border: 1px solid #bbb; margin: 3px;'>Grapes</li> - <li style='padding: 5px; border: 1px solid #bbb; margin: 3px;'>Pineapple</li> - <li style='padding: 5px; border: 1px solid #bbb; margin: 3px;'>Cherries</li> - <li style='padding: 5px; border: 1px solid #bbb; margin: 3px;'>Oranges</li> -</ul>
\ No newline at end of file diff --git a/demos/functional/templates/ui.selectable.html b/demos/functional/templates/ui.selectable.html deleted file mode 100644 index a7ab5cf9a..000000000 --- a/demos/functional/templates/ui.selectable.html +++ /dev/null @@ -1,31 +0,0 @@ -<script type="text/javascript"> - - var model = { - - renderAt: '#containerDemo', - - title: 'Selectable Demos', - - demos: [ - - { - title: 'Selectable', - desc: 'With few lines of code you could have selectable elements. You can try more options on the fly!', - html: { url: 'templates/ui.selectable.data.html' }, - destroy: '$("#selectable-example").selectable("destroy");', - options: [ - { desc: 'Make a simple selectable list', source: '$("#selectable-example").selectable();' }, - { desc: 'Tolerance touch', source: '$("#selectable-example").selectable({ tolerance: "touch" });' } - ] - } - ] - - }; - - $(function(){ - - uiRenderDemo(model); - - }); - -</script>
\ No newline at end of file diff --git a/demos/functional/templates/ui.slider.html b/demos/functional/templates/ui.slider.html deleted file mode 100644 index 3245fe5fa..000000000 --- a/demos/functional/templates/ui.slider.html +++ /dev/null @@ -1,44 +0,0 @@ -<script type="text/javascript"> - - var model = { - - renderAt: '#containerDemo', - - title: 'Slider Demos', - - demos: [ - - { - title: 'Simple slider', - desc: 'With few lines of code you could build a slider. You can try more options on the fly!', - html: '<div id="slider3"><div class="ui-slider-handle"></div></div>', - destroy: '$("#slider3").sortable("destroy");', - options: [ - { - desc: 'Make a simple slider', - source: '$("#slider3").slider();' - } - ] - }, - - { - title: 'Multiple slides', - desc: 'You can also have multiples slides.', - html: '<div id="slider1" class="ui-slider-2"><div class="ui-slider-handle"></div><div class="ui-slider-handle" style="left:100px"></div></div>', - destroy: '$("#slider1").slider("destroy");', - options: [ - { desc: 'Multiple slides', source: '$("#slider1").slider();' } - //, { desc: 'Multiple slides with range', source: '$("#slider1").slider({ range: true });' } - ] - } - - ] - }; - - $(function(){ - - uiRenderDemo(model); - - }); - -</script>
\ No newline at end of file diff --git a/demos/functional/templates/ui.sortable.ex1.html b/demos/functional/templates/ui.sortable.ex1.html deleted file mode 100644 index 4bab245b6..000000000 --- a/demos/functional/templates/ui.sortable.ex1.html +++ /dev/null @@ -1,40 +0,0 @@ -<div class="sortable-container"> - - <div id="example1"> - - <button onclick="$('#selectedUsers').sortable('enable')" type="button">Enable</button> - <button onclick="$('#selectedUsers').sortable('disable')" type="button">Disable</button> - <button onclick="alert($('#selectedUsers').sortable('serialize'))" type="button">Serialize!</button> - <button onclick="alert($('#selectedUsers').sortable('toArray'))" type="button">ID's to Array!</button> - - <br><br> - - <div id="sortable-ex" style="min-height: 110px; min-height:110px; height: auto !important;"> - - <div style="float: left;"> - Selected users - <ul id="selectedUsers" style="cursor: hand; cursor: pointer;"> - <li id='user_Susan'>Susan</li> - <li id='user_Beth'>Beth</li> - <li id='user_Bob'>Bob</li> - <li id='user_Edward'>Edward</li> - <li id='user_Kate'>Kate</li> - </ul> - </div> - - <div style="float: left; margin-left: 50px;"> - User list - <ul id="userList" style="cursor: hand; cursor: pointer;"> - <li id='user_Jack'>Jack</li> - <li id='user_John'>John</li> - <li id='user_Marry'>Marry</li> - <li id='user_Claire'>Claire</li> - <li id='user_Daniel'>Daniel</li> - </ul> - </div> - - <br style="clear: both;"> - - </div> - </div> -</div>
\ No newline at end of file diff --git a/demos/functional/templates/ui.sortable.ex3.html b/demos/functional/templates/ui.sortable.ex3.html deleted file mode 100644 index 9154af0cc..000000000 --- a/demos/functional/templates/ui.sortable.ex3.html +++ /dev/null @@ -1,23 +0,0 @@ -<div class="sortable-container"> - - <div id="example3"> - - <div style="min-height: 50px; min-height:50px; height:auto !important;"> - <style type="text/css"> - #placeholderSortable li { - float: left; - } - </style> - <ul id="placeholderSortable" style="list-style-position: inside; height: 30px; cursor: hand; cursor: pointer;"> - <li id='user_Jack'>Jack</li> - <li id='user_John'>John</li> - <li id='user_Marry'>Marry</li> - <li id='user_Claire'>Claire</li> - <li id='user_Daniel'>Daniel</li> - </ul> - - </div> - - </div> - -</div>
\ No newline at end of file diff --git a/demos/functional/templates/ui.sortable.html b/demos/functional/templates/ui.sortable.html deleted file mode 100644 index d532c0652..000000000 --- a/demos/functional/templates/ui.sortable.html +++ /dev/null @@ -1,55 +0,0 @@ -<script type="text/javascript"> - - var model = { - - onRenderEnd: function() { - - $.ui.disableSelection($('#sortable-ex').get(0)); - - }, - - renderAt: '#containerDemo', - - title: 'Sortable Demos', - - demos: [ - - { - - title: 'Sortable', - desc: 'With few lines of code you could have sortable elements. You can try more options on the fly!', - html: { url: 'templates/ui.sortable.ex1.html' }, - destroy: '$("#selectedUsers").sortable("destroy");', - options: [ - { - desc: 'Make a simple sortable list', - source: - '$("#selectedUsers").sortable({ connectWith: ["#userList"] }); ' + - '$("#userList").sortable({ connectWith: ["#selectedUsers"] });' - } - ] - }, - - { - title: 'Sortable', - desc: 'Floating, with defined placeholder class', - html: { url: 'templates/ui.sortable.ex3.html' }, - destroy: '$("#placeholderSortable").sortable("destroy");', - options: [ - { - desc: 'Floating, with defined placeholder class', - source: '$("#placeholderSortable").sortable({ placeholder: "ui-selected", forcePlaceholderSize: true, revert: true });' - } - ] - } - - ] - }; - - $(function(){ - - uiRenderDemo(model); - - }); - -</script>
\ No newline at end of file diff --git a/demos/functional/templates/ui.tabs.ex1.html b/demos/functional/templates/ui.tabs.ex1.html deleted file mode 100644 index 30bd3ad44..000000000 --- a/demos/functional/templates/ui.tabs.ex1.html +++ /dev/null @@ -1,35 +0,0 @@ -<div id="tabsEx1"> - - <input type="button" onclick="$('#tabsEx1 > ul').tabs('add', '#appended-tab', 'New Tab');" value="Add new tab"> - <input type="button" onclick="$('#tabsEx1 > ul').tabs('add', '#inserted-tab', 'New Tab', 1);" value="Insert tab"> - <input type="button" onclick="$('#tabsEx1 > ul').tabs('disable', 1);" value="Disable tab 2"> - <input type="button" onclick="$('#tabsEx1 > ul').tabs('enable', 1);" value="Enable tab 2"> - <input type="button" onclick="$('#tabsEx1 > ul').tabs('select', 2);" value="Select tab 3"> - - <br><br> - - <ul style="height: 30px;"> - <li><a href="#fragment-1"><span>One</span></a></li> - <li><a href="#fragment-2"><span>Two</span></a></li> - <li><a href="#fragment-3"><span>Three</span></a></li> - </ul> - <div id="fragment-1"> - <p>First tab is active by default</p> - </div> - <div id="fragment-2"> - <p><b>Second tab is active</b></p><br> - <p>Alternative ways to specify the active tab will overrule this argument, listed in the order of their precedence:</p><br> - <ol> - <li>If a fragment identifier (hash) in the URL of the page refers to the id of a tab panel of a tab interface the corresponding tab will become the initial tab.</li> - <li>Same if you use the cookie option to save the latest selected tab in.</li> - <li>Last not least you can set the selected tab by attaching the selected tab class - class (default: "ui-tabs-selected") to one of the <code>li</code> elements - representing a single tab.</li> - </ol> - </div> - <div id="fragment-3"> - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. - </div> -</div>
\ No newline at end of file diff --git a/demos/functional/templates/ui.tabs.html b/demos/functional/templates/ui.tabs.html deleted file mode 100644 index 902ae91bb..000000000 --- a/demos/functional/templates/ui.tabs.html +++ /dev/null @@ -1,54 +0,0 @@ -<script type="text/javascript"> - - var model = { - - renderAt: '#containerDemo', - - title: 'Tabs Demos', - - demos: [ - - { - title: 'Simple Tabs', - desc: 'With few lines of code you could make tabs. You can try more options on the fly!', - html: { url: 'templates/ui.tabs.ex1.html' }, - destroy: '$("tabsEx1 > ul").tabs("destroy");', - options: [ - { - desc: 'First tab active by default', - source: '$("#tabsEx1 > ul").tabs();' - }, - { - desc: 'Start With Custom Tab', - source: '$("#tabsEx1 > ul").tabs({selected:1});' - }, - { - desc: 'Use a slide effect to switch tabs', - source: '$("#tabsEx1 > ul").tabs({ fx: { height: "toggle" } });' - }, - { - desc: 'Use a fade effect to switch tabs', - source: '$("#tabsEx1 > ul").tabs({ fx: { opacity: "toggle" } });' - }, - { - desc: 'Use a combined slide and fade effect to switch tabs', - source: '$("#tabsEx1 > ul").tabs({ fx: { height: "toggle", opacity: "toggle" } });' - }, - { - desc: 'Define event to switch tabs (mouseover)', - source: '$("#tabsEx1 > ul").tabs({ event: "mouseover" });' - } - ] - } - - ] - - }; - - $(function(){ - - uiRenderDemo(model); - - }); - -</script>
\ No newline at end of file diff --git a/demos/functional/templates/ui.tabs.php b/demos/functional/templates/ui.tabs.php deleted file mode 100644 index 370e24baf..000000000 --- a/demos/functional/templates/ui.tabs.php +++ /dev/null @@ -1,88 +0,0 @@ -<style> - -#divTabs, #divAddTabs { - height:30px; -} - -</style> - -<div id="containerDemo"></div> - -<script type="text/javascript"> - - var model = { - - renderAt: '#containerDemo', - - title: 'Tabs Demos', - - demos: [ - - { - title: 'Simple Tabs', - html: ['<div><ul id="divTabs">', - '<li><a href="#tabs-fragment-1"><span>One</span></a></li>', - '<li><a href="#tabs-fragment-2"><span>Two</span></a></li>', - '<li><a href="#tabs-fragment-3"><span>Three</span></a></li>', - '</ul>', - '<div id="tabs-fragment-1">', - 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.', - 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.', - '</div>', - '<div id="tabs-fragment-2">', - 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.', - 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.', - 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.', - '</div>', - '<div id="tabs-fragment-3">', - 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.', - 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.', - 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.', - 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.', - '</div></div>'].join(''), - destroy: '$("#divTabs").tabs("destroy");', - - options: [ - { desc: 'Simple Tabs', source: '$("#divTabs").tabs();' }, - { desc: 'Simple Cloned Tabs', source: '$("#divTabs").clone().tabs();' }, - { desc: 'Simple Empty Tabs', source: '$("#divTabs").tabs();' }, - { desc: 'Simple Detached Tabs', source: '$("<div></div>").tabs();' } - ] - }, - { - title: 'Add A Tab', - html: ['<div><ul id="divAddTabs">', - '<li><a href="#addtabs-fragment-1"><span>One</span></a></li>', - '<li><a href="#addtabs-fragment-2"><span>Two</span></a></li>', - '<li><a href="#addtabs-fragment-3"><span>Three</span></a></li>', - '</ul>', - '<div id="addtabs-fragment-1">', - 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.', - 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.', - '</div>', - '<div id="addtabs-fragment-2">', - 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.', - 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.', - '</div>', - '<div id="addtabs-fragment-3">', - 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.', - 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.', - 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.', - '</div></div>'].join(''), - destroy: '$("#divAddTabs").tabs("destroy");', - - options: [ - { desc: 'Simple Dialog', source: '$("#divAddTabs").tabs("add", "#", "Added");' } - ] - }, - ] - - }; - - $(window).load(function(){ - - uiRenderDemo(model); - - }); - -</script> |
