Functional demos

-Add 1.6 widgets links
-Add spinner
-Add colorpicker

diff --git a/demos/functional/index.html b/demos/functional/index.html
index 65172a4c7fea4b6b236969b19dce3646d4a08887..a4a5478eadd7a9abf9dbe9098ae6d3798dc1b004 100644 (file)
--- a/demos/functional/index.html
+++ b/demos/functional/index.html
@@ -16,11 +16,15 @@
                        <link rel="stylesheet" href="css/functional_demos.css" type="text/css" media="screen">
                        <link rel="stylesheet" href="css/chilli-recipes.css" type="text/css" media="screen">
                        <link rel="stylesheet" href="../../themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)" />
+                       <link rel="stylesheet" href="../../themes/default/ui.autocomplete.css" type="text/css" media="screen" title="Autocomplete (Default)" />
+                       <link rel="stylesheet" href="../../themes/default/ui.colorpicker.css" type="text/css" media="screen" title="Colorpicker (Default)" />
                        
                        <script type="text/javascript" src="../../jquery-1.2.6.js"></script>
                
                        <script type="text/javascript" src="../../ui/ui.core.js"></script>
                        <script type="text/javascript" src="../../ui/ui.accordion.js"></script>
+                       <script type="text/javascript" src="../../ui/ui.autocomplete.js"></script>
+                       <script type="text/javascript" src="../../ui/ui.colorpicker.js"></script>
                        <script type="text/javascript" src="../../ui/ui.datepicker.js"></script>
                        <script type="text/javascript" src="../../ui/i18n/ui.datepicker-ar.js"></script>
                        <script type="text/javascript" src="../../ui/i18n/ui.datepicker-bg.js"></script>
@@ -58,8 +62,11 @@
                        <script type="text/javascript" src="../../ui/ui.draggable.js"></script>
                        <script type="text/javascript" src="../../ui/ui.droppable.js"></script>
                        <script type="text/javascript" src="../../ui/ui.resizable.js"></script>
+                       <script type="text/javascript" src="../../ui/ui.magnifier.js"></script>
+                       <script type="text/javascript" src="../../ui/ui.progressbar.js"></script>
                        <script type="text/javascript" src="../../ui/ui.selectable.js"></script>
                        <script type="text/javascript" src="../../ui/ui.slider.js"></script>
+                       <script type="text/javascript" src="../../ui/ui.spinner.js"></script>
                        <script type="text/javascript" src="../../ui/ui.sortable.js"></script>
                        <script type="text/javascript" src="../../ui/ui.tabs.js"></script>
                        <script type="text/javascript" src="../../ui/effects.core.js"></script>
@@ -149,9 +156,14 @@
 
                                                  <ul class="component-links">
                                                                <li><a href="#ui.accordion" title="Goto Accordion's Component Page">Accordion</a></li>
+                                                               <li><a href="#ui.autocomplete" title="Goto Accordion's Component Page">Autocomplete</a></li>
+                                                               <li><a href="#ui.colorpicker" title="Goto Colorpicker's Component Page">Colorpicker</a></li>
                                                                <li><a href="#ui.datepicker" title="Goto Datepicker's Component Page">Datepicker</a></li>
                                                                <li><a href="#ui.dialog" title="Goto Dialog's Component Page">Dialog</a></li>
+                                                               <li><a href="#ui.magnifier" title="Goto Spinner Component Page">Magnifier</a></li>
+                                                               <li><a href="#ui.progressbar" title="Goto Spinner Component Page">Progressbar</a></li>
                                                                <li><a href="#ui.slider" title="Goto Slider Component Page">Slider</a></li>
+                                                               <li><a href="#ui.spinner" title="Goto Spinner Component Page">Spinner</a></li>
                                                                <li><a href="#ui.tabs" title="Goto Tabs Component Page">Tabs</a></li>
                                                        </ul>
                                        </div>
@@ -216,4 +228,4 @@
 <!--[if lte IE 7]></div><![endif]-->
 </body>
 
