sanj/oxjs
1
0
Fork 0
forked from 0x2620/oxjs
Code Pull requests Activity

add demos

Browse source
This commit is contained in:
rolux 2011-08-15 16:18:27 +02:00
commit 72b892f982
8 changed files with 407 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

11
demos/editable/index.html Normal file
View 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
View 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) + ':&nbsp;')
)
.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);
});