<!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.4.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) || "medium", $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 mainMenu = new Ox.MainMenu({ menus: [ { id: "oxjs", title: "Oxjs", items: [ { id: "about", title: "About" }, {}, { id: "contact", title: "Contact"} ] }, { id: "file", title: "File", items: [ { id: "load", keyboard: "control o", title: "Open" }, { id: "save", keyboard: "control a", title: "Save" }, { id: "save_as", keyboard: "shift control s", title: "Save As..."} ] }, { id: "edit", title: "Edit", items: [ { id: "undo", keyboard: "control z", title: "Undo" }, { id: "redo", keyboard: "shift control z", title: "Redo" }, {}, { id: "cut", keyboard: "control x", title: "Cut" }, { id: "copy", keyboard: "control c", title: "Copy" }, { id: "paste", keyboard: "control v", title: "Paste"}, { id: "delete", keyboard: "delete", title: "Delete"}, {}, { id: "select_all", keyboard: "control a", title: "Select All" }, { id: "select_none", keyboard: "shift control a", title: "Select None" }, { id: "invert_selection", keyboard: "alt control a", title: "Invert Selection" }, ] }, { id: "sort", title: "Sort", items: [ { id: "sort_movies", title: "Sort Movies by", items: [ { checked: true, group: "sort_movies", id: "title", title: "Title"}, { checked: false, group: "sort_movies", id: "director", title: "Director" }, ] }, { id: "order_movies", title: "Order Movies", items: [ { checked: false, group: "order_movies", id: "ascending", title: "Ascending"}, { checked: true, group: "order_movies", id: "descending", title: "Descending" }, ] } ] }, { id: "help", title: "Help", items: [ { id: "help", keyboard: "control h", title: "Help" } ] } ], size: "large" }); 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: mainMenu, 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 = new Ox.Tabbar({ selected: 0, // fixme: should not be necessary tabs: [ { id: "documentation", value: "Documentation" }, { id: "demo", value: "Demo" }, { id: "source_code", value: "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: "large", 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: "small", 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({ buttons: [ { id: "buttongroup0", value: "Button Group (0)" }, { id: "buttongroup1", value: "Button Group (1)" }, { id: "buttongroup2", value: "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({ buttons: [ { id: "close", value: "close" }, { id: "add", value: "add" }, { id: "remove", value: "remove" } ], selectable: true, selected: 0, size: "medium", type: "image", }).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" }) .bindEvent("change." + range.id, update) .appendTo($toolbars[4]); function update() { //Ox.print("update", range.options("value")) /* // fixme: make this work input.options({ value: range.options("value") }); */ input.val(range.options("value").toFixed(1)) } //Ox.print("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); Ox.Select({ id: "select1", items: [ { checked: true, id: "one", title: "One" }, { id: "two", title: "Two" }, { id: "three", title: "Three" } ] }).addClass("margin").width(96).appendTo(mainPanel); Ox.Select({ id: "select2", items: [ { checked: true, id: "four", title: "Four" }, { id: "five", title: "Five" }, { id: "six", title: "Six" } ] }).addClass("margin").width(96).appendTo(mainPanel); //*/ function switchTheme() { if (Ox.theme() == "classic") { Ox.theme("modern"); } else { Ox.theme("classic"); } } function clickButton(val) { // Ox.print(val); } }); </script> </head> <body></body> </html>