0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

add file input example

Browse source
This commit is contained in:
rolux 2012-06-17 19:16:52 +02:00
parent 32eb56bbfe
commit 10281e3c8f
2 changed files with 151 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
examples/selecting_files/index.html Normal file
View file

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html>
<head>
<title>Selecting Files</title>
<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"/>
<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>
</head>
<body></body>
</html>

139
examples/selecting_files/js/example.js Normal file
View file

@ -0,0 +1,139 @@
/*
...
*/
Ox.load('UI', function() {
var $menu = Ox.MainMenu({
menus: [
{id: 'file', title: 'File', items: [
{id: 'file', title: 'Select File...', file: {
maxFiles: 1, width: 96
}},
{id: 'files', title: 'Select Files...', file: {
width: 96
}}
]}
]
})
.bindEvent({
click: function(data) {
showEvent(data);
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})
),
$list = Ox.TreeList({
data: {},
expanded: true,
width: 256
}),
$innerPanel = Ox.SplitPanel({
elements: [
{element: $main},
{element: $list, size: 256}
],
orientation: 'horizontal'
}),
$outerPanel = Ox.SplitPanel({
elements: [
{element: $menu, size: 20},
{element: $innerPanel}
],
orientation: 'vertical'
})
.appendTo(Ox.$body);
function openDialog(data) {
var $content = Ox.Element()
.css(getContentCSS(data))
.append(
Ox.FileInput({
maxFiles: data.id == 'file' ? 1 : -1,
value: data.files,
width: 256
})
.css({
position: 'absolute',
left: '16px',
top: '16px',
marginBottom: '16px'
})
.bindEvent({
change: function(data) {
showEvent(data);
$content.css(getContentCSS(data));
}
})
),
$dialog = Ox.Dialog({
buttons: [
Ox.Button({
id: 'close',
title: 'Close'
})
.bindEvent({
click: function() {
$dialog.close();
}
})
],
content: $content,
height: 129,
keys: {escape: 'close'},
title: data.title.replace('...', ''),
width: 288 + (data.id == 'file' ? 0 : Ox.UI.SCROLLBAR_SIZE)
})
.open();
function getContentCSS(data) {
return {height: 49 + (data.files || data.value).length * 16 + 'px'};
}
}
function showEvent(data) {
var key = data.files ? 'files' : 'value';
data[key] = data[key].map(function(file) {
var object = {};
Object.keys(file).forEach(function(key) {
object[key] = file[key];
});
return object;
});
$list.options({data: data});
}
});