Thanks Your answer help me alot but I done find the way to change the splitter collaps bar before the third panel. I have tried to change some css and the following code?
snappers: [$('SidebarCollapse'),$('LigendbarCollapse'),$('LigendbarCollapse')]}); But it dosent work out?
I am not sure about your intention.
Also: snappers is not a JxLib element.
However, maybe this helps:
http://www.geoportal.hilden.de/karten/luftbildkarte/
You can use web developer tools to inspect html and css.
1) index.html
...
var COLLAPSED_SIDEBAR_WIDTH = 8;
var PANEL_WIDTH = $('AppContainer').getWidth() * 0.15;
if (PANEL_WIDTH < 250) PANEL_WIDTH = 250;
...
splitter = new Jx.Splitter('SplitterArea',
{
elements:[$('Sidebar_left'),$('MapArea'),$('Sidebar_right')],
layout:'horizontal',
useChildren: true,
containerOptions:
[
{
minWidth: COLLAPSED_SIDEBAR_WIDTH ,
width: PANEL_WIDTH,
maxWidth: 350
},
{
resizeWithWindow: true
},
{
minWidth: COLLAPSED_SIDEBAR_WIDTH ,
width: PANEL_WIDTH,
maxWidth: 350
}
],
barOptions: [
{
snap: 'before',
snapElement: $('SidebarCollapse_left'),
snapEvents: ['click']
},
{
snap: 'after',
snapElement: $('SidebarCollapse_right'),
snapEvents: ['click']
}
]
}
);
...
2) slate.css
...
#SidebarCollapse_left {
position: absolute;
width: 8px;
top: 0px;
right: 0px;
height: 100%;
z-index: 1;
overflow: hidden;
cursor: pointer;
}
#SidebarCollapse_right {
position: absolute;
width: 8px;
top: 0px;
right: 0px;
height: 100%;
z-index: 1;
overflow: hidden;
cursor: pointer;
}
.jxSnapOpened #SidebarCollapseButton_left {
background: url(images/sidebarCloseButton.png) center no-repeat;
}
.jxSnapClosed #SidebarCollapseButton_left {
background: url(images/sidebarOpenButton.png) center no-repeat;
}
.jxSnapOpened #SidebarCollapseButton_right {
background: url(images/sidebarOpenButton.png) center no-repeat;
}
.jxSnapClosed #SidebarCollapseButton_right {
background: url(images/sidebarCloseButton.png) center no-repeat;
}
...
Bernhard