diff options
Diffstat (limited to 'demos/functional/templates')
27 files changed, 723 insertions, 0 deletions
diff --git a/demos/functional/templates/images/P1010020.JPG b/demos/functional/templates/images/P1010020.JPG Binary files differnew file mode 100644 index 000000000..cba634588 --- /dev/null +++ b/demos/functional/templates/images/P1010020.JPG diff --git a/demos/functional/templates/images/P1010036.JPG b/demos/functional/templates/images/P1010036.JPG Binary files differnew file mode 100644 index 000000000..1d062b364 --- /dev/null +++ b/demos/functional/templates/images/P1010036.JPG diff --git a/demos/functional/templates/images/P1010039.JPG b/demos/functional/templates/images/P1010039.JPG Binary files differnew file mode 100644 index 000000000..2d0b6c726 --- /dev/null +++ b/demos/functional/templates/images/P1010039.JPG diff --git a/demos/functional/templates/images/P1010044.JPG b/demos/functional/templates/images/P1010044.JPG Binary files differnew file mode 100644 index 000000000..9d0cccf86 --- /dev/null +++ b/demos/functional/templates/images/P1010044.JPG diff --git a/demos/functional/templates/images/P1010050.JPG b/demos/functional/templates/images/P1010050.JPG Binary files differnew file mode 100644 index 000000000..89a36b78b --- /dev/null +++ b/demos/functional/templates/images/P1010050.JPG diff --git a/demos/functional/templates/images/P1010055.JPG b/demos/functional/templates/images/P1010055.JPG Binary files differnew file mode 100644 index 000000000..889b4e67d --- /dev/null +++ b/demos/functional/templates/images/P1010055.JPG diff --git a/demos/functional/templates/images/P1010058.JPG b/demos/functional/templates/images/P1010058.JPG Binary files differnew file mode 100644 index 000000000..6a83a628b --- /dev/null +++ b/demos/functional/templates/images/P1010058.JPG diff --git a/demos/functional/templates/images/P1010059.JPG b/demos/functional/templates/images/P1010059.JPG Binary files differnew file mode 100644 index 000000000..6aac87261 --- /dev/null +++ b/demos/functional/templates/images/P1010059.JPG diff --git a/demos/functional/templates/images/P1010061.JPG b/demos/functional/templates/images/P1010061.JPG Binary files differnew file mode 100644 index 000000000..bfe698e86 --- /dev/null +++ b/demos/functional/templates/images/P1010061.JPG diff --git a/demos/functional/templates/images/P1010063.JPG b/demos/functional/templates/images/P1010063.JPG Binary files differnew file mode 100644 index 000000000..88c22e021 --- /dev/null +++ b/demos/functional/templates/images/P1010063.JPG diff --git a/demos/functional/templates/images/Thumbs.db b/demos/functional/templates/images/Thumbs.db Binary files differnew file mode 100644 index 000000000..45328e384 --- /dev/null +++ b/demos/functional/templates/images/Thumbs.db diff --git a/demos/functional/templates/images/puppy.jpg b/demos/functional/templates/images/puppy.jpg Binary files differnew file mode 100644 index 000000000..df6db4e9b --- /dev/null +++ b/demos/functional/templates/images/puppy.jpg diff --git a/demos/functional/templates/ui.accordion.data.html b/demos/functional/templates/ui.accordion.data.html new file mode 100644 index 000000000..79b1aa6d6 --- /dev/null +++ b/demos/functional/templates/ui.accordion.data.html @@ -0,0 +1,35 @@ +<ul id="accordionDemo" class="ui-accordion-container" style="width: 200px; height: 450px;"> + <li> + <span class="ui-accordion-left"></span> + <a href='#' class="ui-accordion-link"> + Test 1 + <span class="ui-accordion-right"></span> + </a> + <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> + <span class="ui-accordion-left"></span> + <a href='#' class="ui-accordion-link">Test 2<span class="ui-accordion-right"></span></a> + <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> + <span class="ui-accordion-left"></span> + <a href='#' class="ui-accordion-link">Test 3<span class="ui-accordion-right"></span></a> + <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> + <li> + <span class="ui-accordion-left"></span> + <a href='#' class="ui-accordion-link">Test 4<span class="ui-accordion-right"></span></a> + <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> + <li> + <span class="ui-accordion-left"></span> + <a href='#' class="ui-accordion-link">Test 5<span class="ui-accordion-right"></span></a> + <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 new file mode 100644 index 000000000..57191bf04 --- /dev/null +++ b/demos/functional/templates/ui.accordion.html @@ -0,0 +1,33 @@ +<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"});' }, + { desc: 'Simple Accordion', source: '$("#accordionDemo").accordion();' } + ] + } + ] + + }; + + $(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 new file mode 100644 index 000000000..94aca5774 --- /dev/null +++ b/demos/functional/templates/ui.draggable.html @@ -0,0 +1,85 @@ +<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: 90px; font-size: 10px;" /></div>', + destroy: '$("#draggable-dragPrevention").draggable("destroy");', + + options: [ + { desc: 'Drag using a handle', source: '$("#draggable-dragPrevention").draggable({ dragPrevention: "a,input,textarea" });' }, + { desc: 'Drag using a handle with a helper', source: '$("#draggable-dragPrevention").draggable({ helper: "clone", dragPrevention: "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 new file mode 100644 index 000000000..fa9d7249a --- /dev/null +++ b/demos/functional/templates/ui.droppable.html @@ -0,0 +1,87 @@ +<script type="text/javascript"> + + var model = { + + renderAt: '#containerDemo', + + title: 'Doppable 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 new file mode 100644 index 000000000..deab134dc --- /dev/null +++ b/demos/functional/templates/ui.droppable.photos.html @@ -0,0 +1,17 @@ +<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.resizable.html b/demos/functional/templates/ui.resizable.html new file mode 100644 index 000000000..121d70a98 --- /dev/null +++ b/demos/functional/templates/ui.resizable.html @@ -0,0 +1,92 @@ +<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 proxy', source: '$("#simpleDiv").resizable({ handles: "all", proxy: "proxy" });' }, + { desc: 'Preserving ratio', source: '$("#simpleDiv").resizable({ handles: "all", aspectRatio: true, proxy: "proxy" });' }, + { desc: 'Autohide handles', source: '$("#simpleDiv").resizable({ handles: "all", autohide:true });' }, + { desc: 'Transparent handles', source: '$("#simpleDiv").resizable({ handles: "all", transparent: true, proxy: "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 proxy', source: '$("#resizebleImage").resizable({ handles: "all", proxy: "proxy" });' }, + { desc: 'Preserving ratio', source: '$("#resizebleImage").resizable({ handles: "all", aspectRatio: true, proxy: "proxy" });' }, + { desc: 'Autohide handles', source: '$("#resizebleImage").resizable({ handles: "all", autohide:true });' }, + { desc: 'Transparent handles', source: '$("#resizebleImage").resizable({ handles: "all", transparent: true, proxy: "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 proxy', source: '$("#resizebleTextarea").resizable({ handles: "all", proxy: "proxy" });' }, + { desc: 'Preserving ratio', source: '$("#resizebleTextarea").resizable({ handles: "all", aspectRatio: true, proxy: "proxy" });' }, + { desc: 'Autohide handles', source: '$("#resizebleTextarea").resizable({ handles: "all", autohide:true });' }, + { desc: 'Transparent handles', source: '$("#resizebleTextarea").resizable({ handles: "all", transparent: true, proxy: "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 new file mode 100644 index 000000000..ad60e0456 --- /dev/null +++ b/demos/functional/templates/ui.selectable.data.html @@ -0,0 +1,8 @@ +<ul id="selectable-example" style="list-style:none; cursor: default;"> + <li style='padding: 5px; border: 1px solid #bbb; margin: 3px;'>MacBook Pro</li> + <li style='padding: 5px; border: 1px solid #bbb; margin: 3px;'>iMac</li> + <li style='padding: 5px; border: 1px solid #bbb; margin: 3px;'>MacBook</li> + <li style='padding: 5px; border: 1px solid #bbb; margin: 3px;'>Time Capsule</li> + <li style='padding: 5px; border: 1px solid #bbb; margin: 3px;'>Apple Cinema Display</li> + <li style='padding: 5px; border: 1px solid #bbb; margin: 3px;'>Mac mini</li> +</ul>
\ No newline at end of file diff --git a/demos/functional/templates/ui.selectable.html b/demos/functional/templates/ui.selectable.html new file mode 100644 index 000000000..a7ab5cf9a --- /dev/null +++ b/demos/functional/templates/ui.selectable.html @@ -0,0 +1,31 @@ +<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 new file mode 100644 index 000000000..c05cd605e --- /dev/null +++ b/demos/functional/templates/ui.slider.html @@ -0,0 +1,44 @@ +<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 new file mode 100644 index 000000000..4d3cdbac9 --- /dev/null +++ b/demos/functional/templates/ui.sortable.ex1.html @@ -0,0 +1,40 @@ +<div class="sortable-container"> + + <div id="example1"> + + <button onclick="$('#selectedUsers').sortable('enable')">Enable</button> + <button onclick="$('#selectedUsers').sortable('disable')">Disable</button> + <button onclick="alert($('#selectedUsers').sortable('serialize'))">Serialize!</button> + <button onclick="alert($('#selectedUsers').sortable('toArray'))">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 new file mode 100644 index 000000000..1d460fd01 --- /dev/null +++ b/demos/functional/templates/ui.sortable.ex3.html @@ -0,0 +1,19 @@ +<div class="sortable-container"> + + <div id="example3"> + + <div style="min-height: 50px; min-height:50px; height:auto !important;"> + + <ul id="placeholderSortable" style="list-style-position: inside; height: 30px; cursor: hand; cursor: pointer;"> + <li id='user_Jack' style="float: left;">Jack</li> + <li id='user_John' style="float: left;">John</li> + <li id='user_Marry' style="float: left;">Marry</li> + <li id='user_Claire' style="float: left;">Claire</li> + <li id='user_Daniel' style="float: left;">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 new file mode 100644 index 000000000..55ea4b7a6 --- /dev/null +++ b/demos/functional/templates/ui.sortable.html @@ -0,0 +1,55 @@ +<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", 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 new file mode 100644 index 000000000..12d9740ba --- /dev/null +++ b/demos/functional/templates/ui.tabs.ex1.html @@ -0,0 +1,35 @@ +<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 new file mode 100644 index 000000000..902ae91bb --- /dev/null +++ b/demos/functional/templates/ui.tabs.html @@ -0,0 +1,54 @@ +<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 new file mode 100644 index 000000000..cf4e89e81 --- /dev/null +++ b/demos/functional/templates/ui.tabs.php @@ -0,0 +1,88 @@ +<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" class="flora">', + '<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/>").tabs();' } + ] + }, + { + title: 'Add A Tab', + html: ['<div><ul id="divAddTabs" class="flora">', + '<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> |
