Skip to content

Commit

Permalink
Updated docs & demos for w2toolbar
Browse files Browse the repository at this point in the history
  • Loading branch information
@vitmalina
vitmalina committed Dec 31, 2015
1 parent cf7ce34 commit 38c2250
Show file tree
Hide file tree
Showing 42 changed files with 1,119 additions and 466 deletions.
27 changes: 20 additions & 7 deletions demos/examples/toolbar-1.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,25 +3,38 @@
<h1>Simple Toolbar</h1>
The example below demonstrates how to create toolbars. The toolbar can hold multiple items and supports sprite icons or
iconic fonts. You can have both images and icon fonts in the same toolbar. For the click event info, see the console.
<div style="height: 20px"></div>
Simple button types are:
<ul>
<li>button</li>
<li>radio</li>
<li>check</li>
<li>break</li>
<li>spacer</li>
</ul>
</div>
<div id="example_view"></div>
<div id="example_code"></div>
</div>

<!--CODE-->
<div id="toolbar" style="padding: 4px; border: 1px solid silver; border-radius: 3px"></div>
<div id="toolbar" style="padding: 4px; border: 1px solid #dfdfdf; border-radius: 3px"></div>

<!--CODE-->
<script>
$(function () {
$(function () {
$('#toolbar').w2toolbar({
name: 'toolbar',
items: [
{ type: 'button', id: 'item1', caption: 'Item 1', img: 'icon-page', hint: 'Hint for item 1' },
{ type: 'button', id: 'item2', caption: 'Item 2', icon: 'fa-wrench', hint: 'Hint for item 2' },
{ type: 'button', id: 'item3', caption: 'Item 3', icon: 'fa-star-empty', hint: 'Hint for item 3' },
{ type: 'button', id: 'item4', caption: 'Item 4', icon: 'fa-comments', hint: 'Hint for item 4' },
{ type: 'button', id: 'item5', caption: 'Item 5', icon: 'fa-beaker', hint: 'Hint for item 5' }
{ type: 'button', id: 'item2', text: 'Button', icon: 'fa-wrench' },
{ type: 'break' },
{ type: 'check', id: 'item3', text: 'Check 1', icon: 'fa-star' },
{ type: 'check', id: 'item4', text: 'Check 2', icon: 'fa-heart' },
{ type: 'break' },
{ type: 'radio', id: 'item5', group: '1', text: 'Radio 1', icon: 'fa-star', checked: true },
{ type: 'radio', id: 'item6', group: '1', text: 'Radio 2', icon: 'fa-heart' },
{ type: 'spacer' },
{ type: 'button', id: 'item7', text: 'Button', icon: 'fa-star' }
],
onClick: function (event) {
console.log('Target: '+ event.target, event);
Expand Down
144 changes: 144 additions & 0 deletions demos/examples/toolbar-10.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,144 @@
<div class="content">
<div id="example_title">
<h1>Toolbar Overflow (new in 1.5)</h1>
If toolbar has too many button that it does not fit the screen the overflow buttons will show up. No need to set any property, the overflow buttons
will just appear.
</div>
<div id="example_view"></div>
<div id="example_code"></div>
</div>

<!--CODE-->
<div id="toolbar" style="padding: 4px; border: 1px solid #dfdfdf; border-radius: 3px; width: 575px;"></div>

<!--CODE-->
<script>
$(function () {
$('#toolbar').w2toolbar({
name: 'toolbar',
items: [
{ type: 'menu', id: 'item1', text: 'Menu', icon: 'fa-table', count: 17, items: [
{ text: 'Item 1', icon: 'fa-camera', count: 5 },
{ text: 'Item 2', icon: 'fa-picture', disabled: true },
{ text: 'Item 3', icon: 'fa-glass', count: 12 }
]},
{ type: 'break' },
{ type: 'menu-radio', id: 'item2', icon: 'fa-star',
items: [
{ id: 'id1', text: 'Item 1', icon: 'fa-camera' },
{ id: 'id2', text: 'Item 2', icon: 'fa-picture' },
{ id: 'id3', text: 'Item 3', icon: 'fa-glass', count: 12 }
]
},
{ type: 'break' },
{ type: 'menu-check', id: 'item3', text: 'Check', icon: 'fa-heart',
items: [
{ id: 'id1', text: 'Item 1', icon: 'fa-camera' },
{ id: 'id2', text: 'Item 2', icon: 'fa-picture' },
{ id: 'id3', text: 'Item 3', icon: 'fa-glass', count: 12 },
{ text: '--' },
{ id: 'id4', text: 'Item 4', icon: 'fa-glass' }
]
},
{ type: 'break' },
{ type: 'drop', id: 'item4', text: 'Dropdown', icon: 'fa-plus',
html: '<div style="padding: 10px; line-height: 1.5">You can put any HTML in the drop down.<br>Include tables, images, etc.</div>'
},
{ type: 'break' },
{ type: 'html', id: 'item5',
html: function (item) {
var html =
'<div style="padding: 3px 10px;">'+
' CUSTOM 1:'+
' <input size="10" onchange="var el = w2ui.toolbar.set(\'item5\', { value: this.value });" '+
' style="padding: 3px; border-radius: 2px; border: 1px solid silver" value="'+ (item.value || '') + '"/>'+
'</div>';
return html;
}
},
{ type: 'menu', id: 'item6', text: 'Menu', icon: 'fa-table', count: 17, items: [
{ text: 'Item 1', icon: 'fa-camera', count: 5 },
{ text: 'Item 2', icon: 'fa-picture', disabled: true },
{ text: 'Item 3', icon: 'fa-glass', count: 12 }
]},
{ type: 'break' },
{ type: 'menu-radio', id: 'item7', icon: 'fa-star',
items: [
{ id: 'id1', text: 'Item 1', icon: 'fa-camera' },
{ id: 'id2', text: 'Item 2', icon: 'fa-picture' },
{ id: 'id3', text: 'Item 3', icon: 'fa-glass', count: 12 }
]
},
{ type: 'break' },
{ type: 'menu-check', id: 'item8', text: 'Check', icon: 'fa-heart',
items: [
{ id: 'id1', text: 'Item 1', icon: 'fa-camera' },
{ id: 'id2', text: 'Item 2', icon: 'fa-picture' },
{ id: 'id3', text: 'Item 3', icon: 'fa-glass', count: 12 },
{ text: '--' },
{ id: 'id4', text: 'Item 4', icon: 'fa-glass' }
]
},
{ type: 'break' },
{ type: 'drop', id: 'item9', text: 'Dropdown', icon: 'fa-plus',
html: '<div style="padding: 10px; line-height: 1.5">You can put any HTML in the drop down.<br>Include tables, images, etc.</div>'
},
{ type: 'break' },
{ type: 'html', id: 'item10',
html: function (item) {
var html =
'<div style="padding: 3px 10px;">'+
' CUSTOM 2:'+
' <input size="10" onchange="var el = w2ui.toolbar.set(\'item5\', { value: this.value });" '+
' style="padding: 3px; border-radius: 2px; border: 1px solid silver" value="'+ (item.value || '') + '"/>'+
'</div>';
return html;
}
},
{ type: 'menu', id: 'item11', text: 'Menu', icon: 'fa-table', count: 17, items: [
{ text: 'Item 1', icon: 'fa-camera', count: 5 },
{ text: 'Item 2', icon: 'fa-picture', disabled: true },
{ text: 'Item 3', icon: 'fa-glass', count: 12 }
]},
{ type: 'break' },
{ type: 'menu-radio', id: 'item12', icon: 'fa-star',
items: [
{ id: 'id1', text: 'Item 1', icon: 'fa-camera' },
{ id: 'id2', text: 'Item 2', icon: 'fa-picture' },
{ id: 'id3', text: 'Item 3', icon: 'fa-glass', count: 12 }
]
},
{ type: 'break' },
{ type: 'menu-check', id: 'item13', text: 'Check', icon: 'fa-heart',
items: [
{ id: 'id1', text: 'Item 1', icon: 'fa-camera' },
{ id: 'id2', text: 'Item 2', icon: 'fa-picture' },
{ id: 'id3', text: 'Item 3', icon: 'fa-glass', count: 12 },
{ text: '--' },
{ id: 'id4', text: 'Item 4', icon: 'fa-glass' }
]
},
{ type: 'break' },
{ type: 'drop', id: 'item14', text: 'Dropdown', icon: 'fa-plus',
html: '<div style="padding: 10px; line-height: 1.5">You can put any HTML in the drop down.<br>Include tables, images, etc.</div>'
},
{ type: 'break' },
{ type: 'html', id: 'item15',
html: function (item) {
var html =
'<div style="padding: 3px 10px;">'+
' CUSTOM 3:'+
' <input size="10" onchange="var el = w2ui.toolbar.set(\'item5\', { value: this.value });" '+
' style="padding: 3px; border-radius: 2px; border: 1px solid silver" value="'+ (item.value || '') + '"/>'+
'</div>';
return html;
}
},
]
});

w2ui.toolbar.on('*', function (event) {
console.log('EVENT: '+ event.type + ' TARGET: '+ event.target, event);
});
});
</script>
87 changes: 57 additions & 30 deletions demos/examples/toolbar-2.html
View file
Original file line number Diff line number Diff line change
@@ -1,58 +1,85 @@
<div class="content">
<div id="example_title">
<h1>Advanced Toolbar</h1>
There are 7 types of items that can be created in the toolbar:
<h1>More Button Types</h1>
You can also create various drop down menu buttons:
<ul>
<li>button</li>
<li>radio button</li>
<li>check button</li>
<li>html item</li>
<li>drop menu</li>
<li>drop html</li>
<li>break</li>
<li>spacer</li>
<li>menu</li>
<li>menu-check</li>
<li>menu-radio</li>
<li>drop</li>
<li>html</li>
</ul>
Below you can see a toolbar with all types of items. This demo also shows how to add simple event listener to listen to all
Below you can see a toolbar with more buttons types. This demo also shows how to add simple event listener to listen to all
events.
</div>
<div id="example_view"></div>
<div id="example_code"></div>
</div>

<!--CODE-->
<div id="toolbar" style="padding: 4px; border: 1px solid silver; border-radius: 3px"></div>
<div id="toolbar" style="padding: 4px; border: 1px solid #dfdfdf; border-radius: 3px"></div>

<!--CODE-->
<script>
$(function () {
$('#toolbar').w2toolbar({
name: 'toolbar',
items: [
{ type: 'check', id: 'item1', caption: 'Check', icon: 'fa-check', checked: true },
{ type: 'break', id: 'break0' },
{ type: 'menu', id: 'item2', caption: 'Menu', icon: 'fa-table', count: 17, items: [
{ text: 'Item 1', icon: 'fa-camera', count: 5 },
{ text: 'Item 2', icon: 'fa-picture', disabled: true },
{ type: 'menu', id: 'item1', text: 'Menu', icon: 'fa-table', count: 17, items: [
{ text: 'Item 1', icon: 'fa-camera', count: 5 },
{ text: 'Item 2', icon: 'fa-picture', disabled: true },
{ text: 'Item 3', icon: 'fa-glass', count: 12 }
]},
{ type: 'break', id: 'break1' },
{ type: 'radio', id: 'item3', group: '1', caption: 'Radio 1', icon: 'fa-star', checked: true },
{ type: 'radio', id: 'item4', group: '1', caption: 'Radio 2', icon: 'fa-heart' },
{ type: 'break', id: 'break2' },
{ type: 'drop', id: 'item5', caption: 'Drop Down', icon: 'fa-plus', html: '<div style="padding: 10px">Drop down</div>' },
{ type: 'break' },
{ type: 'menu-radio', id: 'item2', icon: 'fa-star',
text: function (item) {
var text = item.selected;
var el = this.get('item2:' + item.selected);
return 'Radio: ' + el.text;
},
selected: 'id3',
items: [
{ id: 'id1', text: 'Item 1', icon: 'fa-camera' },
{ id: 'id2', text: 'Item 2', icon: 'fa-picture' },
{ id: 'id3', text: 'Item 3', icon: 'fa-glass', count: 12 }
]
},
{ type: 'break' },
{ type: 'menu-check', id: 'item3', text: 'Check', icon: 'fa-heart',
selected: ['id3', 'id4'],
onRefresh: function (event) {
event.item.count = event.item.selected.length;
},
items: [
{ id: 'id1', text: 'Item 1', icon: 'fa-camera' },
{ id: 'id2', text: 'Item 2', icon: 'fa-picture' },
{ id: 'id3', text: 'Item 3', icon: 'fa-glass', count: 12 },
{ text: '--' },
{ id: 'id4', text: 'Item 4', icon: 'fa-glass' }
]
},
{ type: 'break' },
{ type: 'drop', id: 'item4', text: 'Dropdown', icon: 'fa-plus',
html: '<div style="padding: 10px; line-height: 1.5">You can put any HTML in the drop down.<br>Include tables, images, etc.</div>'
},
{ type: 'break', id: 'break3' },
{ type: 'html', id: 'item6',
html: '<div style="padding: 3px 10px;">'+
' Input:'+
' <input size="10" style="padding: 3px; border-radius: 2px; border: 1px solid silver"/>'+
'</div>'
{ type: 'html', id: 'item5',
html: function (item) {
var html =
'<div style="padding: 3px 10px;">'+
' CUSTOM:'+
' <input size="10" onchange="var el = w2ui.toolbar.set(\'item5\', { value: this.value });" '+
' style="padding: 3px; border-radius: 2px; border: 1px solid silver" value="'+ (item.value || '') + '"/>'+
'</div>';
return html;
}
},
{ type: 'spacer' },
{ type: 'button', id: 'item7', caption: 'Item 5', icon: 'fa-flag' }
{ type: 'button', id: 'item6', text: 'Item 6', icon: 'fa-flag' }
]
});
w2ui.toolbar.on('*', function (event) {

w2ui.toolbar.on('*', function (event) {
console.log('EVENT: '+ event.type + ' TARGET: '+ event.target, event);
});
});
Expand Down
12 changes: 6 additions & 6 deletions demos/examples/toolbar-3.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ <h1>Add/Remove Buttons</h1>
</div>

<!--CODE-->
<div id="toolbar" style="padding: 4px; border: 1px solid silver; border-radius: 3px"></div>
<div id="toolbar" style="padding: 4px; border: 1px solid #dfdfdf; border-radius: 3px"></div>

<!--CODE-->
<script>
Expand All @@ -17,20 +17,20 @@ <h1>Add/Remove Buttons</h1>
$('#toolbar').w2toolbar({
name: 'toolbar',
items: [
{ type: 'button', id: 'append', caption: 'Append', icon: 'w2ui-icon-plus' },
{ type: 'button', id: 'insert', caption: 'Insert', icon: 'w2ui-icon-plus' },
{ type: 'button', id: 'delete', caption: 'Delete', icon: 'w2ui-icon-cross' },
{ type: 'button', id: 'append', text: 'Append', icon: 'w2ui-icon-plus' },
{ type: 'button', id: 'insert', text: 'Insert', icon: 'w2ui-icon-plus' },
{ type: 'button', id: 'delete', text: 'Delete', icon: 'w2ui-icon-cross' },
{ type: 'break', id: 'break0' },
{ type: 'break', id: 'break1' }
],
onClick: function (event) {
switch (event.target) {
case 'append':
this.add({ type: 'button', id: 'button' + btnCount, caption: 'button '+ btnCount, img: 'icon-page' });
this.add({ type: 'button', id: 'button' + btnCount, text: 'button '+ btnCount, img: 'icon-page' });
btnCount++;
break;
case 'insert':
this.insert('break1', { type: 'button', id: 'button' + btnCount, caption: 'button '+ btnCount, img: 'icon-page' });
this.insert('break1', { type: 'button', id: 'button' + btnCount, text: 'button '+ btnCount, img: 'icon-page' });
btnCount++;
break;
case 'delete':
Expand Down
10 changes: 5 additions & 5 deletions demos/examples/toolbar-4.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,19 +8,19 @@ <h1>Show/Hide Buttons</h1>
</div>

<!--CODE-->
<div id="toolbar" style="padding: 4px; border: 1px solid silver; border-radius: 3px"></div>
<div id="toolbar" style="padding: 4px; border: 1px solid #dfdfdf; border-radius: 3px"></div>

<!--CODE-->
<script>
$(function () {
$('#toolbar').w2toolbar({
name: 'toolbar',
items: [
{ type: 'button', id: 'hide', caption: 'Hide', icon: 'w2ui-icon-cross' },
{ type: 'button', id: 'show', caption: 'Show', icon: 'w2ui-icon-plus' },
{ type: 'button', id: 'hide', text: 'Hide', icon: 'w2ui-icon-cross' },
{ type: 'button', id: 'show', text: 'Show', icon: 'w2ui-icon-plus' },
{ type: 'break', id: 'break0' },
{ type: 'button', id: 'btn', caption: 'Action Button', img: 'icon-page' },
{ type: 'button', id: 'btn2', caption: 'Other Button', img: 'icon-page' }
{ type: 'button', id: 'btn', text: 'Action Button', img: 'icon-page' },
{ type: 'button', id: 'btn2', text: 'Other Button', img: 'icon-page' }
],
onClick: function (event) {
if (event.target == 'show') this.show('btn');
Expand Down
10 changes: 5 additions & 5 deletions demos/examples/toolbar-5.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,19 +8,19 @@ <h1>Enable/Disable Buttons</h1>
</div>

<!--CODE-->
<div id="toolbar" style="padding: 4px; border: 1px solid silver; border-radius: 3px"></div>
<div id="toolbar" style="padding: 4px; border: 1px solid #dfdfdf; border-radius: 3px"></div>

<!--CODE-->
<script>
$(function () {
$('#toolbar').w2toolbar({
name: 'toolbar',
items: [
{ type: 'button', id: 'disable', caption: 'Disable', icon: 'w2ui-icon-cross' },
{ type: 'button', id: 'enable', caption: 'Enable', icon: 'w2ui-icon-check' },
{ type: 'button', id: 'disable', text: 'Disable', icon: 'w2ui-icon-cross' },
{ type: 'button', id: 'enable', text: 'Enable', icon: 'w2ui-icon-check' },
{ type: 'break', id: 'break0' },
{ type: 'button', id: 'btn', caption: 'Action Button', img: 'icon-page' },
{ type: 'button', id: 'btn2', caption: 'Other Button', img: 'icon-page' }
{ type: 'button', id: 'btn', text: 'Action Button', img: 'icon-page' },
{ type: 'button', id: 'btn2', text: 'Other Button', img: 'icon-page' }
],
onClick: function (event) {
if (event.target == 'enable') this.enable('btn');
Expand Down
Loading

0 comments on commit 38c2250

Please sign in to comment.