Csúszka (slider)
Abban az esetben célszerű használni, ha valamilyen értéket egyszerűbb beállítani csúszka segítségével, mint begépelni. Lehetséges két oldalú csúszka ahol kettő értéket állíthatunk be. Ez hasznos lehet például egy autóra való keresésnél úgy, hogy csúszkán adjuk meg a mettől meddig árértéket.
A szükséges állományok: slider.css, ui.slider.js állomány.
Használata
Készítsünk egy div-et, melynek az id-ja legyen example, osztálya legyen ui-slider-1. Készítsünk egy másik div-et az előzőbe. Ennek az osztálya legyen ui-slider-handle.
A css módosításával változtathatjuk a csúszka hátterének külsejét.
Forráskód
HTML
A head-ben hívjuk meg a szükséges fájlokat!
<script type="text/javascript" src="js/ui.slider.js"></script>
<link rel="stylesheet" href="css/slider.css" type="text/css" media="screen" />A body-ban a következő kódrész szükséges.
<div id="example" class="ui-slider-1" style="margin:10px;">
<div class="ui-slider-handle"></div>
</div>CSS
.ui-slider, .ui-slider-1 {
background-image: url('../img/slider-bg-2.png');
margin: 10px;
}