jquery’nin gelişmiş arayüz elemanları kütüphanesi jquery-ui yüksek boyutuna rağmen tercih edilen bir kütüphanedir. Ben yüksek boyutundan dolayı kullanmasam da bazen ihtiyacımı en iyi gören kütüphane olduğunda tercih ederim.
Kullanacağımız arayüz elemanına özel Jquery-ui’ı indirebiliyoruz. jQuery-ui indirme sayfasında gerekli elemanları seçip indir dediğimizde jquery-ui çekirdek kodu ve kullanılan elmanların javascriptlerini bize sunuyor. Buraya kadar her şey güzel.
Bu makaleyi yazmama sebep olan durum ise yeni arayüz geliştirme ortamlarında yoğun olarak kullanılan bower ile jquery-ui’ın kullanım kısmı. Tüm kütüphaneyi ekleyeceksek kolay.
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/jquery-ui/jquery-ui.min.js"></script>
<script>
$( "#projects" ).accordion();
</script>adresini kodunuzun ilgili kısmına eklemeniz yeterli.
jquery-ui’ın tüm elemanlarını değilde sadece bir veya iki tanesini kullanmak istediğimizde ne yapmalıyız? Klasik yöntemde indirme sayfasında ilgili elemanları seçip indir dememiz yeterli.
Peki bower ile eklerken nasıl oluyor?
Mesela sadece sıralama işi için kullanacağımız dosyaları yüklemek istediğimizde ne yapmalıyız.
Aşağıdaki gibi bir yol izlemek gerekiyor çözüm için.
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/jquery-ui/ui/core.js"></script>
<script src="bower_components/jquery-ui/ui/mouse.js"></script>
<script src="bower_components/jquery-ui/ui/widget.js"></script>
<script src="bower_components/jquery-ui/ui/sortable.js"></script>
<script>
$( "#projects" ).accordion();
</script>İstediğiniz elemanı eklerken hangi çekirdek koda ihtiyacımız olduğunu nasıl anlayacağız.
bower_components/jquery-ui/ui/ klasörü içindeki eklemek istediğiniz elemanın ilgili dosyasını açın. Örneğin sıralama ( sorting ) için sortable.js
(function( factory ) {
if ( typeof define === "function" && define.amd ) {
// AMD. Register as an anonymous module.
define([
"jquery",
"./core",
"./mouse",
"./widget"
], factory );
....Yukarıdaki kod kısmında ihtiyacı olan çekirdek eleman listesi var. Bunu kullanacağız.
Aynı şekilde tüm elemanlara uygulanabilir.