Updated layout demos

demos/examples/form/10.html

@@ -29,23 +29,23 @@ <h1>Form with Tabs and Columns</h1>
                     page: 0,
                     column: 0,
                     label: 'First Name',
-                    span: 4
+                    span: 6
                 }
             },
             { field: 'last_name', type: 'text',
                 html: {
                     page: 0,
                     column: 0,
                     label: 'Last Name',
-                    span: 4
+                    span: 6
                 }
             },
             { field: 'middle_name',  type: 'text',
                 html: {
                     page: 0,
                     column: 0,
                     label: 'Middle Name',
-                    span: 4
+                    span: 6
                 }
             },
             { field: 'Other', type: 'textarea',

demos/examples/form/19.html

@@ -31,23 +31,23 @@ <h1>Collapsible Groups</h1>
                     page: 0,
                     column: 0,
                     label: 'First Name',
-                    span: 4
+                    span: 6
                 }
             },
             { field: 'last_name', type: 'text',
                 html: {
                     page: 0,
                     column: 0,
                     label: 'Last Name',
-                    span: 4
+                    span: 6
                 }
             },
             { field: 'middle_name',  type: 'text',
                 html: {
                     page: 0,
                     column: 0,
                     label: 'Middle Name',
-                    span: 4
+                    span: 6
                 }
             },
             { field: 'Other', type: 'textarea',
@@ -57,10 +57,10 @@ <h1>Collapsible Groups</h1>
                     group: 'Additional Info',
                     groupCollapsible: true,
                     groupCollapsable: true, // misspelled in 1.5.0
-                    groupStyle: 'min-height: 115px',
+                    groupStyle: 'min-height: 140px',
                     label: 'Other',
                     span: -1,
-                    attr: 'style="width: 100%; resize: vertical"'
+                    attr: 'style="width: 100%; height: 90px; resize: vertical"'
                 }
             },
             { field: 'address1', type: 'text',
@@ -86,7 +86,7 @@ <h1>Collapsible Groups</h1>
                     group: 'Address Group 2',
                     groupCollapsible: true,
                     groupCollapsable: true, // misspelled in 1.5.0
-                    groupStyle: 'height: 170px',
+                    groupStyle: 'height: 197px',
                     label: 'City',
                     column: 1,
                 }

demos/examples/layout/1.html

