update SlidePanel + CSS
This commit is contained in:
parent
5ac44923e4
commit
87771969b0
2 changed files with 20 additions and 11 deletions
|
@ -2055,6 +2055,8 @@ Panels
|
||||||
}
|
}
|
||||||
.OxSlidePanel > div {
|
.OxSlidePanel > div {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.OxSplitPanel {
|
.OxSplitPanel {
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
Loading…
Reference in a new issue