Seperti halnya dengan widget-widget sebelumnya yang telah kita buat, kitapun dapat dengan mudah membuat slider di jQuery UI. Berikut akan dijelaskan langkah membuat slider ini.
Pertama-tama kita akan membuat div yang akan dijadikan slider seperti contoh berikut ini:
<div id=”sliderku”>
</div><!–end of sliderku–>
Langkah selanjutnya adalah melakukan include file-file yang diperlukan seperti di bawah ini:
<script src=”development-bundle/jquery-1.6.2.js”>
</script>
<script src=”development-bundle/ui/jquery.ui.core.js”>
</script>
<script src=”development-bundle/ui/jquery.ui.widget.js”>
</script>
<script src=”development-bundle/ui/jquery.ui.mouse.js”>
</script>
<script src=”development-bundle/ui/jquery.ui.slider.js”>
</script>
Langkah terakhir adalah membuat script untuk slider berikut setting yang diperlukan:
<script>
(function($){
$(“#sliderku”).slider();
})(jQuery);
</script>
Coding secara lengkap adalah seperti di bawah ini:
<!DOCTYPE html>
<html>
<head>
<title>Slider</title>
<link rel=”stylesheet” href=”css/smoothness/jquery-ui-1.8.16.custom.css”>
</head>
<body>
<div id=”sliderku”>
</div><!–end of sliderku–>
<script src=”development-bundle/jquery-1.6.2.js”>
</script>
<script src=”development-bundle/ui/jquery.ui.core.js”>
</script>
<script src=”development-bundle/ui/jquery.ui.widget.js”>
</script>
<script src=”development-bundle/ui/jquery.ui.mouse.js”>
</script>
<script src=”development-bundle/ui/jquery.ui.slider.js”>
</script>
<script>
(function($){
$(“#sliderku”).slider();
})(jQuery);
</script>
</body>
</html>
Untuk demonya bisa dilihat di http://aris.proweb.asia/slider.html dengan tampilan seperti gambar berikut ini
Kunjungi www.proweb.co.id untuk menambah wawasan anda.