init
This commit is contained in:
Rolux
commit
5b8b31271c
87 changed files with 73788 additions and 0 deletions
245
demos/test/index.html
Normal file
245
demos/test/index.html
Normal file
|
|
@ -0,0 +1,245 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<link rel="stylesheet" type="text/css" href="../../build/css/ox.ui.css"/>
|
||||
<style>
|
||||
input {
|
||||
//float: left;
|
||||
//margin: 4px 0 4px 0;
|
||||
}
|
||||
.top {
|
||||
margin: 4px;
|
||||
font-family: Monaco, Consolas;
|
||||
font-size: 16px;
|
||||
line-height: 16px;
|
||||
}
|
||||
.bottom {
|
||||
margin: 7px;
|
||||
font-family: Monaco, Consolas;
|
||||
font-size: 10px;
|
||||
line-height: 10px;
|
||||
}
|
||||
.margin {
|
||||
float: left;
|
||||
margin: 4px 2px 4px 2px;
|
||||
}
|
||||
.padding {
|
||||
float: left;
|
||||
margin: 4px 0 4px 0;
|
||||
padding: 0 4px 0 4px;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript" src="../../build/js/jquery-1.3.2.js"></script>
|
||||
<script type="text/javascript" src="../../build/js/ox.js"></script>
|
||||
<script type="text/javascript" src="../../build/js/ox.ui.js"></script>
|
||||
<script>
|
||||
$(function() {
|
||||
var size = window.location.hash.substr(1) || "small",
|
||||
$body = $("body"),
|
||||
$toolbars = [];
|
||||
|
||||
var sidePanel = new Ox.Panel();
|
||||
var mainPanel = new Ox.Panel().css({
|
||||
//borderLeft: "1px solid rgb(160, 160, 160)"
|
||||
});
|
||||
var middleSplitPanel = Ox.SplitPanel({
|
||||
elements: [
|
||||
{
|
||||
element: sidePanel,
|
||||
size: 256
|
||||
},
|
||||
{
|
||||
element: mainPanel
|
||||
}
|
||||
],
|
||||
orientation: "horizontal"
|
||||
})/*.css({
|
||||
borderTop: "1px solid rgb(160, 160, 160)",
|
||||
borderBottom: "1px solid rgb(160, 160, 160)"
|
||||
})*/;
|
||||
|
||||
var topPanel = Ox.Toolbar({size: "small"})
|
||||
.css({
|
||||
zIndex: 2,
|
||||
MozBoxShadow: "0 0 4px rgb(0, 0, 0)",
|
||||
WebkitBoxShadow: "0 0 4px rgb(0, 0, 0)"
|
||||
})
|
||||
.append(
|
||||
$("<div/>")
|
||||
.addClass("top")
|
||||
.html("Ox.js")
|
||||
);
|
||||
var bottomPanel = Ox.Toolbar({size: "small"})
|
||||
.css({
|
||||
zIndex: 2,
|
||||
MozBoxShadow: "0 0 4px rgb(0, 0, 0)",
|
||||
WebkitBoxShadow: "0 0 4px rgb(0, 0, 0)"
|
||||
})
|
||||
.append(
|
||||
$("<div/>")
|
||||
.addClass("bottom")
|
||||
.html("Ox.js - A JavaScript Library for Web Applications")
|
||||
);
|
||||
var mainSplitPanel = Ox.SplitPanel({
|
||||
elements: [
|
||||
{
|
||||
element: topPanel,
|
||||
size: 24
|
||||
},
|
||||
{
|
||||
element: middleSplitPanel
|
||||
},
|
||||
{
|
||||
element: bottomPanel,
|
||||
size: 24
|
||||
}
|
||||
],
|
||||
orientation: "vertical"
|
||||
}).appendTo($body);
|
||||
|
||||
var oxjsPanel = new Ox.CollapsePanel({
|
||||
title: "ox.js"
|
||||
}).appendTo(sidePanel);
|
||||
oxjsPanel.$content.html("Core<br/>Array/Object<br/>Color<br/>Date<br/>Format<br/>Math<br/>String<br/>Type").click(function() {$(this).append("<div>foo</div>")})
|
||||
var oxdatajsPanel = new Ox.CollapsePanel({
|
||||
title: "ox.data.js"
|
||||
}).appendTo(sidePanel);
|
||||
oxdatajsPanel.$content.html("HTML<br/>ISO<br/>Unicode")
|
||||
var oxuijsPanel = new Ox.CollapsePanel({
|
||||
title: "ox.ui.js"
|
||||
}).appendTo(sidePanel);
|
||||
oxuijsPanel.$content.html("Core<br/>Bars<br/>Forms<br/>Panels")
|
||||
|
||||
$tabbar = Ox.Tabbar({
|
||||
values: ["Documentation", "Demo", "Source Code"]
|
||||
}).appendTo(mainPanel);
|
||||
|
||||
for (var i = 0; i < 5; i++) {
|
||||
$toolbars[i] = Ox.Toolbar({size: i ? "small" : "medium"}).appendTo(mainPanel);
|
||||
}
|
||||
$toolbars[5] = Ox.Bar({size: 24}).appendTo(mainPanel);
|
||||
|
||||
Ox.Button({
|
||||
size: "medium",
|
||||
type: "text",
|
||||
value: "Switch Theme"
|
||||
}).addClass("margin").click(switchTheme).appendTo($toolbars[0]);
|
||||
Ox.Button({
|
||||
size: size,
|
||||
type: "text",
|
||||
value: "Button"
|
||||
}).addClass("margin").appendTo($toolbars[1]);
|
||||
///*
|
||||
Ox.Button({
|
||||
size: "xsmall",
|
||||
type: "text",
|
||||
value: ['Button, value=["foo", "bar"] (foo)', 'Button, value=["foo", "bar"] (bar)']
|
||||
}).addClass("margin").css({width: "256px"}).appendTo($toolbars[1]);
|
||||
//*/
|
||||
Ox.Button({
|
||||
selectable: true,
|
||||
size: size,
|
||||
type: "text",
|
||||
value: "Button, selectable=true"
|
||||
}).addClass("margin").appendTo($toolbars[1]);
|
||||
Ox.ButtonGroup({
|
||||
values: ["Button Group (0)", "Button Group (1)", "Button Group (2)"]
|
||||
}).addClass("padding").appendTo($toolbars[1]);
|
||||
$.each(["close", "add", "remove", ["play", "pause"]], function(i, v) {
|
||||
Ox.Button({
|
||||
size: size,
|
||||
type: "image",
|
||||
value: v
|
||||
})
|
||||
.addClass("margin")
|
||||
.mousedown(function() {
|
||||
clickButton($(this).val())
|
||||
})
|
||||
.appendTo($toolbars[2]);
|
||||
});
|
||||
///*
|
||||
Ox.Button({
|
||||
size: size,
|
||||
type: "text",
|
||||
value: "Enabled"
|
||||
}).addClass("margin").appendTo($toolbars[2]);
|
||||
Ox.Button({
|
||||
disabled: true,
|
||||
size: size,
|
||||
type: "text",
|
||||
value: "Disabled"
|
||||
}).addClass("margin").appendTo($toolbars[2]);
|
||||
//*/
|
||||
Ox.ButtonGroup({
|
||||
selectable: true,
|
||||
selected: 0,
|
||||
size: "small",
|
||||
type: "image",
|
||||
values: ["close", "add", "remove"]
|
||||
}).addClass("padding").appendTo($toolbars[2]);
|
||||
///*
|
||||
Ox.Input({
|
||||
placeholder: "Placeholder",
|
||||
size: size
|
||||
}).addClass("margin").appendTo($toolbars[3]);
|
||||
var range = Ox.Range({
|
||||
max: 10,
|
||||
min: 0,
|
||||
size: 200,
|
||||
step: 0.1,
|
||||
value: 0
|
||||
}).addClass("margin").appendTo($toolbars[4])
|
||||
var input = Ox.Input({
|
||||
value: 0
|
||||
})
|
||||
.addClass("margin")
|
||||
.css({
|
||||
width: "32px"
|
||||
})
|
||||
.subscribe("change." + range.id, update)
|
||||
.appendTo($toolbars[4]);
|
||||
function update() {
|
||||
//console.log("update", range.options("value"))
|
||||
/*
|
||||
// fixme: make this work
|
||||
input.options({
|
||||
value: range.options("value")
|
||||
});
|
||||
*/
|
||||
input.val(range.options("value").toFixed(1))
|
||||
}
|
||||
//console.log("binding to OxRange" + range.id + "Change")
|
||||
Ox.Range({
|
||||
animate: true,
|
||||
arrows: true,
|
||||
max: 300,
|
||||
min: 100,
|
||||
size: 202,
|
||||
step: 100,
|
||||
thumbValue: true,
|
||||
trackImages: ["png/r.png", "png/g.png", "png/b.png"],
|
||||
value: 100
|
||||
}).addClass("margin").appendTo($toolbars[4])
|
||||
Ox.Button({
|
||||
selectable: true,
|
||||
size: size,
|
||||
type: "text",
|
||||
value: "Foo"
|
||||
}).addClass("margin").appendTo(mainPanel);
|
||||
//*/
|
||||
function switchTheme() {
|
||||
if (Ox.theme() == "classic") {
|
||||
Ox.theme("modern");
|
||||
} else {
|
||||
Ox.theme("classic");
|
||||
}
|
||||
}
|
||||
function clickButton(val) {
|
||||
// console.log(val);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body></body>
|
||||
</html>
|
||||
BIN
demos/test/png/b.png
Normal file
BIN
demos/test/png/b.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
BIN
demos/test/png/g.png
Normal file
BIN
demos/test/png/g.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
BIN
demos/test/png/r.png
Normal file
BIN
demos/test/png/r.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
9
demos/test/test.html
Normal file
9
demos/test/test.html
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script type="text/javascript" src="../../build/js/jquery-1.3.2.js"></script>
|
||||
<script type="text/javascript" src="test.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
232
demos/test/test.js
Normal file
232
demos/test/test.js
Normal file
|
|
@ -0,0 +1,232 @@
|
|||
/*
|
||||
ox.js
|
||||
*/
|
||||
Ox = {
|
||||
version: "0.1.2"
|
||||
};
|
||||
(function() {
|
||||
var _ = {
|
||||
uid: 0
|
||||
};
|
||||
Ox.makeObject = function() {
|
||||
/*
|
||||
>>> Ox.makeObject("foo", "bar").foo
|
||||
bar
|
||||
>>> Ox.makeObject({foo: "bar"}).foo
|
||||
bar
|
||||
*/
|
||||
var obj = {};
|
||||
if (arguments.length == 1) {
|
||||
obj = arguments[0];
|
||||
} else {
|
||||
obj[arguments[0]] = arguments[1]
|
||||
}
|
||||
return obj;
|
||||
}
|
||||
Ox.uid = function() {
|
||||
/*
|
||||
returns a unique id
|
||||
*/
|
||||
return _.uid++;
|
||||
}
|
||||
})();
|
||||
/*
|
||||
ox.ui.js
|
||||
*/
|
||||
(function() {
|
||||
var _ = {
|
||||
elements: [],
|
||||
jQueryFunctions: function() {
|
||||
var functions = [],
|
||||
$element = $("<div/>");
|
||||
delete $element.length;
|
||||
$.each($element, function(k, v) {
|
||||
if (typeof v == "function") {
|
||||
functions.push(k);
|
||||
}
|
||||
});
|
||||
return functions.sort();
|
||||
}()
|
||||
};
|
||||
Ox.Widget = function(options, self) {
|
||||
|
||||
// construct
|
||||
var self = self || {},
|
||||
that = this;
|
||||
|
||||
// init
|
||||
(function() {
|
||||
if (typeof options == "string") {
|
||||
options = {
|
||||
element: options
|
||||
};
|
||||
}
|
||||
that.ox = Ox.version;
|
||||
that.id = Ox.uid();
|
||||
that.$element = $("<" + (options.element || "div") + "/>")
|
||||
.data("ox", that.id);
|
||||
_.elements[that.id] = that;
|
||||
wrapjQuery();
|
||||
})();
|
||||
|
||||
// private
|
||||
function wrapjQuery() {
|
||||
$.each(_.jQueryFunctions, function(i, v) {
|
||||
that[v] = function() {
|
||||
var args = arguments,
|
||||
length = args.length,
|
||||
id, ret;
|
||||
$.each(args, function(i, v) {
|
||||
// if an ox object was passed
|
||||
// then pass its $element instead
|
||||
// so we can do jqObj.jqFn(oxObj)
|
||||
if (v.ox) {
|
||||
args[i] = v.$element;
|
||||
}
|
||||
});
|
||||
// why does this not work?
|
||||
// ret = that.$element[v].apply(this, arguments);
|
||||
if (length == 0) {
|
||||
ret = that.$element[v]();
|
||||
} else if (length == 1) {
|
||||
ret = that.$element[v](args[0]);
|
||||
} else if (length == 2) {
|
||||
ret = that.$element[v](args[0], args[1]);
|
||||
} else if (length == 3) {
|
||||
ret = that.$element[v](args[0], args[1], args[2]);
|
||||
} else if (length == 4) {
|
||||
ret = that.$element[v](args[0], args[1], args[2], args[3]);
|
||||
}
|
||||
// if the $element of an ox object was returned
|
||||
// then return the ox object instead
|
||||
// so we can do oxObj.jqFn().oxFn()
|
||||
return ret.jquery && oxui.elements[id = ret.data("ox")] ?
|
||||
oxui.elements[id] : ret;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// shared
|
||||
self.onChange = function() {
|
||||
/*
|
||||
self.onChange(option, value)
|
||||
is called when an option changes
|
||||
to be implemented by widget
|
||||
*/
|
||||
};
|
||||
|
||||
// public
|
||||
that.defaults = function(defaults) {
|
||||
/*
|
||||
that.defaults({foo: x}) sets self.defaults
|
||||
*/
|
||||
self.defaults = defaults;
|
||||
return that;
|
||||
}
|
||||
that.options = function() {
|
||||
/*
|
||||
that.options() returns self.options
|
||||
that.options("foo") returns self.options.foo
|
||||
that.options("foo", x) sets self.options.foo,
|
||||
returns that
|
||||
that.options({foo: x, bar: y}) sets self.options.foo
|
||||
and self.options.bar,
|
||||
returns that
|
||||
*/
|
||||
var length = arguments.length,
|
||||
args, ret;
|
||||
if (length == 0) {
|
||||
// options()
|
||||
ret = self.options;
|
||||
} else if (length == 1 && typeof arguments[0] == "string") {
|
||||
// options(str)
|
||||
ret = self.options[arguments[0]]
|
||||
} else {
|
||||
// options (str, val) or options({str: val, ...})
|
||||
// translate (str, val) to ({str: val})
|
||||
args = Ox.makeObject.apply(that, arguments);
|
||||
// if options have not been set, extend defaults,
|
||||
// otherwise, extend options
|
||||
self.options = $.extend(
|
||||
self.options || self.defaults, args);
|
||||
$.each(args, function(k, v) {
|
||||
self.onChange(k, v);
|
||||
});
|
||||
ret = that;
|
||||
}
|
||||
return ret;
|
||||
}
|
||||
|
||||
// return
|
||||
return that;
|
||||
|
||||
}
|
||||
/*
|
||||
Widget Design Pattern
|
||||
|
||||
Ox.MyWidget = function(options, self) {
|
||||
|
||||
// construct
|
||||
var self = self || {},
|
||||
that = new Ox.Widget({...}, self)
|
||||
.defaults({...})
|
||||
.options(options || {});
|
||||
|
||||
// init, wrapped in function so it can be collapsed
|
||||
(function() {...})();
|
||||
|
||||
// private, can be called from init
|
||||
function foo() {...}
|
||||
|
||||
// private, shared
|
||||
self.onChange = function(option, value) {...}
|
||||
self.foo = function() {...}
|
||||
|
||||
// public
|
||||
that.foo = function() {...}
|
||||
|
||||
// return
|
||||
return that;
|
||||
|
||||
}
|
||||
*/
|
||||
Ox.Foo = function(options, self) {
|
||||
var self = self || {},
|
||||
that = new Ox.Widget({
|
||||
element: "div"
|
||||
}, self)
|
||||
.defaults({
|
||||
foo: "bar"
|
||||
})
|
||||
.options(options || {});
|
||||
(function() {
|
||||
self.time = Date.now();
|
||||
})();
|
||||
self.onChange = function(option, value) {
|
||||
if (option == "foo") {
|
||||
console.log("foo set to", value);
|
||||
}
|
||||
}
|
||||
that.getTime = function() {
|
||||
return self.time;
|
||||
}
|
||||
return that;
|
||||
}
|
||||
Ox.Bar = function(options, self) {
|
||||
var self = self || {},
|
||||
that = Ox.Foo({
|
||||
foo: "baz"
|
||||
}, self)
|
||||
.defaults({
|
||||
bar: "xyz"
|
||||
})
|
||||
.options(options || {}),
|
||||
(function() {
|
||||
self.time = 0;
|
||||
})();
|
||||
that.bar = function() {
|
||||
console.log("Bar.bar()");
|
||||
}
|
||||
return that;
|
||||
}
|
||||
})();
|
||||
Loading…
Add table
Add a link
Reference in a new issue