Jquery UI Nedir ? Nasıl Kullanılır

Jquery ui


JQUERY UI KULLANIMI

Jquery UI bazı Javascript özelliklerinin basitleştirilmiş halidir. yani içindeki hazır fonksiyonlar sayesinde basit bir şekilde işlemler yapabiliyoruz. örneğin bir Accordion menu yapmak için uzun kodlar yazmak yerine sadece accordion() fonksiyonunu kullanmamız yeterli ,bukadar basit.
aynı zamanda jquery nin bir plugin eklentisi'de diyebiliriz. çünkü Jquery UI, Jquery kütüphanesini çağırmadan çalışmaz.

JQUERY UI NASIL ÇALIŞIR ?

Öncelikle Jquery Kütüphanesini sayfamıza dahil etmemiz gerekir. Bu adresten Jquery kutuphanesini çekebilirsiniz. yada kısıca aşağıda paylaştığım kodu sayfanıza dahil edin.

  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>


Daha sonra Jquery UI kütüphanesinide sayfanıza dahil etmeniz gerekir. Jquery UI için 2 tane script dosyası cağırmanız lazım birincisi jquery UI kutuphanesi diğeri Jquery UI tema dosyalarıdır kendi içinde bir çok tema görünümüde mevcuttur. aşağıda jquery UI için kodları paylaştım bunlarıda sayfanıza dahil edin nereye ekleyeceğinizi bilmiyorsanız </head> <head> kodları arasına eklenir zaten bunu bilmiyorsanız önce jquery öğrenmenizi tavsiye ederim


<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
 <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

Bu koduda sayfanıza dahil ettikten sonra artık Jquery UI'ı kullanabilirsiniz isterseniz hemen bir örnek yapalım öncelikle bir html kodu oluşturalım.

 id'si akordion adında bir div oluşturuyoruz bunun içine h3 ile bi başlık ekliyoruz. h3 altına bitane daha div ekliyoruz ve düzgün gözükmesi içinde divin içine biraz yazı koyuyoruz. aşağıdaki örneğini verdim..



<div id="akordion">
  <h3>Section 1</h3>
  <div>
    <p>
    Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden
    </p>
  </div>
  <h3>Section 2</h3>
  <div>
    <p>
   Yaygın inancın tersine, Lorem Ipsum rastgele sözcüklerden oluşmaz. Kökleri M.Ö. 45 tarihinden bu yana klasik Latin edebiyatına kadar uzanan 2000 yıllık bir geçmişi vardır. Virginia'daki Hampden-Sydney College'dan Latince profesörü Richard McClintock, bir Lorem Ipsum pasajında geçen ve anlaşılması en güç sözcüklerden biri olan 'consectetur' sözcüğünün klasik edebiyattaki örneklerini.
    </p>
  </div>
  <h3>Section 3</h3>
  <div>
    <p>
   1500'lerden beri kullanılmakta olan standard Lorem Ipsum metinleri ilgilenenler için yeniden üretilmiştir. Çiçero tarafından yazılan 1.10.32 ve 1.10.33 bölümleri de 1914 H. Rackham çevirisinden alınan İngilizce sürümleri eşliğinde özgün biçiminden yeniden üretilmiştir.
    </p>
    <ul>
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>
    </ul>
  </div>
</div>

Şimdide bu html yapısını Jquery UI kullanarak akordion menuye çevirelim. bunun için öncelikle id si akordion olan divimizi seçiyoruz ve accordion() fonksiyonumuzu ekliyoruz aşağıdaki örnekte olduğu gibi..



<script>
  $( function() {
    $( "#akordion" ).accordion();
  } );
  </script>

Gördüğünüz gibi bukadar basit işlem tamamdır. artık bir accordion menü yapmış olduk Jquery UI'ın kendi sitesinde bunla ilgili bir çok özellik vardır. sitesinden canlı olarak diğer örneklerinede bakabilirsiniz kodlarıda size veriyor direk sitenize ekleyip kullanabiliyorsunuz. bir çok fonksiyonu var mesela sürükle bırak,özel effectler,toggle,progressbar gibi bir çok özelliği mevcut.  aşağıdaki resimden örneklerin kodlarını nasıl alacağınızı görebilirsiniz..


Jquery Uı kullanımı


Yukardaki örnekte Jquery UI kütüphanesi'ni internet üzerinden çekmeyi gösterdim isterseniz bilgisayarınıza indirerekte kullanabilirsiniz. indirerek yaparsanız istediğiniz temayıda seçebilirsiniz. nerden indireceğinizi aşağıdaki resimde belirttim..


jquery UI download
Jquery ui indirme

Download linkine tıkladığınızda karşınıza gelen paneli aşağı kaydırın. download linkini görüceksiniz aşağıda olduğu gibi..


Jquery UI Temanızı seçin

boş olan yeri doldurmanız gerek yoktur direk indirebilirsiniz. benim bu yazıda anlatıcaklarım bukadardı sormak istediğiniz sorular varsa bu makalenin altında yorum olarak yazabilirsiniz herkese kolay gelsin..

Jquery Derslerimize Bu linkten Ulaşabilirsiniz : http://bit.ly/2Rief5o

Yorumlar

Bu blogdaki popüler yayınlar

Youtube İçin Abone Ol Animasyonu yapmak