in symbol example, add theme switch

This commit is contained in:
rolux 2012-04-15 14:40:56 +02:00
parent 8a0cc3ee2b
commit e1bab25ab7
2 changed files with 35 additions and 5 deletions

View file

@ -1,3 +1,7 @@
#switch {
float: right;
margin: 4px;
}
.OxButtonGroup {
margin: 4px;
}
@ -8,6 +12,11 @@
float: left;
width: 256px;
height: 256px;
border: 1px solid rgb(208, 208, 208);
margin: 8px;
}
.OxThemeClassic .symbol {
border: 1px solid rgb(208, 208, 208);
}
.OxThemeModern .symbol {
border: 1px solid rgb(48, 48, 48);
}

View file

@ -2,9 +2,9 @@
...
*/
Ox.load('UI', function() {
'use strict';
Ox.$body.css({margin: '8px', overflowY: 'scroll'});
Ox.load('UI', function() {
var groups = [
['add', 'remove', 'close', 'center', 'bracket'],
@ -36,8 +36,20 @@ Ox.load('UI', function() {
['icon', 'clock', 'user']
],
symbols = Ox.flatten(groups),
$buttons = $('<div>').addClass('buttons').appendTo(Ox.$body);
$symbols = $('<div>').addClass('symbols').appendTo(Ox.$body);
$menu = Ox.Bar({size: 24}),
$switch = Ox.Button({
title: 'Switch Theme'
})
.attr({id: 'switch'})
.bind({
click: function() {
Ox.Theme(Ox.Theme() == 'classic' ? 'modern' : 'classic');
}
})
.appendTo($menu),
$main = Ox.Container(),
$buttons = $('<div>').addClass('buttons').appendTo($main),
$symbols = $('<div>').addClass('symbols').appendTo($main);
groups.forEach(function(symbols) {
Ox.ButtonGroup({
@ -66,4 +78,13 @@ Ox.load('UI', function() {
.appendTo($symbols);
});
Ox.SplitPanel({
elements: [
{element: $menu, size: 24},
{element: $main}
],
orientation: 'vertical'
})
.appendTo(Ox.$body);
});