update file selection example
This commit is contained in:
parent
2ec03287f2
commit
0d614ed7a1
1 changed files with 60 additions and 11 deletions
|
@ -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',
|
||||
|
|
Loading…
Reference in a new issue