@@ -16,7 +16,7 @@ <h1>Simple Layout</h1>
 <!--CODE-->
 <script>
 $(function () {
-    var pstyle = 'border: 1px solid #dfdfdf; padding: 5px;';
+    var pstyle = 'border: 1px solid #efefef; padding: 5px;';
     $('#layout').w2layout({
         name: 'layout',
         panels: [

demos/examples/layout/10.html

@@ -26,13 +26,13 @@ <h1>Panel with Title</h1>
 <!--CODE-->
 <script>
 $(function () {
-    var pstyle = 'border: 1px solid #dfdfdf; padding: 5px;';
+    var pstyle = 'border: 1px solid #efefef; padding: 5px;';
     $('#layout').w2layout({
         name: 'layout',
         panels: [
             { type: 'top', size: 100, resizable: true, style: pstyle, content: 'top', title: 'top title' },
             { type: 'left', size: 200, resizable: true, style: pstyle, content: 'left', title: 'left title' },
-            { type: 'main', style: pstyle + 'border-top: 0px;', content: 'main', title: 'Main Title'}
+            { type: 'main', style: pstyle, content: 'main', title: 'Main Title'}
         ]
     });
 });

demos/examples/layout/11.html

@@ -20,12 +20,12 @@ <h1>Panel Messages</h1>
 <!--CODE-->
 <script>
 $(function () {
-    var pstyle = 'border: 1px solid #dfdfdf; padding: 5px;';
+    var pstyle = 'border: 1px solid #efefef; padding: 5px;';
     $('#layout').w2layout({
         name: 'layout',
         panels: [
             { type: 'left', size: 200, resizable: true, style: pstyle, content: 'left' },
-            { type: 'main', style: pstyle + 'border-top: 0px;', content: 'main' }
+            { type: 'main', style: pstyle, content: 'main' }
         ]
     });
 });

demos/examples/layout/12.html

@@ -21,14 +21,14 @@ <h1>Fixed Size Main Panel</h1>
 <!--CODE-->
 <script>
 $(function () {
-    var pstyle = 'border: 1px solid #dfdfdf; padding: 5px;';
+    var pstyle = 'border: 1px solid #efefef; padding: 5px;';
     $('#layout').w2layout({
         name: 'layout',
         padding: 5,
         panels: [
             { type: 'left', size: 200, resizable: true, style: pstyle, content: 'left' },
-            { type: 'main', style: pstyle + 'border-top: 0px;', content: 'main' },
-            { type: 'right', style: pstyle + 'border-top: 0px;', size: -300, content: 'right', resizable: true }
+            { type: 'main', style: pstyle, content: 'main' },
+            { type: 'right', style: pstyle, size: -300, content: 'right', resizable: true }
         ]
     });
 });

demos/examples/layout/13.html

@@ -1,4 +1,4 @@
-<div class="content">
+div class="content">
     <div id="example_title">
         <h1>When Content is Removed</h1>
         <p>
@@ -22,12 +22,12 @@ <h1>When Content is Removed</h1>
 <!--CODE-->
 <script>
 $(function () {
-    var pstyle = 'border: 1px solid #dfdfdf; padding: 5px;';
+    var pstyle = 'border: 1px solid #efefef; padding: 5px;';
     $('#layout').w2layout({
         name: 'layout',
         panels: [
             { type: 'left', size: 200, resizable: true, style: pstyle, content: 'left' },
-            { type: 'main', style: pstyle + 'border-top: 0px;', content: 'main',
+            { type: 'main', style: pstyle, content: 'main',
                 callBack(event) {
                     $('#log').html('Original content is removed')
                 }

demos/examples/layout/2.html

@@ -15,7 +15,7 @@ <h1>Resizable Panels</h1>
 <!--CODE-->
 <script>
 $(function () {
-    var pstyle = 'border: 1px solid #dfdfdf; padding: 5px;';
+    var pstyle = 'border: 1px solid #efefef; padding: 5px;';
     $('#layout').w2layout({
         name: 'layout',
         padding: 4,

demos/examples/layout/3.html

@@ -21,7 +21,7 @@ <h1>Show/Hide Panels</h1>
 <!--CODE-->
 <script>
 $(function () {    
-    var pstyle = 'border: 1px solid #dfdfdf; padding: 5px;';
+    var pstyle = 'border: 1px solid #efefef; padding: 5px;';
     $('#layout').w2layout({
         name: 'layout',
         panels: [

demos/examples/layout/4.html

@@ -29,7 +29,7 @@ <h1>Load Content</h1>
 <!--CODE-->
 <script>
 $(function () {
-    var pstyle = 'border: 1px solid #dfdfdf; padding: 5px;';
+    var pstyle = 'border: 1px solid #efefef; padding: 5px;';
     $('#layout').w2layout({
         name: 'layout',
         panels: [

demos/examples/layout/5.html

@@ -28,7 +28,7 @@ <h1>Transitions</h1>
 <!--CODE-->
 <script>
 $(function () {
-    var pstyle = 'border: 1px solid #dfdfdf; padding: 5px;';
+    var pstyle = 'border: 1px solid #efefef; padding: 5px;';
     $('#layout').w2layout({
         name: 'layout',
         panels: [

demos/examples/layout/6.html

@@ -27,7 +27,7 @@ <h1>Event Listeners</h1>
 <script>
 var instant = false;
 $(function () {    
-    var pstyle = 'border: 1px solid #dfdfdf; padding: 5px;';
+    var pstyle = 'border: 1px solid #efefef; padding: 5px;';
     $('#layout').w2layout({
         name: 'layout',
         panels: [

demos/examples/layout/7.html

@@ -31,7 +31,7 @@ <h1>Nested Layouts</h1>
 <!--CODE-->
 <script>
 $(function () {
-    var pstyle = 'border: 1px solid #dfdfdf; padding: 5px;';
+    var pstyle = 'border: 1px solid #efefef; padding: 5px;';
     $('#layout').w2layout({
         name: 'layout',
         panels: [
@@ -43,7 +43,7 @@ <h1>Nested Layouts</h1>
             { type: 'bottom', size: 50, resizable: true, hidden: true, style: pstyle, content: 'bottom' }
         ]
     });
-    var pstyle = 'background-color: #F0F0C1; border: 1px solid #dfdfdf; padding: 5px;';
+    var pstyle = 'background-color: #F0F0C1; border: 1px solid #efefef; padding: 5px;';
     $().w2layout({
         name: 'layout2',
         panels: [

demos/examples/layout/8.html

@@ -28,22 +28,22 @@ <h1>Panel with Tabs</h1>
 <!--CODE-->
 <script>
 $(function () {
-    var pstyle = 'border: 1px solid #dfdfdf; padding: 5px;';
+    var pstyle = 'border: 1px solid #efefef; padding: 5px;';
     $('#layout').w2layout({
         name: 'layout',
         panels: [
-            { type: 'top', size: 50, resizable: true, style: pstyle, content: 'top' },
-            { type: 'left', size: 200, resizable: true, style: pstyle, content: 'left' },
-            { type: 'main', style: pstyle + 'border-top: 0px;', content: 'main',
+            { type: 'top', size: 50, resizable: true, style: pstyle, html: 'top' },
+            { type: 'left', size: 200, resizable: true, style: pstyle, html: 'left' },
+            { type: 'main', style: pstyle, html: 'main',
                 tabs: {
                     active: 'tab1',
                     tabs: [
-                        { id: 'tab1', caption: 'Tab 1' },
-                        { id: 'tab2', caption: 'Tab 2' },
-                        { id: 'tab3', caption: 'Tab 3' }
+                        { id: 'tab1', text: 'Tab 1' },
+                        { id: 'tab2', text: 'Tab 2' },
+                        { id: 'tab3', text: 'Tab 3' }
                     ],
-                    onClick: function (event) {
-                        this.owner.html('main', event);
+                    onClick (event) {
+                        this.owner.html('main', event.target);
                     }
                 }
             }

demos/examples/layout/9.html

@@ -21,30 +21,32 @@ <h1>Panel with Toolbar</h1>
 <!--CODE-->
 <script>
 $(function () {    
-    var pstyle = 'border: 1px solid #dfdfdf; padding: 5px;';
+    var pstyle = 'border: 1px solid #efefef; padding: 5px;';
     $('#layout').w2layout({
         name: 'layout',
         panels: [
-            { type: 'top', size: 50, resizable: true, style: pstyle, content: 'top' },
-            { type: 'left', size: 200, resizable: true, style: pstyle, content: 'left' },
-            { type: 'main', style: pstyle + 'border-top: 0px;', content: 'content', 
+            { type: 'top', size: 50, resizable: true, style: pstyle, html: 'top' },
+            { type: 'left', size: 200, resizable: true, style: pstyle, html: 'left' },
+            { type: 'main', style: pstyle, html: 'content',
                 toolbar: {
                     items: [
-                        { type: 'check',  id: 'item1', caption: 'Check', img: 'icon-page', checked: true },
-                        { type: 'break',  id: 'break0' },
-                        { type: 'menu',   id: 'item2', caption: 'Drop Down', img: 'icon-folder', items: [
-                            { text: 'Item 1', icon: 'icon-page' }, 
-                            { text: 'Item 2', icon: 'icon-page' }, 
-                            { text: 'Item 3', value: 'Item Three', icon: 'icon-page' }
-                        ]},
+                        { type: 'check', id: 'item1', text: 'Check', img: 'icon-page', checked: true },
+                        { type: 'break', id: 'break0' },
+                        { type: 'menu', id: 'item2', text: 'Drop Down', img: 'icon-folder',
+                            items: [
+                                { text: 'Item 1', icon: 'icon-page' },
+                                { text: 'Item 2', icon: 'icon-page' },
+                                { text: 'Item 3', value: 'Item Three', icon: 'icon-page' }
+                            ]
+                        },
                         { type: 'break', id: 'break1' },
-                        { type: 'radio',  id: 'item3',  group: '1', caption: 'Radio 1', img: 'icon-page', hint: 'Hint for item 3', checked: true },
-                        { type: 'radio',  id: 'item4',  group: '1', caption: 'Radio 2', img: 'icon-page', hint: 'Hint for item 4' },
+                        { type: 'radio', id: 'item3', group: '1', text: 'Radio 1', img: 'icon-page', tooltip: 'Hint for item 3', checked: true },
+                        { type: 'radio', id: 'item4', group: '1', text: 'Radio 2', img: 'icon-page', tooltip: 'Hint for item 4' },
                         { type: 'spacer' },
-                        { type: 'button',  id: 'item5',  caption: 'Item 5', icon: 'w2ui-icon-check', hint: 'Hint for item 5' }
+                        { type: 'button', id: 'item5', text: 'Item 5', icon: 'w2ui-icon-check', tooltip: 'Hint for item 5' }
                     ],
-                    onClick: function (event) {
-                        this.owner.content('main', event);
+                    onClick(event) {
+                        this.owner.html('main', `EVENT: ${event.type}<br>TARGET: ${event.target}`);
                     }
                 }
             }