Jquery UI nedir? Jquery UI projeye nasıl eklenir, örnek uygulama

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 aşağıdaki resimdeki gibi ekleyin.

 

html oluşturup aşağıdaki gibi düzenleyin, 

Bu kod bloğunda ID’si ‘draggable’ olan bir div oluşturduk,  jquery-ui draggable eklentisini kullanarak sürüklenebilir bir nesne oluşturmuş olduk. Projeyi çalıştırınca aşağıdaki gibi gözükecek,

Jquery ui ‘dan bağımsız bir şekilde kendi pluginlerimizi oluşturabiliriz, bunu da diğer makalemde anlatacağım. Teşekkürler..

Html kodları;

 

  1. <!DOCTYPE html>
  2. <head>
  3. <meta charset="utf-8">
  4. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  5. <title></title>
  6. <meta name="description" content="">
  7. <meta name="viewport" content="width=device-width, initial-scale=1">
  8. <link rel="stylesheet" href="jquery-ui.css">
  9. <script src="jquery.js"></script>
  10. <script src="jquery-ui.js"></script>
  11. <style>
  12. #draggable {width: 150px;height: 150px;padding: 0.5em;
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <div id="draggable" class="ui-widget-content">
  18. <p>Drag me around</p>
  19. </div>
  20. </body>
  21. <script>
  22. $(function () {
  23. $("#draggable").draggable();
  24. });
  25. </script>
  26. </html>

 

Yorum Yap

Ara
Kategoriler
ASP.NET  (4 )
MSSQL  (5 )
JAVASCRIPT  (8 )
FİNANS  (8 )
C#  (5 )
GEZİ-KÜLTÜR  (3 )
SEO  (2 )
Diğer  (3 )
CSS  (2 )
ANDROID  (2 )