0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

update SlidePanel + CSS

Browse source
This commit is contained in:
rolux 2014-05-05 00:55:36 +02:00
parent 5ac44923e4
commit 87771969b0
2 changed files with 20 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
source/Ox.UI/css/Ox.UI.css
View file

@ -2055,6 +2055,8 @@ Panels
} }
.OxSlidePanel > div { .OxSlidePanel > div {
position: absolute; position: absolute;
top: 0;
bottom: 0;
} }
.OxSplitPanel { .OxSplitPanel {

29
source/Ox.UI/js/Panel/SlidePanel.js
View file

@ -7,13 +7,15 @@ Ox.SlidePanel = function(options, self) {
.defaults({ .defaults({
animate: 250, animate: 250,
elements: [], elements: [],
orientation: 'horizontal',
selected: '' selected: ''
}) })
.options(options || {}) .options(options || {})
.update({ .update({
selected: function() { selected: function() {
selectElement(self.options.selected); selectElement(self.options.selected);
} },
size: updateElements
}) })
.addClass('OxSlidePanel'); .addClass('OxSlidePanel');
@ -24,29 +26,34 @@ Ox.SlidePanel = function(options, self) {
self.$content = Ox.Element() self.$content = Ox.Element()
.css(getContentCSS()) .css(getContentCSS())
.appendTo(that); .appendTo(that);
self.options.elements.forEach(function(element) { updateElements();
element self.options.elements.forEach(function(element, index) {
.css({width: self.options.width + 'px'}) element.element.appendTo(self.$content);
.appendTo(self.$content);
}); });
function getContentCSS() { function getContentCSS() {
return { return {
left: -getIndexById(self.options.elements, self.options.selected) left: -Ox.getIndexById(self.options.elements, self.options.selected)
* self.options.width + 'px', * self.options.size + 'px',
width: self.options.width + 'px' width: self.options.size + 'px'
}; };
} }
function getElementCSS(index) { function getElementCSS(index) {
return { return {
left: index * self.options.width + 'px', left: index * self.options.size + 'px',
width: self.options.width + 'px' width: self.options.size + 'px'
}; };
} }
function selectElement(id) { function selectElement(id) {
self.content.animate(getContentCSS(), self.options.animate); self.$content.animate(getContentCSS(), self.options.animate);
}
function updateElements() {
self.options.elements.forEach(function(element, index) {
element.element.css(getElementCSS(index));
});
} }
that.replaceElement = function(idOrIndex, element) { that.replaceElement = function(idOrIndex, element) {