Volevo personalizzare il cursore di JQueryUI, ma non sono in grado di trovare alcun modo per modificare le immagini della maniglia del cursore. Anche JQuery Themeroller non sembra consentire il cambio delle immagini di handle. Qualcuno sa come farlo?Cambiare il cursore per gestire l'immagine
Dal jQuery UI docs:
Il plugin jQuery UI Slider utilizza jQuery Framework UI CSS per lo stile la sua aspetto grafico, inclusi i colori e le texture di sfondo . Si consiglia di utilizzando lo strumento ThemeRoller per creare e scaricare temi personalizzati che sono facili da costruire e mantenere.
Se un livello più profondo di personalizzazione è necessario, ci sono widget di specifiche classi riferimento all'interno del foglio di stile ui.slider.css che può essere modificato. Queste classi sono evidenziate in in grassetto sotto.
In questo caso particolare, volete dare un'occhiata al l'elemento con nomeclasse ui-slider-handle.
L'elemento a maniglia cursore predefinito ha i seguenti classnames ad esso applicata:
Dai uno sguardo al CSS corrispondente a questi nomi di classi e molto probabilmente sarai in grado di modificare tutto ciò di cui hai bisogno.
Inoltre, suggerisco di installare Firebug. Questo plugin per Firefox renderà le attività come queste molto più semplici per te.
#demo-frame > div.demo {
padding: 10px !important;
float: left;
}
.contentContainer {
float: left;
width: 400px;
height: 500px;
overflow: hidden;
}
.ui-slider-vertical .ui-state-default {
border: none;
width: 28px;
height: 82px;
background: transparent url(volume_bar/shattle.png) no-repeat 0 0;
}
.ui-slider-vertical .ui-slider-handle {
left: 0;
margin-bottom: -41px;
margin-left: 0;
}
.ui-slider-range, .ui-widget-header, .ui-slider-range-min {
background: none;
}
#slider-vertical, .ui-slider {
border: none;
width: 50px;
height: 50px;
background: transparent url(volume_bar/track-bg.png) repeat-y 0 0;
}
qualcuno ha chiesto nella sezione di commento per esempio di codice css quindi ecco quello che ho usato per cambiare l'immagine di sfondo della barra di scorrimento e maniglia per i file di immagine la mia personalizzati png. Assicurati di inserire il css DOPO il jquery ui css nella sezione intestazione.
Non riesco a trovare un riferimento a un'immagine per l'handle del dispositivo di scorrimento. Ancora peggio, non riesco nemmeno a trovare l'immagine della maniglia nella cartella/immagine! - Al momento non ho assolutamente nessun indizio da cui provengano le maniglie! –
ok, finalmente trovato le proprietà larghezza/lunghezza/angolo che costituiscono le maniglie attuali. Sono anche in grado di cambiare l'immagine di sfondo. Penso che dovrebbe funzionare ora. –
@Crimson - Se hai tempo, sarebbe bello se potessi inserire il CSS che hai usato per modificare l'immagine del manico in una risposta a questa domanda. Sto avendo lo stesso problema ma non riesco a far funzionare alcun CSS. – Tom