oxjs/source/Ox.UI/js/Form/Ox.Picker.js

108 lines
2.6 KiB
JavaScript
Raw Normal View History

2011-11-05 16:46:53 +00:00
'use strict';
2012-05-21 10:38:18 +00:00
2011-05-16 08:24:46 +00:00
/*@
Ox.Picker <f:Ox.Element> Picker Object
2012-05-22 13:14:40 +00:00
([options[, self]]) -> <o> Picker Object
2011-05-16 08:24:46 +00:00
options <o> Options object
2011-05-16 10:49:48 +00:00
element <o|null> picker element
elementHeight <n|128> height
elemementWidth <n|256> width
id <s> picker id
overlap <s|none> select button overlap value
show <!> picker is shown
hide <!> picker is hidden
2011-05-16 08:24:46 +00:00
@*/
2011-04-22 22:03:10 +00:00
Ox.Picker = function(options, self) {
self = self || {};
var that = Ox.Element({}, self)
2011-04-22 22:03:10 +00:00
.defaults({
element: null,
elementHeight: 128,
elementWidth: 256,
id: '',
overlap: 'none'
})
.options(options || {});
self.$selectButton = Ox.Button({
2011-04-22 22:03:10 +00:00
overlap: self.options.overlap,
title: 'select',
type: 'image'
})
.click(showMenu)
.appendTo(that);
self.$menu = Ox.Element()
2011-04-22 22:03:10 +00:00
.addClass('OxPicker')
.css({
width: self.options.elementWidth + 'px',
height: (self.options.elementHeight + 24) + 'px'
});
self.options.element
.css({
width: self.options.elementWidth + 'px',
height: self.options.elementHeight + 'px'
})
.appendTo(self.$menu);
self.$bar = Ox.Bar({
2011-04-22 22:03:10 +00:00
orientation: 'horizontal',
size: 24
})
.appendTo(self.$menu);
that.$label = Ox.Label({
2011-04-22 22:03:10 +00:00
width: self.options.elementWidth - 60
})
.appendTo(self.$bar);
self.$doneButton = Ox.Button({
2011-04-22 22:03:10 +00:00
title: 'Done',
width: 48
})
.click(hideMenu)
.appendTo(self.$bar);
self.$layer = $('<div>')
.addClass('OxLayer')
.click(hideMenu);
function hideMenu() {
self.$menu.detach();
self.$layer.detach();
self.$selectButton
.removeClass('OxSelected')
.css({
MozBorderRadius: '8px',
WebkitBorderRadius: '8px'
});
that.triggerEvent('hide');
}
2011-04-22 22:03:10 +00:00
function showMenu() {
var offset = that.offset(),
left = offset.left,
top = offset.top + 15;
self.$selectButton
.addClass('OxSelected')
.css({
MozBorderRadius: '8px 8px 0 0',
WebkitBorderRadius: '8px 8px 0 0'
});
self.$layer.appendTo(Ox.UI.$body);
self.$menu
.css({
left: left + 'px',
top: top + 'px'
})
.appendTo(Ox.UI.$body);
that.triggerEvent('show');
}
2011-04-22 22:03:10 +00:00
return that;
};