From 392a700d1952930cc8f225b245ada57ceb470401 Mon Sep 17 00:00:00 2001 From: rolux Date: Tue, 26 Feb 2013 10:44:27 +0530 Subject: [PATCH] add editable example --- .../forms/editable_elements/css/example.css | 11 ++++++ examples/forms/editable_elements/index.html | 14 ++++++++ .../forms/editable_elements/js/example.js | 36 +++++++++++++++++++ 3 files changed, 61 insertions(+) create mode 100644 examples/forms/editable_elements/css/example.css create mode 100644 examples/forms/editable_elements/index.html create mode 100644 examples/forms/editable_elements/js/example.js diff --git a/examples/forms/editable_elements/css/example.css b/examples/forms/editable_elements/css/example.css new file mode 100644 index 00000000..02fee088 --- /dev/null +++ b/examples/forms/editable_elements/css/example.css @@ -0,0 +1,11 @@ +#box { + width: 512px; + margin: 16px; +} + +.label { + font-weight: bold; +} +div.label { + margin-top: 16px; +} \ No newline at end of file diff --git a/examples/forms/editable_elements/index.html b/examples/forms/editable_elements/index.html new file mode 100644 index 00000000..c58d8ab3 --- /dev/null +++ b/examples/forms/editable_elements/index.html @@ -0,0 +1,14 @@ + + + + Editable Elements + + + + + + + + + + \ No newline at end of file diff --git a/examples/forms/editable_elements/js/example.js b/examples/forms/editable_elements/js/example.js new file mode 100644 index 00000000..e61e9f56 --- /dev/null +++ b/examples/forms/editable_elements/js/example.js @@ -0,0 +1,36 @@ +/* +This example shows elements that are editable inline — 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.$('') + .addClass('label') + .html((i > 1 ? ' ' : '') + 'Editable ' + i + ': ') + .appendTo($box); + Ox.EditableContent({ + placeholder: 'Placeholder ' + i, + tooltip: 'Doubleclick to edit' + }) + .appendTo($box); + }); + + Ox.$('
') + .addClass('label') + .html('Editable 4:') + .appendTo($box); + Ox.EditableContent({ + placeholder: 'Placeholder 4', + tooltip: 'Doubleclick to edit', + type: 'div' + }) + .appendTo($box); + +});