Safari’de jquery attr() metodunun çalışmama sorunu

iPhone’da yazdığım bir kodun çalışmadığını gördüm. Aşağıdakine benzer bir selectbox‘ın ilgili option‘ununu seçmek için kullandığım bir kod parçası.

$('#mySelect')
    .find('option')
        .filter(function() {
            return this.text == $('#selectedRejectReason').val(); 
        }).attr('selected', true)

Sorunun çözümü her zaman ki gibi stackoverflow‘da

attr özelliği Safari’de çalışmıyor. Onun yerine jquery 1.6’dan sonra gelen prop özelliğini kullanmak gerekiyor.

$('#mySelect')
    .find('option')
        .filter(function() {
            return this.text == $('#selectedRejectReason').val(); 
        }).prop('selected', true)

Aklınızın bir köşesinde kalsın.

Kaynak

Jquery-ui’ın bower ile yüklenmesi

enter image description here

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.

Kaynak

Arayüz Geliştiriciler İçin Paket Yönetimi – Bower

Nodejs ve npm’i anlattıktan sonra Bower’ı anlatmamak olmaz. Bower için npm’in arayüz geliştiriciler için olanı demek yanlış olmaz herhalde. Javascript’in sunucu tarafına geçmesi ile arayüz geliştiriciler daha çok otomatize olmaya başladı.

Birçok projemizde javascript ve css kütüphaneleri ve eklentileri kullanıyoruz. Kullandığımız bu kütüphane ve eklentileri sitemize eklemek ve güncellemek bizim için yük olmaya başladı. Burada size bir anımı anlatayım. sahibinden.com’da çalışırken jquery sürümünü yükseltmek bir dert olmaya başlamıştı. Güncellemeyi kimse göze alamıyordu. Çünkü her güncellemede bazı sorunlar çıkıyordu. En son bir iş olarak açıldı ve Sercan yaptı. Uzun ve dertli bir süreçti. Bu tip sorunlarla karşılaşmış bizim gibi arayüz geliştiriciler için bower velinimettir.

Gelelim bower’ı kullanmaya. Çeşitli editörlerden de bu işi yapabiliyoruz ama ben burada komut satırından çalıştırmayı göstereceğim.

Bower’ı yüklemek

Bower’ı yüklemek için npm’in bilgisayarınızda yüklü olması gerekmektedir. Eğer bilgisayarınızda npm yüklü değilse. Bilgi almak için Nodejs ve npm yazımızı okumanızı tavsiye ederim.

Sistemde npm yüklü ise komut satırına aşağıdaki kodu yazalım.

npm install -g bower

npm yazısından bildiğimiz gibi -g parametresi kurulacak kod blokunun genele kurulmasını sağlıyor. Kurduktan sonra bir sonraki adıma geçelim.

Paket bulmak

Npm’den bildiğimiz gibi kütüphane ve eklentiler paket olarak adlandırılıyor. Eklemek istediğimiz paketleri aramanın iki yolu var. Bower’ın arama sayfasını kullanmak ya da komut satırından aşağıdaki kodu yazarak aramak.

bower search <sorgu>

Bir örnek yapalım.

bower search bootstrap

Araması sonucundan bootstrap ile ilgili kütüphaneler listelenir.

enter image description here

Her bir satır bir paketi tanımlar. İlk mor renkli kısım ismi, ikinci beyaz kısımda paketin indireceği git adresini gösterir.

Paket yüklemek

Projemize eklemek istediğimiz paketi yüklemek için komut satırına aşağıdaki kodu yazarız.

bower install <paket_adi>

install komutundan sonra paket_adi ile yüklenebildiği gibi, github kısayolu, Git enpoint ve bir url’den de yüklenebilmektedir.

# kayıtlı paket adı
$ bower install jquery
# GitHub kısayolu
$ bower install desandro/masonry
# Git endpoint
$ bower install git://github.com/user/package.git
# Herhangi bir URL
$ bower install http://example.com/script.js

Normalde yüklemek istediğimiz paketi yazdığımızda paketin son sürümü yüklenir. Ayrıca istediğimiz sürümü indirmek için araya diyez işareti (#) koymamız yeterli.

bower install bootstrap#3.2.0

enter image description here

Paket yüklendiğinde proje klasöründe bower_components klasörü oluşturur ve içine dosyaları indirir. Bower bu klasörü otomatik olarak seçer ve adlandırır, ancak konfigürasyon (.bowerrc) dosyası yolu ile bize yolu ve ismini değiştirme imkanı verir.

bower_components klasörünü incelediğimizde yüklediğimiz paket ve bağımlılıkları otomatik yüklendiğini görürüz.

enter image description here

İlk yüklemeden sonra yüklediğiniz dosyayı html dokümanınıza eklemeniz gerekir. Bower paketleri genelde javascript dosyaları içerir, bazen css ve resim dosyası içerir.

<script src="bower_components/jquery/jquery.min.js"></script>

Paket kaldırmak

Yüklediğimiz bazı paketleri kaldırmak isteyebiliriz. Bunun için yazmamız gerke komut:

bower uninstall bootstrap

Birden fazla paketi kaldırmak için araya boşluk vererek isimlerini yazmamız yeterlidir.

bower uninstall jquery modernizr sass-bootstrap

bower.json dosyası

Eğer birden fazla paket kullanacaksanız bir bower.json dosyası ile bu paketleri yönetmek daha mantıklıdır. Zaten tek kütüphane için bower kullanmakta çok mantıklı gelmiyor bana. bower.json dosyasını kendimiz elle oluşturabildiğimiz gibi

bower init

komutunu yazıp, sorulan soralara cevap verip bir bower.json dosyası elde edebiliriz.

Örnek bir bower.json dosyası

{
  "name": "yeni-proje",
  "private": true,
  "dependencies": {
    "jquery": "~2.1.1"
    "swiper": "~3.0.8",
    "waypoints": "~3.1.1",
    "jcarousellite": "~1.9.3",
    "jquery.countdown": "~2.0.5"
  }
}

Yeni bir paket ekledeğimizde bower.json dosyasını güncellemek için –save parametresini eklememiz gerekir.

bower install jquery --save

Bu kullanımı alışkanlık haline getirmekte fayda var. Her paket indirdiğimizde bower-json dosyasını ayrıca açıp güncellemek çok mantıklı değil.

Paketi güncellemek

Paketlerimizi güncellemek için aşağıdaki komutu yazmamız yeterlidir.

bower update

Tüm paketler güncellenebildiği gibi

bower update <paket_adi>

Komutu ile sadece belirli bir paket de güncellenebilir.

Yüklü paketleri listelemek

Mevcut paketleri ve güncelleme olup olmadığını görmek için

bower list

komutunu kullanırız.

➜  yeni-proje  bower list
bower check-new     Checking for new versions of the project dependencies..
yeni-proje#0.0.1 /Users/fatih/yeni-proje
├─┬ bootstrap#3.2.0 (latest is 3.3.5)
│ └── jquery#2.1.4 (3.0.0-alpha1+compat available)
└─┬ jcarousellite#1.9.3
  └── jquery#2.1.4 (3.0.0-alpha1+compat available)

Sonuç

Bu makalede twitter’ın geliştridiği bower paket yöneticisini tanıtmaya çalıştım. Bower’ın arama, yükleme, kaldırma, listeleme komutlarını anlatmaya çalıştım. Bunlar genel itibari ile yeterlidir bence.

Sunucu taraflı kod yazarlarının alışık olduğu paket yönetim araçlarına biz arayüz geliştiricilerde böylelikle kavuşmuş oluyoruz.

Kalın sağlıcakla.

Kaynaklar