ho scoperto CustomScrollPanel di GWT e come è possibile personalizzare la barra di scorrimento, ma non riesco a trovare alcun esempio o come configurarlo. Ci sono degli esempi là fuori che mostrano barre di scorrimento personalizzate in uso?GWT CustomScrollPanel esempio
risposta
In questo modo si personalizzano le barre di scorrimento native, tuttavia è possibile anche sviluppare le proprie classi di barra di scorrimento che implementano VerticalScrollbar e HorizontalScrollbar che sono molto più personalizzabili.
risorse (stile) definizioni:
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();
}
}
Uso tramite 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());
Per ottenere le barre di scorrimento elegante per scorrimento verticale in GWT, è necessario aggiungere seguente codice nella verticalScrollBar. css. Che non funzionerà per IE proprio come Gmail.
/* 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;
}
allo stesso modo si può fare anche per barra di scorrimento orizzontale. Si prega di controllare il seguente link per maggiori dettagli. http://almaer.com/blog/creating-custom-scrollbars-with-css-how-css-isnt-great-for-every-task – Saritha
Grazie per la VerticalScrollbar.css, davvero aiutato molto. Hai un campione HorizontalScrollbar.css? – MattWeiler
Se qualcuno è interessato ad avere il CSS sia per verticale/orizzontale, questo è quello che sto usando.
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;
}
sono la css file quelli che permettono la personalizzazione? potresti fornire un esempio per VerticalScrollbar.css? – sworded
Sì, lo sono, ma non c'è molto che tu possa fare perché utilizzano le barre di scorrimento native, se vuoi un sacco di personalizzazioni potresti voler creare un'implementazione DOM completamente personalizzata. Ad esempio, dovresti controllare la sorgente GWT decomprimendo gwt-user.jar e cercando in com \ google \ gwt \ user \ client \ ui a AbstractNativeScrollbar.java e NativeVerticalScrollbar.java NativeVerticalScrollbar.ui.xml e NativeVerticalScrollbarTransparent.css. – LINEMAN78