Ich habe herausgefunden, über GWT CustomScrollPanel und wie Sie die Bildlaufleiste anpassen können, aber ich finde keine Beispiele oder wie Sie es einrichten. Gibt es Beispiele, die benutzerdefinierte Scrollbalken verwenden?GWT CustomScrollPanel Beispiel
Antwort
So würden Sie die nativen Bildlaufleisten anpassen, Sie könnten jedoch auch eigene Bildlaufleistenklassen entwickeln, die VerticalScrollbar und HorizontalScrollbar implementieren und wesentlich anpassbarer sind.
Ressource (Stil) Definitionen:
public class ScrollResourcesContainer {
public interface ScrollPanelResources extends CustomScrollPanel.Resources
{
@Override
@Source({ "ScrollPanel.css", CustomScrollPanel.Style.DEFAULT_CSS })
CustomScrollPanel.Style customScrollPanelStyle();
}
public interface HorizontalResources extends NativeHorizontalScrollbar.Resources
{
@Override
@Source({ "HorizontalScrollbar.css", NativeHorizontalScrollbar.StyleTransparant.DEFAULT_CSS })
NativeHorizontalScrollbar.Style nativeHorizontalScrollbarStyle();
}
public interface VerticalResources extends NativeVerticalScrollbar.Resources
{
@Override
@Source({ "VerticalScrollbar.css", NativeVerticalScrollbar.StyleTransparant.DEFAULT_CSS })
NativeVerticalScrollbar.Style nativeVerticalScrollbarStyle();
}
}
Nutzung über CustomScrollPanel
:
CustomScrollPanel csp = new CustomScrollPanel((ScrollResourcesContainer.ScrollPanelResources) GWT.create(ScrollResourcesContainer.ScrollPanelResources.class));
csp.setHorizontalScrollbar(new NativeHorizontalScrollbar((HorizontalResources) GWT.create(HorizontalResources.class)),
AbstractNativeScrollbar.getNativeScrollbarHeight());
csp.setVerticalScrollbar(new NativeVerticalScrollbar((VerticalResources) GWT.create(VerticalResources.class)),
AbstractNativeScrollbar.getNativeScrollbarWidth());
Um die schlanken Bildlaufleisten für vertikale Bildlaufleiste in gwt zu erhalten, müssen Sie in den verticalScrollBar folgenden Code hinzuzufügen. css. Welche funktioniert nicht für IE wie Google Mail.
/* Turn on a 16x16 scrollbar */
::-webkit-scrollbar {
width: 16px;
height: 16px;
}
/* Turn on single button up on top, and down on bottom */
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
display: block;
}
/* Turn off the down area up on top, and up area on bottom */
::-webkit-scrollbar-button:vertical:start:increment,
::-webkit-scrollbar-button:vertical:end:decrement {
display: none;
}
/* Place The scroll down button at the bottom */
::-webkit-scrollbar-button:end:increment {
background-image: url(images/scroll_cntrl_dwn.png);
}
/* Place The scroll up button at the up */
::-webkit-scrollbar-button:start:decrement {
background-image: url(images/scroll_cntrl_up.png);
}
/* Top area above thumb and below up button */
::-webkit-scrollbar-track-piece:vertical:start {
background-image: url(images/scroll_gutter_top.png), url(images/scroll_gutter_mid.png);
background-repeat: no-repeat, repeat-y;
}
/* Bottom area below thumb and down button */
::-webkit-scrollbar-track-piece:vertical:end {
background-image: url(images/scroll_gutter_btm.png), url(images/scroll_gutter_mid.png);
background-repeat: no-repeat, repeat-y;
background-position: bottom left, 0 0;
}
/* The thumb itself */
::-webkit-scrollbar-thumb:vertical {
height: 56px;
-webkit-border-image: url(images/scroll_thumb.png) 8 0 8 0 stretch stretch;
border-width: 8 0 8 0;
}
ähnlich können Sie auch für die horizontale Bildlaufleiste tun. Bitte überprüfen Sie den folgenden Link für weitere Details. http://almaer.com/blog/creating-custom-scrollbars-with-css-how-css-isnt-great-for-every-task – Saritha
Danke für die VerticalScrollbar.css, das hat wirklich sehr geholfen. Haben Sie ein Beispiel für eine HorizontalScrollbar.css? – MattWeiler
Wenn jemand in mit dem CSS sowohl vertikal/horizontal interessiert ist, ist es das, was ich verwende.
HorizontalScrollbar.css
/* ***********
* SCROLLBAR *
* ***********/
.nativeHorizontalScrollbar::-webkit-scrollbar
{
width: 10px;
height: 10px;
}
/* *************
* BUTTON AREA *
* *************/
.nativeHorizontalScrollbar::-webkit-scrollbar-button:horizontal
{
background-color: transparent;
}
/* Increment scroll left/right button. */
.nativeHorizontalScrollbar::-webkit-scrollbar-button:start:decrement,
.nativeHorizontalScrollbar::-webkit-scrollbar-button:end:increment
{
display: block;
width: 10px;
height: 8px;
background-repeat: no-repeat;
background-size: 10px 8px;
}
/* Increment scroll left button. */
.nativeHorizontalScrollbar::-webkit-scrollbar-button:start:decrement
{
background-image: url('images/scroll-left.png');
}
/* Increment scroll right button. */
.nativeHorizontalScrollbar::-webkit-scrollbar-button:end:increment
{
background-image: url('images/scroll-right.png');
}
/* Jump left/right buttons. */
.nativeHorizontalScrollbar::-webkit-scrollbar-button:horizontal:start:increment,
.nativeHorizontalScrollbar::-webkit-scrollbar-button:horizontal:end:decrement
{
display: none;
}
/* ******************
* TRACKING SECTION *
* ******************/
.nativeHorizontalScrollbar::-webkit-scrollbar-track:horizontal
{
background-color: transparent;
}
/* Area between the thumb and the left button. */
.nativeHorizontalScrollbar::-webkit-scrollbar-track-piece:horizontal:start
{
}
/* Area between the thumb and and right button. */
.nativeHorizontalScrollbar::-webkit-scrollbar-track-piece:horizontal:end
{
}
/*
* The tracking area.
* This is the area that the thumb travels along.
*/
.nativeHorizontalScrollbar::-webkit-scrollbar-track-piece
{
background-color: rgba(255, 255, 255, 0.1);
}
/* The tracking piece. */
.nativeHorizontalScrollbar::-webkit-scrollbar-thumb:horizontal
{
height: 15px;
background-color: rgba(255, 255, 255, 0.75);
border: none;
-webkit-border-top-left-radius: 6px;
-webkit-border-top-right-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-topright: 6px;
-moz-border-radius-bottomleft: 6px;
-moz-border-radius-bottomright: 6px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
/* ********
* CORNER *
* ********/
.nativeHorizontalScrollbar::-webkit-scrollbar-corner:horizontal
{
background-color: transparent;
}
/* *********
* RESIZER *
* *********/
.nativeHorizontalScrollbar::-webkit-scrollbar-resizer:horizontal
{
background-color: transparent;
}
VerticalScrollbar.css /* *********** * SCROLLBAR * * ********* **/
.nativeVerticalScrollbar::-webkit-scrollbar
{
width: 10px;
height: 10px;
}
/* *************
* BUTTON AREA *
* *************/
.nativeVerticalScrollbar::-webkit-scrollbar-button:vertical
{
background-color: transparent;
}
/* Increment scroll up/down buttons. */
.nativeVerticalScrollbar::-webkit-scrollbar-button:start:decrement,
.nativeVerticalScrollbar::-webkit-scrollbar-button:end:increment
{
display: block;
width: 10px;
height: 8px;
background-repeat: no-repeat;
background-size: 10px 8px;
}
/* Increment scroll up button. */
.nativeVerticalScrollbar::-webkit-scrollbar-button:start:decrement
{
background-image: url('images/scroll-up.png');
}
/* Increment scroll down button. */
.nativeVerticalScrollbar::-webkit-scrollbar-button:end:increment
{
background-image: url('images/scroll-down.png');
}
/* Jump up/down buttons. */
.nativeVerticalScrollbar::-webkit-scrollbar-button:vertical:start:increment,
.nativeVerticalScrollbar::-webkit-scrollbar-button:vertical:end:decrement
{
display: none;
}
/* ******************
* TRACKING SECTION *
* ******************/
.nativeVerticalScrollbar::-webkit-scrollbar-track:vertical
{
background-color: transparent;
}
/* Area between the thumb and the up button. */
.nativeVerticalScrollbar::-webkit-scrollbar-track-piece:vertical:start
{
}
/* Area between the thumb and and down button. */
.nativeVerticalScrollbar::-webkit-scrollbar-track-piece:vertical:end
{
}
/*
* The tracking area.
* This is the area that the thumb travels along.
*/
.nativeVerticalScrollbar::-webkit-scrollbar-track-piece
{
background-color: rgba(255, 255, 255, 0.1);
}
/* The tracking piece. */
.nativeVerticalScrollbar::-webkit-scrollbar-thumb:vertical
{
height: 15px;
background-color: rgba(255, 255, 255, 0.75);
border: none;
-webkit-border-top-left-radius: 6px;
-webkit-border-top-right-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-topright: 6px;
-moz-border-radius-bottomleft: 6px;
-moz-border-radius-bottomright: 6px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
/* ********
* CORNER *
* ********/
.nativeVerticalScrollbar::-webkit-scrollbar-corner:vertical
{
background-color: transparent;
}
/* *********
* RESIZER *
* *********/
.nativeVerticalScrollbar::-webkit-scrollbar-resizer:vertical
{
background-color: transparent;
}
- 1. Einfache GWT OpenID Beispiel
- 2. GWT MVP Beispiel
- 3. gwt-openlayers mit openstreetmap Beispiel
- 4. GWT + UiBinder + Gin + Guice + JDO + GAE Beispiel
- 5. GWT Kann Eigenschaft 'Beispiel' von undefined nicht lesen
- 6. Unterschied zwischen gwt, gwt-rpc, ext-gwt, smart gwt
- 7. GWT Buchmarkt oder GWT als externe Bibliothek
- 8. Gwt-Ext grid innen Gwt-Ext ColumnTree
- 9. Migrate GWT 2.0.4 Projekt GWT 2.1.0
- 10. Unterschied zwischen gwt-ext und ext-gwt
- 11. Google AppEngine Session Beispiel
- 12. Bild in GWT Button
- 13. Erweitertes GWT-Formular
- 14. GWT: Abrufen von Daten aus Postgres in GWT CellTable
- 15. GWT widerspiegeln dynamischen Ereignishandler
- 16. GWT DateBox Validierung
- 17. GWT Framework
- 18. GWT removeClickHandler
- 19. GWT-Codeaufteilung?
- 20. GWT Scaffolding
- 21. GWT Abfragedienst
- 22. GWT: Benutzerstandort
- 23. GWT Compilation
- 24. GWT Internationalisierungstool
- 25. GWT-Bestätigungsdialogfeld
- 26. GWT Image Cropping
- 27. Umschalttaste in GWT?
- 28. UML für GWT RPC
- 29. GWT Entwicklungs- und Entwurfsmuster
- 30. HTMLPanel In GWT
Sind die CSS-Dateien diejenigen, die Anpassung ermöglichen? könnten Sie ein Beispiel für VerticalScrollbar.css bereitstellen? – sworded
Ja, das ist es, aber es gibt nicht viele Möglichkeiten, die Sie verwenden können, da sie die nativen Bildlaufleisten verwenden. Wenn Sie viele Anpassungen vornehmen möchten, können Sie eine vollständig benutzerdefinierte DOM-Implementierung erstellen. Zum Beispiel sollten Sie die GWT-Quelle auschecken, indem Sie gwt-user.jar entpacken und in com \ google \ gwt \ user \ client \ ui unter AbstractNativeScrollbar.java und NativeVerticalScrollbar.java NativeVerticalScrollbar.ui.xml und NativeVerticalScrollbarTransparent.css suchen. – LINEMAN78