.i-tabsheet-tabs {
empty-cells: hide;
border-collapse: collapse;
- height: 48px;
+ height: 38px;
background: transparent url(tabsheet/img/tabs-bg.png) repeat-x bottom left;
width: 100%;
overflow:hidden;
}
+.i-tabsheet-hidetabs .i-tabsheet-tabcontainer {
+ display: none;
+}
+
+.i-tabsheet-scroller {
+ white-space: nowrap;
+ text-align: right;
+ height: 1px;
+}
+
+.i-tabsheet-scrollerPrev,
+.i-tabsheet-scrollerNext {
+ border: none;
+ width: 12px;
+ height: 37px;
+ margin-top: 11px;
+ opacity: 0.9999;
+}
+.i-tabsheet-scrollerPrev-disabled,
+.i-tabsheet-scrollerNext-disabled {
+ border: none;
+ width: 12px;
+ height: 37px;
+ margin-top: 11px;
+ opacity: 0.9999;
+}
+
+.i-tabsheet-scrollerNext,
+.i-tabsheet-scrollerNext-disabled {
+ background: transparent url(tabsheet/img/next.png) no-repeat;
+}
+.i-tabsheet-scrollerPrev,
+.i-tabsheet-scrollerPrev-disabled {
+ background: transparent url(tabsheet/img/prev.png) no-repeat;
+}
+.i-tabsheet-scrollerPrev:hover,
+.i-tabsheet-scrollerNext:hover {
+ background-position: -24px 0px;
+}
+.i-tabsheet-scrollerPrev-disabled,
+.i-tabsheet-scrollerNext-disabled {
+ background-position: -12px 0px;
+}
+.i-tabsheet-scrollerPrev-disabled:hover,
+.i-tabsheet-scrollerNext-disabled:hover {
+ background-position: -12px 0px;
+}
+
.i-tabsheet-tabs .i-caption {
white-space: nowrap;
}
.i-tabsheet-tabs {
empty-cells: hide;
border-collapse: collapse;
- height: 48px;
+ height: 38px;
background: transparent url(img/tabs-bg.png) repeat-x bottom left;
width: 100%;
overflow:hidden;
}
+.i-tabsheet-hidetabs .i-tabsheet-tabcontainer {
+ display: none;
+}
+
.i-tabsheet-scroller {
white-space: nowrap;
text-align: right;
- height: 48px;
-}
-.i-tabsheet-hidetabs .i-tabsheet-scroller {
- display: none;
+ height: 1px;
}
+
.i-tabsheet-scrollerPrev,
.i-tabsheet-scrollerNext {
border: none;
width: 12px;
- height: 38px;
- position: relative;
- margin-top: -10px;
- top: -29px;
+ height: 37px;
+ margin-top: 11px;
+ opacity: 0.9999;
}
.i-tabsheet-scrollerPrev-disabled,
.i-tabsheet-scrollerNext-disabled {
border: none;
width: 12px;
- height: 38px;
- position: relative;
- margin-top: -10px;
- top: -29px;
+ height: 37px;
+ margin-top: 11px;
+ opacity: 0.9999;
}
.i-tabsheet-scrollerNext,
.i-tabsheet-scrollerNext-disabled {
- background: transparent url(img/next.png) no-repeat bottom left;
- margin-right: 0px;
+ background: transparent url(img/next.png) no-repeat;
}
.i-tabsheet-scrollerPrev,
.i-tabsheet-scrollerPrev-disabled {
- background: transparent url(img/prev.png) no-repeat bottom left;
- margin-right: 0px;
+ background: transparent url(img/prev.png) no-repeat;
}
.i-tabsheet-scrollerPrev:hover,
.i-tabsheet-scrollerNext:hover {
- background-position: bottom right;
+ background-position: -24px 0px;
}
.i-tabsheet-scrollerPrev-disabled,
.i-tabsheet-scrollerNext-disabled {
- opacity: 0.5;
+ background-position: -12px 0px;
}
.i-tabsheet-scrollerPrev-disabled:hover,
.i-tabsheet-scrollerNext-disabled:hover {
- background-position: bottom left;
- opacity: 0.5;
+ background-position: -12px 0px;
}
.i-tabsheet-tabs .i-caption {
public static final String CLASSNAME = "i-tabsheet";
+ public static final String TABS_CLASSNAME = "i-tabsheet-tabcontainer";
public static final String SCROLLER_CLASSNAME = "i-tabsheet-scroller";
- private final Element scroller; // the tab-scroller element
- private final Element scrollerNext; // the tab-scroller next button element
- private final Element scrollerPrev; // the tab-scroller prev button element
+ private final Element tabs; // tabbar and 'scroller' container
+ private final Element scroller; // tab-scroller element
+ private final Element scrollerNext; // tab-scroller next button element
+ private final Element scrollerPrev; // tab-scroller prev button element
private int scrollerIndex = 0;
private final TabBar tb;
// Tab scrolling
DOM.setStyleAttribute(getElement(), "overflow", "hidden");
+ tabs = DOM.createDiv();
+ DOM.setElementProperty(tabs, "className", TABS_CLASSNAME);
scroller = DOM.createDiv();
+ DOM.appendChild(tabs, scroller);
DOM.setElementProperty(scroller, "className", SCROLLER_CLASSNAME);
scrollerPrev = DOM.createButton();
DOM.setElementProperty(scrollerPrev, "className", SCROLLER_CLASSNAME
DOM.setElementProperty(scrollerNext, "className", SCROLLER_CLASSNAME
+ "Next");
DOM.sinkEvents(scrollerNext, Event.ONCLICK);
- DOM.appendChild(getElement(), scroller);
+ DOM.appendChild(getElement(), tabs);
// Tabs
tb = new TabBar();
+ "-content");
DOM.setElementProperty(deco, "className", CLASSNAME + "-deco");
- add(tb, scroller);
+ add(tb, tabs);
DOM.appendChild(scroller, scrollerPrev);
DOM.appendChild(scroller, scrollerNext);
// tabs; push or not
if (uidl.hasAttribute("width")) {
// update width later, in updateTabScroller();
- DOM.setStyleAttribute(scroller, "width", "1px");
- DOM.setStyleAttribute(scroller, "overflow", "hidden");
+ DOM.setStyleAttribute(tabs, "width", "1px");
+ DOM.setStyleAttribute(tabs, "overflow", "hidden");
} else {
- DOM.setStyleAttribute(scroller, "width", "");
- DOM.setStyleAttribute(scroller, "overflow", "visible");
+ DOM.setStyleAttribute(tabs, "width", "");
+ DOM.setStyleAttribute(tabs, "overflow", "visible");
}
updateTabScroller();
*/
private void updateTabScroller() {
- DOM.setStyleAttribute(scroller, "width", getOffsetWidth() + "px");
+ DOM.setStyleAttribute(tabs, "width", getOffsetWidth() + "px");
if (scrollerIndex > tb.getTabCount()) {
scrollerIndex = 0;