update file selection example
This commit is contained in:
rolux
parent
73c0fc8c31
commit
2ec03287f2
3 changed files with 103 additions and 39 deletions
5
examples/forms/file_selection/css/example.css
Normal file
5
examples/forms/file_selection/css/example.css
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
.OxSplitPanel .OxFileButton,
|
||||
.OxSplitPanel .OxFileInput {
|
||||
position: absolute;
|
||||
left: 16px;
|
||||
}
|
||||
|
|
@ -5,6 +5,7 @@
|
|||
<meta http-equiv="Keywords" content="Forms"/>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<link rel="shortcut icon" type="image/png" href="../../../source/Ox.UI/themes/classic/png/icon16.png"/>
|
||||
<link rel="stylesheet" type="text/css" href="css/example.css"/>
|
||||
<script type="text/javascript" src="../../../dev/Ox.js"></script>
|
||||
<script type="text/javascript" src="js/example.js"></script>
|
||||
<script>window.addEventListener('message', function(e) { e.origin == window.location.origin && eval(e.data); });</script>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,97 @@
|
|||
/*
|
||||
...
|
||||
This examples shows how to do file selection — usually for upload —
|
||||
in Ox.UI.
|
||||
*/
|
||||
'use strict';
|
||||
|
||||
/*
|
||||
Load the UI module.
|
||||
*/
|
||||
Ox.load('UI', function() {
|
||||
|
||||
var $menu = Ox.MainMenu({
|
||||
var $elements = [
|
||||
/*
|
||||
Ox.FileButton creates a simple button. It has the following options:
|
||||
<pre>
|
||||
disabled
|
||||
If true, the button is disabled
|
||||
image
|
||||
Symbol name (if type is 'image'),
|
||||
default is 'file' or 'files'
|
||||
(depending on maxFiles)
|
||||
maxFiles
|
||||
Maximum number of files,
|
||||
default is -1 (unlimited)
|
||||
maxSize
|
||||
Maximum total size in bytes,
|
||||
default is -1 (unlimited)
|
||||
title
|
||||
Button title (if type is 'text')
|
||||
and tooltip text
|
||||
type
|
||||
Type, either 'text' or 'image',
|
||||
default is 'text'
|
||||
width
|
||||
Width in px (if type is 'text')
|
||||
</pre>
|
||||
Ox.FileButton fires a `click` event (not on click, like Ox.Button,
|
||||
but once the user has selected one or more files) that we can bind
|
||||
to like this:
|
||||
<pre>
|
||||
$fileButton.bindEvent({
|
||||
click: function(data) {
|
||||
Ox.print(data.files);
|
||||
}
|
||||
})
|
||||
</pre>
|
||||
We create two image buttons and two text buttons: one of each to
|
||||
select a single file, one for multiple files.
|
||||
*/
|
||||
Ox.FileButton({
|
||||
maxFiles: 1,
|
||||
title: 'Select File...',
|
||||
type: 'image'
|
||||
}),
|
||||
Ox.FileButton({
|
||||
title: 'Select Files...',
|
||||
type: 'image'
|
||||
}),
|
||||
Ox.FileButton({
|
||||
maxFiles: 1,
|
||||
title: 'Select File...',
|
||||
width: 128
|
||||
}),
|
||||
Ox.FileButton({
|
||||
title: 'Select Files...',
|
||||
width: 128
|
||||
}),
|
||||
/*
|
||||
...
|
||||
*/
|
||||
Ox.FileInput({
|
||||
disabled: true,
|
||||
maxFiles: 1,
|
||||
maxSize: 1000000,
|
||||
width: 256
|
||||
}),
|
||||
Ox.FileInput({
|
||||
maxSize: 1000000,
|
||||
width: 256
|
||||
})
|
||||
],
|
||||
/*
|
||||
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), ...
|
||||
*/
|
||||
$menu = Ox.MainMenu({
|
||||
menus: [
|
||||
{id: 'file', title: 'File', items: [
|
||||
{id: 'file', title: 'Select File...', file: {
|
||||
maxFiles: 1, width: 96
|
||||
maxFiles: 1, width: 80
|
||||
}},
|
||||
{id: 'files', title: 'Select Files...', file: {
|
||||
width: 96
|
||||
width: 80
|
||||
}}
|
||||
]}
|
||||
]
|
||||
|
|
@ -22,41 +102,7 @@ Ox.load('UI', function() {
|
|||
openDialog(data);
|
||||
}
|
||||
}),
|
||||
$main = Ox.Element()
|
||||
.append(
|
||||
Ox.FileButton({
|
||||
maxFiles: 1,
|
||||
title: 'Select File...',
|
||||
width: 128
|
||||
})
|
||||
.css({position: 'absolute', left: '16px', top: '16px'})
|
||||
.bindEvent({click: showEvent})
|
||||
)
|
||||
.append(
|
||||
Ox.FileButton({
|
||||
title: 'Select Files...',
|
||||
width: 128
|
||||
})
|
||||
.css({position: 'absolute', left: '16px', top: '48px'})
|
||||
.bindEvent({click: showEvent})
|
||||
)
|
||||
.append(
|
||||
Ox.FileInput({
|
||||
maxFiles: 1,
|
||||
maxSize: 1000000,
|
||||
width: 256
|
||||
})
|
||||
.css({position: 'absolute', left: '16px', top: '80px'})
|
||||
.bindEvent({click: showEvent})
|
||||
)
|
||||
.append(
|
||||
Ox.FileInput({
|
||||
maxSize: 1000000,
|
||||
width: 256
|
||||
})
|
||||
.css({position: 'absolute', left: '16px', top: '112px'})
|
||||
.bindEvent({click: showEvent})
|
||||
),
|
||||
$main = Ox.Element(),
|
||||
$list = Ox.TreeList({
|
||||
data: {},
|
||||
expanded: true,
|
||||
|
|
@ -78,6 +124,18 @@ Ox.load('UI', function() {
|
|||
})
|
||||
.appendTo(Ox.$body);
|
||||
|
||||
$elements.forEach(function($element, i) {
|
||||
$element
|
||||
.css({top: 16 + 32 * i + 'px'})
|
||||
.bindEvent(
|
||||
$element.is('.OxFileButton') ? 'click' : 'change', showEvent
|
||||
)
|
||||
.appendTo($main);
|
||||
});
|
||||
|
||||
window.$elements = $elements;
|
||||
window.$menu = $menu;
|
||||
|
||||
function openDialog(data) {
|
||||
var $button = Ox.Button({
|
||||
id: 'close',
|
||||
|
|
|
|||
Loading…
Reference in a new issue