update file selection example

This commit is contained in:
rolux 2012-06-27 14:11:03 +02:00
parent 2ec03287f2
commit 0d614ed7a1

View file

@ -11,7 +11,7 @@ Ox.load('UI', function() {
var $elements = [
/*
Ox.FileButton creates a simple button. It has the following options:
Ox.FileButton has the following options:
<pre>
disabled
If true, the button is disabled
@ -40,9 +40,11 @@ Ox.load('UI', function() {
<pre>
$fileButton.bindEvent({
click: function(data) {
Ox.print(data.files);
data.files.forEach(function(file) {
// ...
});
}
})
});
</pre>
We create two image buttons and two text buttons: one of each to
select a single file, one for multiple files.
@ -66,10 +68,23 @@ Ox.load('UI', function() {
width: 128
}),
/*
...
Ox.FileInput is a form element, so it has a value and fires a
`change` event. Its options are similar to Ox.FileButton, without
`image`, `title` and `type`, and we can bind to its `change` event
like this:
<pre>
$fileInput.bindEvent({
change: function(data) {
data.value.forEach(function(file) {
// ...
});
}
});
</pre>
Again, we create one input to select a single file and one for
multiple files.
*/
Ox.FileInput({
disabled: true,
maxFiles: 1,
maxSize: 1000000,
width: 256
@ -80,9 +95,26 @@ Ox.load('UI', function() {
})
],
/*
A basic menu item looks like `{id: 'id', title: 'Title'}`. By adding a
`file` property (which takes the same `maxFiles`, `maxSize` and `width`
options as Ox.FileButton), ...
File selection also works from a menu. A basic menu item looks like
`{id: 'id', title: 'Title'}`, and its `click` event fires on click.
By adding a `file` property (which takes the same `maxFiles`, `maxSize`
and `width` options as Ox.FileButton), we enable file selection, and
the `click` event now fires once one or more files are selected. We can
bind to it like this:
<pre>
$mainMenu.bindEvent({
click: function(data) {
if (data.id == 'foo') {
data.files.forEach(function(file) {
// ...
});
}
}
});
</pre>
Note that keyboard navigation works as well. Just like any other menu
item, it can be activated by pressing `enter`, which opens the file
selection dialog.
*/
$menu = Ox.MainMenu({
menus: [
@ -96,18 +128,30 @@ Ox.load('UI', function() {
]}
]
})
/*
On click, we display the event data and open a dialog.
*/
.bindEvent({
click: function(data) {
showEvent(data);
openDialog(data);
}
}),
/*
This is a container for our buttons and inputs.
*/
$main = Ox.Element(),
/*
This is the list that will display the event data.
*/
$list = Ox.TreeList({
data: {},
expanded: true,
width: 256
}),
/*
They both share a panel.
*/
$innerPanel = Ox.SplitPanel({
elements: [
{element: $main},
@ -115,6 +159,9 @@ Ox.load('UI', function() {
],
orientation: 'horizontal'
}),
/*
Menu and inner panel go into the outer panel.
*/
$outerPanel = Ox.SplitPanel({
elements: [
{element: $menu, size: 20},
@ -124,6 +171,11 @@ Ox.load('UI', function() {
})
.appendTo(Ox.$body);
/*
Here, we append the buttons and inputs to the container. For each element,
we add an event handler (`click` event for buttons, `change` event for
inputs) to display the event data.
*/
$elements.forEach(function($element, i) {
$element
.css({top: 16 + 32 * i + 'px'})
@ -133,9 +185,6 @@ Ox.load('UI', function() {
.appendTo($main);
});
window.$elements = $elements;
window.$menu = $menu;
function openDialog(data) {
var $button = Ox.Button({
id: 'close',