add demos
This commit is contained in:
parent
1083a324dc
commit
72b892f982
8 changed files with 407 additions and 0 deletions
11
demos/dialog/index.html
Normal file
11
demos/dialog/index.html
Normal file
|
@ -0,0 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>OxJS Dialog Demo</title
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<script type="text/javascript" src="../../build/Ox.js"></script>
|
||||
<script type="text/javascript" src="js/dialog.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
276
demos/dialog/js/dialog.js
Normal file
276
demos/dialog/js/dialog.js
Normal file
|
@ -0,0 +1,276 @@
|
|||
Ox.load('UI', {debug: true}, function() {
|
||||
|
||||
|
||||
|
||||
var $buttons = Ox.Bar({size: 24});
|
||||
|
||||
var $img, $previewDialog, preview = false;
|
||||
var $list = Ox.IconList({
|
||||
item: function(data, sort, size) {
|
||||
var ratio = data.width / data.height;
|
||||
size = size || 128;
|
||||
return {
|
||||
height: ratio <= 1 ? size : size / ratio,
|
||||
id: data.id,
|
||||
info: data.width + ' x ' + data.height + ' px',
|
||||
title: Ox.toTitleCase(data.id),
|
||||
url: 'png/' + data.id + '.png',
|
||||
width: ratio >= 1 ? size : size * ratio
|
||||
};
|
||||
},
|
||||
items: [
|
||||
{
|
||||
id: 'earth',
|
||||
width: 1024,
|
||||
height: 1024
|
||||
},
|
||||
{
|
||||
id: 'north',
|
||||
width: 1024,
|
||||
height: 512
|
||||
},
|
||||
{
|
||||
id: 'west',
|
||||
width: 512,
|
||||
height: 1024
|
||||
}
|
||||
],
|
||||
orientation: 'horizontal',
|
||||
size: 128,
|
||||
sort: [{key: 'id', operator: '+'}],
|
||||
unique: 'id'
|
||||
}).bindEvent({
|
||||
closepreview: function() {
|
||||
$previewDialog.close();
|
||||
preview = false;
|
||||
},
|
||||
openpreview: function(event) {
|
||||
var data = Ox.getObjectById($list.options('items'), event.ids[0]),
|
||||
ratio = data.width / data.height,
|
||||
windowWidth = window.innerWidth * 0.8
|
||||
windowHeight = window.innerHeight * 0.8
|
||||
windowRatio = windowWidth / windowHeight,
|
||||
width = Math.round(ratio > windowRatio ? windowWidth : windowHeight * ratio),
|
||||
height = Math.round(ratio < windowRatio ? windowHeight : windowWidth / ratio);
|
||||
Ox.print('d/w/h', data, width, height)
|
||||
if (!preview) {
|
||||
if (!$previewDialog) {
|
||||
$previewDialog = Ox.Dialog({
|
||||
closeButton: true,
|
||||
content: $img = $('<img>')
|
||||
.attr({src: 'png/' + data.id + '.png'})
|
||||
.css({width: width + 'px', height: height + 'px'}),
|
||||
fixedRatio: true,
|
||||
focus: false,
|
||||
height: height,
|
||||
maximizeButton: true,
|
||||
title: Ox.toTitleCase(data.id),
|
||||
width: width
|
||||
})
|
||||
.bindEvent({
|
||||
close: function() {
|
||||
$list.closePreview();
|
||||
preview = false;
|
||||
},
|
||||
resize: function(event) {
|
||||
$img.css({
|
||||
width: event.width + 'px',
|
||||
height: event.height + 'px'
|
||||
});
|
||||
}
|
||||
}).open();
|
||||
} else {
|
||||
$previewDialog.options({
|
||||
content: $img = $('<img>')
|
||||
.attr({src: 'png/' + data.id + '.png'})
|
||||
.css({width: width + 'px', height: height + 'px'}),
|
||||
height: height,
|
||||
title: Ox.toTitleCase(data.id),
|
||||
width: width
|
||||
}).open();
|
||||
}
|
||||
preview = true;
|
||||
} else {
|
||||
$previewDialog.options({
|
||||
content: $img = $('<img>')
|
||||
.attr({src: 'png/' + data.id + '.png'})
|
||||
.css({width: width + 'px', height: height + 'px'}),
|
||||
title: Ox.toTitleCase(data.id),
|
||||
}).setSize(width, height);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
Ox.SplitPanel({
|
||||
elements: [
|
||||
{
|
||||
element: $buttons,
|
||||
size: 24
|
||||
},
|
||||
{
|
||||
element: $('<div>').css({background: 'rgb(128, 128, 128)'})
|
||||
},
|
||||
{
|
||||
element: $list,
|
||||
size: 208
|
||||
}
|
||||
],
|
||||
orientation: 'vertical'
|
||||
}).appendTo(Ox.UI.$body);
|
||||
|
||||
Ox.UI.$body
|
||||
.css({
|
||||
padding: '4px',
|
||||
background: 'rgb(240, 240, 240)'
|
||||
});
|
||||
|
||||
var $dialog = Ox.Dialog({
|
||||
buttons: [
|
||||
Ox.Button({
|
||||
title: 'Cancel'
|
||||
}).bindEvent({
|
||||
click: function() {
|
||||
$dialog.close();
|
||||
}
|
||||
}),
|
||||
Ox.Button({
|
||||
title: 'Close'
|
||||
}).bindEvent({
|
||||
click: function() {
|
||||
$dialog.close();
|
||||
}
|
||||
})
|
||||
],
|
||||
content: Ox.SplitPanel({
|
||||
elements: [
|
||||
{
|
||||
collapsible: true,
|
||||
element: Ox.Element({id: 'foo'}).css({background: 'rgb(240, 240, 240)'}),
|
||||
resizable: true,
|
||||
resize: [128, 256, 384],
|
||||
size: 256
|
||||
},
|
||||
{
|
||||
element: Ox.Element({id: 'bar'}).css({background: 'rgb(240, 240, 240)'}),
|
||||
}
|
||||
],
|
||||
orientation: 'horizontal'
|
||||
}),
|
||||
title: Ox.repeat('Foo bar. ', 10)
|
||||
});
|
||||
|
||||
var $dialogA = Ox.Dialog({
|
||||
buttons: [
|
||||
Ox.Button({title: 'Foo'}),
|
||||
Ox.Button({title: 'Bar'}),
|
||||
{},
|
||||
Ox.Button({title: 'Baz'}),
|
||||
Ox.Button({title: 'Close'}).bindEvent({
|
||||
click: function() {
|
||||
$dialogA.close();
|
||||
}
|
||||
})
|
||||
],
|
||||
content: $('<div>')
|
||||
.css({padding: '16px'})
|
||||
.html(Ox.repeat('Foo bar. ', 100)),
|
||||
title: Ox.repeat('Foo bar. ', 10)
|
||||
}).bindEvent({
|
||||
key_escape: function() {
|
||||
$dialogA.close();
|
||||
}
|
||||
});
|
||||
|
||||
var $img = $('<img>')
|
||||
.attr({src: 'png/earth.png'})
|
||||
.css({width: '256px', height: '256px'});
|
||||
var $dialogB = Ox.Dialog({
|
||||
closeButton: true,
|
||||
content: $img,
|
||||
fixedRatio: true,
|
||||
focus: false,
|
||||
height: 256,
|
||||
maximizeButton: true,
|
||||
width: 256,
|
||||
title: Ox.repeat('Foo bar. ', 10)
|
||||
}).bindEvent({
|
||||
resize: function(event) {
|
||||
$img.css({
|
||||
width: event.width + 'px',
|
||||
height: event.height + 'px'
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
var $dialogC = Ox.Dialog({
|
||||
closeButton: true,
|
||||
content: Ox.SplitPanel({
|
||||
elements: [
|
||||
{
|
||||
element: Ox.SplitPanel({
|
||||
elements: [
|
||||
{
|
||||
collapsible: true,
|
||||
element: Ox.Element({id: 'foo'}).css({background: 'rgb(240, 240, 240)'}),
|
||||
resizable: true,
|
||||
resize: [128, 256, 384],
|
||||
size: 256
|
||||
},
|
||||
{
|
||||
element: Ox.Element({id: 'bar'}).css({background: 'rgb(240, 240, 240)'}),
|
||||
}
|
||||
],
|
||||
orientation: 'horizontal'
|
||||
})
|
||||
},
|
||||
{
|
||||
element: Ox.Bar({
|
||||
size: 16}
|
||||
).css({
|
||||
borderBottomLeftRadius: '8px',
|
||||
borderBottomRightRadius: '8px'
|
||||
}),
|
||||
size: 16
|
||||
}
|
||||
],
|
||||
orientation: 'vertical'
|
||||
}),
|
||||
height: Math.round((window.innerHeight - 24) * 0.9),
|
||||
maximizeButton: true,
|
||||
title: Ox.repeat('Foo bar. ', 10),
|
||||
width: Math.round(window.innerWidth * 0.9)
|
||||
});
|
||||
|
||||
Ox.Button({
|
||||
title: 'Dialog'
|
||||
}).css({
|
||||
margin: '4px'
|
||||
}).bindEvent({
|
||||
click: $dialog.open
|
||||
}).appendTo($buttons);
|
||||
|
||||
Ox.Button({
|
||||
title: 'Dialog A'
|
||||
}).css({
|
||||
margin: '4px'
|
||||
}).bindEvent({
|
||||
click: $dialogA.open
|
||||
}).appendTo($buttons);
|
||||
|
||||
Ox.Button({
|
||||
title: 'Dialog B'
|
||||
}).css({
|
||||
margin: '4px'
|
||||
}).bindEvent({
|
||||
click: $dialogB.open
|
||||
}).appendTo($buttons);
|
||||
|
||||
Ox.Button({
|
||||
title: 'Dialog C'
|
||||
}).css({
|
||||
margin: '4px'
|
||||
}).bindEvent({
|
||||
click: $dialogC.open
|
||||
}).appendTo($buttons);
|
||||
|
||||
});
|
BIN
demos/dialog/png/earth.png
Normal file
BIN
demos/dialog/png/earth.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.4 MiB |
BIN
demos/dialog/png/north.png
Normal file
BIN
demos/dialog/png/north.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 897 KiB |
BIN
demos/dialog/png/west.png
Normal file
BIN
demos/dialog/png/west.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 719 KiB |
11
demos/editable/index.html
Normal file
11
demos/editable/index.html
Normal file
|
@ -0,0 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>OxJS Editable Demo</title
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<script type="text/javascript" src="../../build/Ox.js"></script>
|
||||
<script type="text/javascript" src="js/editable.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
108
demos/editable/js/editable.js
Normal file
108
demos/editable/js/editable.js
Normal file
|
@ -0,0 +1,108 @@
|
|||
Ox.load('UI', {debug: true}, function() {
|
||||
|
||||
var $box = Ox.Element()
|
||||
.css({width: '512px', height: '512px', margin: '8px'})
|
||||
.bind({
|
||||
click: function(e) {
|
||||
if ($(e.target).is('a')) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
})
|
||||
.bindEvent({
|
||||
singleclick: function(e) {
|
||||
var $target = $(e.target);
|
||||
if ($target.is('a')) {
|
||||
Ox.print('href=' + $target.attr('href'));
|
||||
}
|
||||
}
|
||||
})
|
||||
.appendTo(Ox.UI.$body);
|
||||
|
||||
/*
|
||||
$container.append(
|
||||
Ox.Input({
|
||||
height: 64,
|
||||
style: 'square',
|
||||
type: 'textarea',
|
||||
width: 256
|
||||
})
|
||||
);
|
||||
$container.append($('<br>'))
|
||||
*/
|
||||
|
||||
var data = {
|
||||
country: ['France'],
|
||||
director: ['Jean-Luc Godard'],
|
||||
language: ['French', 'English'],
|
||||
runtime: 5400,
|
||||
title: 'Deux ou trois choses que je sais d\'elle',
|
||||
year: '1967'
|
||||
};
|
||||
|
||||
Ox.Editable({
|
||||
value: data.title
|
||||
})
|
||||
.css({
|
||||
height: '16px',
|
||||
fontWeight: 'bold',
|
||||
fontSize: '13px'
|
||||
})
|
||||
.appendTo($box);
|
||||
|
||||
Ox.Editable({
|
||||
format: function(value) {
|
||||
return value ? value.split(', ').map(function(value) {
|
||||
return '<a href="/?find=' + value + '">' + value + '</a>'
|
||||
}).join(', ') : 'Unknown Director'
|
||||
},
|
||||
value: data.director.join(', ')
|
||||
})
|
||||
.css({
|
||||
height: '16px',
|
||||
fontWeight: 'bold',
|
||||
fontSize: '13px'
|
||||
})
|
||||
.appendTo($box);
|
||||
|
||||
var $div = $('<div>').appendTo($box.$element);
|
||||
|
||||
['country', 'year', 'language', 'runtime'].forEach(function(key, i) {
|
||||
var $div_ = $('<div>')
|
||||
.css({float: 'left', margin: '1px 0 0 1px'})
|
||||
.append(
|
||||
$('<div>')
|
||||
.css({float: 'left'})
|
||||
.html((i ? '; ' : '') + Ox.toTitleCase(key) + ': ')
|
||||
)
|
||||
.appendTo($div);
|
||||
Ox.Editable({
|
||||
format: function(value) {
|
||||
return value ? (
|
||||
Ox.isArray(data[key]) ? value.split(', ').map(function(value) {
|
||||
return '<a href="/?find=' + value + '">' + value + '</a>'
|
||||
}).join(', ') : value
|
||||
) : 'unknown';
|
||||
},
|
||||
value: Ox.isArray(data[key]) ? data[key].join(', ') : data[key]
|
||||
})
|
||||
.css({
|
||||
float: 'left'
|
||||
})
|
||||
.appendTo($div_);
|
||||
});
|
||||
|
||||
$div = $('<div>')
|
||||
.css({clear: 'both'})
|
||||
.appendTo($box.$element);
|
||||
|
||||
Ox.Editable({
|
||||
format: function(value) {
|
||||
return value ? Ox.parseHTML(value) : 'No description'
|
||||
},
|
||||
type: 'textarea',
|
||||
value: 'foo bar\nfoo bar'
|
||||
})
|
||||
.appendTo($div);
|
||||
|
||||
});
|
|
@ -278,6 +278,7 @@ Dialog
|
|||
|
||||
.OxDialog > .OxResize {
|
||||
position: absolute;
|
||||
z-index: 12;
|
||||
}
|
||||
.OxDialog > .OxResizeTopLeft {
|
||||
left: -2px;
|
||||
|
|
Loading…
Reference in a new issue