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

add editable example

Browse source
This commit is contained in:
rolux 2013-02-26 10:44:27 +05:30
parent 5b5a133533
commit 392a700d19
3 changed files with 61 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
examples/forms/editable_elements/css/example.css Normal file
View file

@ -0,0 +1,11 @@
#box {
width: 512px;
margin: 16px;
}
.label {
font-weight: bold;
}
div.label {
margin-top: 16px;
}

14
examples/forms/editable_elements/index.html Normal file
View file

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html>
<head>
<title>Editable Elements</title>
<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/oxlight/png/icon16.png"/>
<link rel="stylesheet" type="text/css" href="css/example.css"/>
<script type="text/javascript" src="../../../build/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>

36
examples/forms/editable_elements/js/example.js Normal file
View file

@ -0,0 +1,36 @@
/*
This example shows elements that are editable inline &mdash; either a span or a
div.
*/
'use strict';
Ox.load('UI', function() {
var $box = Ox.Element()
.attr({id: 'box'})
.appendTo(Ox.$body);
Ox.loop(1, 4, function(i) {
Ox.$('<span>')
.addClass('label')
.html((i > 1 ? '&nbsp;' : '') + 'Editable ' + i + ':&nbsp;')
.appendTo($box);
Ox.EditableContent({
placeholder: 'Placeholder ' + i,
tooltip: 'Doubleclick to edit'
})
.appendTo($box);
});
Ox.$('<div>')
.addClass('label')
.html('Editable 4:')
.appendTo($box);
Ox.EditableContent({
placeholder: 'Placeholder 4',
tooltip: 'Doubleclick to edit',
type: 'div'
})
.appendTo($box);
});