jQuery UI (user interface) açık kaynak bir JavaScript kütüphanesi olan jQuery’yi özellikle görsel tasarımlar, animasyonlar, efektler vb uygulamalarda daha kolay ve işlevsel kullanabilmek için geliştirilmiş bir Javascript kütüphanesidir. En çok kullanılan fonksiyonları, sürükle-bırak, yeniden ölçülendirme, takvim, progressbar, slider, menü, açılan pencereler… jQuery de olduğu gibi jquery-ui de de az kod – çok iş mantığı vardır.
Gerekli dosyaları indirmek için https://jqueryui.com/ adresinden “custom download” butonuna tıklayın,
Zip formatında inen dosyayı açın, aşağıda seçili olan jquery-ui.js,jquery-ui.css ve external klasörü içindeki jquery.js dosyalarını projenize ekleyin.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery-ui.css">
<script src="jquery.js"></script>
<script src="jquery-ui.js"></script>
<style>
#draggable {width: 150px;height: 150px;padding: 0.5em;
}
</style>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>
</body>
<script>
$(function () {
$("#draggable").draggable();
});
</script>
</html>