-</html>
\ No newline at end of file
+</html>

diff --git a/demos/functional/templates/ui.colorpicker.html b/demos/functional/templates/ui.colorpicker.html
new file mode 100644 (file)
index 0000000..33b57ec
--- /dev/null
+++ b/demos/functional/templates/ui.colorpicker.html
@@ -0,0 +1,41 @@
+<script type="text/javascript">\r
+\r
+       var model = {\r
+               \r
+               renderAt: '#containerDemo',\r
+\r
+               title: 'Colorpicker Demos',\r
+               \r
+               demos: [\r
+\r
+                       {\r
+                               title: 'Inline colorpicker',\r
+                               desc: 'With few lines of code you could build a colorpicker. You can try more options on the fly!',\r
+                               html: '<div id="colorpicker" />',\r
+                               destroy: '$("#colorpicker").colorpicker("destroy");',\r
+                               options: [\r
+                                       { desc: 'Make a colorpicker', source: '$("#colorpicker").colorpicker({flat:true});' }\r
+                               ]\r
+                       },\r
+\r
+                       {\r
+                               title: 'Triggered colorpicker',\r
+                               desc: 'With few lines of code you could build a colorpicker. You can try more options on the fly!',\r
+                               html: '<input id="colorpicker2" />',\r
+                               destroy: '$("#colorpicker2").colorpicker("destroy");',\r
+                               options: [\r
+                                       { desc: 'Make a colorpicker', source: '$("#colorpicker2").colorpicker( {submit: function(e,ui) {                $("#colorpicker2").val(ui.hex);} });' },\r
+                                       { desc: 'Fade in/out a colorpicker', source: '$("#colorpicker2").colorpicker( {show: function (e,ui) { $(this).data("colorpicker").picker.fadeIn(500);return false; }, hide: function (e,ui) { $(this).data("colorpicker").picker.fadeOut(500);return false; }, change: function(e,ui) { $("#colorpicker2").val(ui.hex); } });' }\r
+                               ]\r
+                       }\r
+\r
+               ]\r
+       };\r
+\r
+       $(function(){\r
+\r
+               uiRenderDemo(model);\r
+\r
+       });\r
+\r
+</script>
\ No newline at end of file

diff --git a/demos/functional/templates/ui.spinner.html b/demos/functional/templates/ui.spinner.html
new file mode 100644 (file)
index 0000000..571163f
--- /dev/null
+++ b/demos/functional/templates/ui.spinner.html
@@ -0,0 +1,35 @@
+<script type="text/javascript">\r
+\r
+       var model = {\r
+               \r
+               renderAt: '#containerDemo',\r
+\r
+               title: 'Spinner Demos',\r
+               \r
+               demos: [\r
+\r
+                       {\r
+                               title: 'Simple spinner',\r
+                               desc: 'With few lines of code you could build a spinner. You can try more options on the fly!',\r
+                               html: '<input id="spinner" type="text" />',\r
+                               destroy: '$("#spinner").spinner("destroy");',\r
+                               options: [\r
+                                       { desc: 'Make a spinner', source: '$("#spinner").spinner();' },\r
+                                       { desc: 'A spinner with min and max value', source: '$("#spinner").spinner({min:-100, max:150});' },\r
+                                       { desc: 'Big stepping', source: '$("#spinner").spinner({stepping:100});' },\r
+                                       { desc: 'Disable incremental option', source: '$("#spinner").spinner({incremental:false});' },\r
+                                       { desc: 'Enable the spinner', source: '$("#spinner").attr("disabled","");' },\r
+                                       { desc: 'Disable the spinner', source: '$("#spinner").attr("disabled","disabled");' }\r
+                               ]\r
+                       }\r
+\r
+               ]\r
+       };\r
+\r
+       $(function(){\r
+\r
+               uiRenderDemo(model);\r
+\r
+       });\r
+\r
+</script>
\ No newline at end of file