jQuery ve Seçiciler

15/12/2007 · Kategori: Yazilim - Donanim

Daha önce jQuery dünyasına adım atmıştık biliyorsunuz. Şimdi de bu dünyayı yakından tanımaya başlayalım. Öncelikle seçiciler konusuyla başlamak istiyorum. Bence jQuery için en önemli konu budur. Neden mi önemli? Çünkü web sayfalamızdaki elemanlara seçiciler sayesinde erişebiliyoruz. Örneğin bir yazının rengini değiştireceksiniz. Peki ama bu yazı web sayfanızın neresinde? Bu yazıyı jQuery’ye nasıl göstereceksiniz ve işleme almasını sağlayacaksınız? İşte seçiciler konusu bu yüzden önemli ;)

Seçiciler

jQuery, web sayfamızdaki elemanlara erişmek için birkaç değişik yöntem kullanmakta. Ben bu yöntemleri 5 başlık altında grupladım.

  1. Etiket seçicileri
  2. Öznitelik seçicileri
  3. Css seçicileri
  4. Form seçicileri
  5. Özel seçiciler

Bu seçicilerinin hepsini $('seçici') ifadesinde olduğu gibi kullanmamız gerekiyor. Şimdi bu seçicileri ayrı ayrı başlıklar altında inceleyelim.

1. Etiket seçicileri

Web sayfamızda yer alan elemanları HTML etiketlerini kullanarak oluştururuz. Parağraf elemanları oluşturmak için P etiketini, resim elemanları oluşturmak içinse IMG etiketini kullanırız. İşte bu elemanlara jQuery ile erişmek için, oluştururken kullandığımız etiket isimlerini aynen kullanıyoruz.

Örneğin web sayfamızdaki bütün parağraf elemanlarını seçmek isteyelim.

$('p')

Yukarıda yalnızca bir tek etiket seçimi yaptık o da P etiketi idi. Ama biz aynı anda hem P etiketlerini hem de IMG etiketlerini seçmek isteyebiliriz. Birden fazla etiket seçimi yapacaksak etiketler arasına virgül (,) koymamız gerekiyor. Aynen alttaki gibi:

$('p,img')

Tekli ve Çoklu etiketlerin nasıl seçildiklerini öğrendikten sonra sıra geldi içiçe olan etiketleri seçmeye. Örneğin web sayfamızdaki bütün P etiketlerinin içerisinde ne kadar IMG etiketi varsa seçelim.

$('p img')

Bu son kodda dikkat edeceğimiz şey, etiketler arasında boşluk kullandığımızdır.

2. Öznitelik seçicileri

Her HTML etiketi attribute adı verilen özniteliğe sahiptir. Örneğin bir link oluşturmak için A etiketinin href özniteliğini kullanırız. Hatırlamak için hemen bir örnek görelim:

link

Bu örnekte “href” ifadesi bir özniteliktir. İşte jQuery ile web sayfamızdaki elemanlara özniteliklerini kullanarak da erişebiliyoruz. Bize en çok gerekli olabilecek öznitelik seçicilerine kısaca gözatalım.

  • a[href] ile href özniteliği olan a etiketlerini seçiyoruz.
  • a[href=www.eburhan.com] ile href özniteği "www.eburhan.com" ile tam olarak eşleşen a etiketlerini seçiyoruz.
  • a[href^=www] ile href özniteliği "www" ile başlayan a etiketlerini seçiyoruz.
  • a[href$=com] ile href özniteliği "com" ile biten a etiketlerini seçiyoruz.
  • a[href*=eburhan] ile href özniteliği içerisinde "eburhan" geçen a etiketlerini seçiyoruz.

Öznitelik seçicilerini tek başına kullanabildiğimiz gibi birleştirerek de kullanabiliyoruz. Alttaki örnekte href özniteliği “www” ile başlayan VE yine href özniteliği “com” ile biten a etiketlerini seçmiş oluyoruz:

$('a[href^=www][href$=com]')

3. Css seçicileri

Css kodlarken kullandığımız yöntemleri, jQuery ile birlikte kullanabiliyoruz. Örneğin bir elemanın id özniteliği metin olsun. Bu elemanı seçmek için şöyle bir kod kullanıyoruz:

$('#metin')

Şimdi de class özniteliği maviMetin olan elemanları seçelim.

$('.maviMetin')

Bir de etiket seçicileri ile css seçicilerini birarada kullanalım. Örneğin web sayfamızdaki bütün DIV etiketlerini seçelim fakat bu DIV etiketlerinin class özniteliği maviMetin olmak zorunda olsun. İşte bu işi yapan kod:

$('div.maviMetin')

Elemanların class özniteliğine geri dönelim. Biliyorsunuz ki bir elemana birden fazla class değeri atanabiliyor. Örneğin

gibi… Böyle bir durumda class değerlerini biteşik yazarak seçim yapıyoruz.

$('div.siyah.koyu.buyuk')

Class özniteliğinde belli bir değeri içermeyen elemanları nasıl seçebiliriz ona bakalım. Örneğin class özniteliğinde koyu değeri bulunmayan elemanları seçmek istersek not ifadesini kullanmalıyız.

$('div:not(.koyu)')

Benim anlatacağım css seçileri şimdilik bu kadar (:

4. Form seçicileri

jQuery, form elemanları için birkaç özel seçici tanımlamıştır. Form seçicileri ile form elemanlarına çok kolay bir şekilde erişebiliyoruz.

  • :input
    bütün form elemanları seçer
  • :text
    sadece metin alanlarını seçer (type="text")
  • :file
    sadece dosya alanlarını seçer (type="file")
  • :password
    sadece parola alanlarını seçer (type="password")
  • :radio
    sadece radyo düğmelerini seçer (type="radio")
  • :checkbox
    sadece onay kutularını seçer (type="checkbox")
  • :submit
    sadece gönder düğmelerini seçer (type="submit")
  • :image
    sadece form resimlerini seçer (type="image")
  • :reset
    sadece sıfırlama düğmelerini seçer (type="reset")
  • :button
    sadece normal düğmeleri seçer (type="button")
  • :hidden
    sadece gizlenmiş alanları seçer (type="hidden")

Form seçicilerinin nasıl kullanıldığına bakalım. Örneğin web sayfamızdaki id özniteliği iletisim olan bir formun bütün metin alanlarını seçelim. İşte kodumuz:

$("#iletisim :input")

Peki hem metin alanlarını hem de onay kutularını seçmek isteseydik?

$("#iletisim :input :checkbox")

Bunlara ek olarak jQuery’de 4 tane daha form seçicisi bulunuyor. Bu ek seçiciler özel durumlar için hazırlanmışlar. Nedir bu özel durumlar? Örneğin formunuzda 10 tane onay kutusu olsun. Ziyaretçinin bunlardan kaç tanesini fare ile işaretlediğini öğrenmek için alttaki :checked seçicisini kullanabiliriz.

  • :enabled
    etkin olan form elemanlarını seçer
  • :disabled
    devre dışı bırakılmış form elemanlarını seçer
  • :checked
    işaretlenmiş olan onay kutularını seçer
  • :selected
    bir açılır menünün (dropdown) seçilmiş değerini alır

5. Özel seçiciler

jQuery bazı elemanlara daha kolay erişebilmemiz için özel seçiciler sunmuştur. Nasıl ki form elemanlarına erişmek için özel form seçicileri kullanıyorsak, diğer elemanlar için de bazı özel seçiciler mevcut.

:even
seçilen elemanları 0′dan başlayarak numaralandırır, daha sonra bu numaralardan çift olanları seçer. Örneğin 5 tane TR etiketi olsun. Bu özel seçici sayesinde 0, 2 ve 4 nolu TR etiketlerini seçebiliriz.

:odd
seçilen elemanları 0′dan başlayarak numaralandırır, daha sonra bu numaralardan tek olanları seçer. Örneğin 5 tane TR etiketi olsun. Bu özel seçici sayesinde 1 ve 3 nolu TR etiketlerini seçebiliriz.

$('tr:even') // çift olanlar gelir
$(’tr:odd’) // tek olanlar gelir

:eq(2)
Kaçıncı sıradaki elemanı seçeceğimizi belirtir. Örneğin 5 tane DIV etiketi var ama biz 3. sıradakini seçmek istiyoruz. Öyleyse :eq(2) ifadesini kullanmalıyız.

:gt(3)
Greater Than demektir yani birşeyden daha büyük. 5 tane DIV etiketi var ama biz sırası 3′ten büyük olanları seçmek istiyoruz.

:lt(3)
Less Than demektir yani birşeyden daha küçük. 5 tane DIV etiketi var ama biz sırası 3′ten daha küçük olanları seçmek istiyoruz.

$('div:eq(2)') // 3′üncüsünü seç
$(’div:gt(3)’) // 3′den büyük olanları seç (4,5)
$(’div:lt(3)’) // 3′den küçük olanları seç (1,2)

:first
Seçmek istediğimiz eleman birden fazla ise "baştakini" seçmiş oluyoruz. Yani :eq(0) seçicisi gibi.

:last
Seçmek istediğimiz eleman birden fazla ise "sondakini" seçmiş oluyoruz.

:contains(’X')
İçerisinde "X" ifadesi geçen elemanları seçer. Büyük-küçük harfe duyarlıdır. Örneğin içerisinde "erhan burhan" ifadesi geçen tüm paragrafları alttaki gibi seçebiliyoruz.

$(" p:contains('erhan burhan') ")

:visible
Görülebilir olan yani gizlenmemiş olan elemanları seçebilmemizi sağlar. Örneğin css’in bir özelliği olan display:none ile gizlenmiş elemanlara bu seçici ile ulaşamazsınız.

:hidden
Gizlenmiş olan elemanları seçer. Bir üstteki :visible seçicisi ile ters mantıktan çalışır.

$('div:hidden') // gizlenmiş div elemanlarını seç

Sonuç…

Burada anlattığım 5 seçiciden ziyade bir de XPath Seçicileri bulunuyor. Fakat XPath seçicileri, jQuery’nin 1.2 sürümüyle birlikte çekirdek kütüphaneden çıkarıldı ve ayrı bir eklenti olarak sunulmaya başlandı. XPath seçicilerini kullanmak isterseniz ilgili eklentiyi kurmanız gerekecektir.

Yazıyı bitirirken de şunu önemle vurgulamak istiyorum. Ben burada en çok kullanılan seçicilerden bahsettim. Oysa ki jQuery’nin daha fazla seçicisi var. O yüzden mutlaka bu sayfaya gözatmanızı öneririm. Bir sonraki yazımda buradaki seçicileri kullanarak nasıl işlemler yapılabileceğini anlatacağım

Kalıcı Bağlantı Yorum (yok) Yorum yaz!

DeskSave: masaüstünüzü kaydettiniz mi?

15/12/2007 · Kategori: Yazilim - Donanim

MasaüstüWindows masaüstüm oldukça kalabalıktır. 1280×800 ekran çözünürlüğü kullanıyorum ve masaüstümde 100′e yakın simge var :) Fakat bunların her bir tanesi belli bir düzen içerisindedir. Eğer ki ekran çözünürlüğünü değiştirip, tekrar aynı çözünürlüğe geri dönersem bu düzen bozuluyor. İşte bu gıcık sorunun çözümü DeskSave isimli yazılımda ;)

DeskSave hakkında

Videolu eğitseller hazırlamak için “video” isimli başka bir Windows oturumuna geçiş yapıyorum. Bu oturumun ekran çözünürlüğü 800×600 piksel. İşim bittikten sonra bu oturumdan çıkıp normalde kullandığım oturuma geri döndüğümde, sayısı 100′ü bulan simgelerin birbirine geçmiş olduğunu görüyorum. Şimdi işin yoksa kısayolları bir yana, dosyaları başka bir yana, klasörleri diğer bir yana topla :)

DeskSave isimli yazılım bizi bu sevimsiz durumdan kurtarabiliyor. Küçük, basit, etkili, ücretsiz ve kurulum gerektirmiyor. Bu yazılım ile masaüstünüzün bütün görünüşünü ilk önce kaydediyorsunuz. Bundan sonra masaüstündeki simgelerin yeri değiştirildiğinde, sadece tek tıklamayla geriye dönüş yapabiliyorsunuz.

Sonuç…

Eğer buraya kadar anlattıklarım zihninizde birşeyler canlandırmadıysa, alttaki resimler DeskSave yazılımının ne yaptığını size daha iyi anlatacaktır ;)

1. Çözünürlük değiştirilmeden önce:

Ekran 1

2. Çözünürlük değiştirildikten sonra:

Ekran 2

3. DeskSave ile masaüstü geri yüklendiğinde: (1. ekran ile aynı)

Ekran 3

Kalıcı Bağlantı Yorum (yok) Yorum yaz!

Google’un yeni oyuncağı: Google Talk Gadget

15/12/2007 · Kategori: Yazilim - Donanim

Google Talk GadgetGeçtiğimiz günlerde Google, sohbet etmeyi sevenler için özel bir Gadget (araç) çıkardı. Google Talk Gadget isimli bu gadget’i kullanıcılar, Kişiselleştirilebilir Google Anasayfası‘na kolayca ekleyebiliyorlar. Bu sayede web üzerinden, sanki Gtalk kullanıyormuş gibi sohbet edebiliyorsunuz.

Google Talk Gadget nedir?

Biliyorsunuz ki daha önceden Google, Gmail web arayüzüne bir Gtalk istemcisi yerleştirmişti. Web tabanlı bu istemci sayesinde bir yandan Gmail hesabınızdaki postaları kontrol ediyorken, diğer yandan Gtalk’taki arkadaşlarınızla sohbet edebiliyorsunuz. Fakat bu özellik sadece Gmail’in web arayüzünde çalışıyor ve onu başka bir yere taşıyamıyorsunuz. İşte Google Talk Gadget ile artık bu özelliği ister Kişiselleştirilebilir Google Anasayfanıza, ister blog/web sayfanıza ekleyebiliyorsunuz. Web tabanlı olduğu için herhangi bir kurulum da gerektirmiyor tabii …

Google Talk Gadget neler sunuyor?

Öncelikle tamamen web tabanlı. Bu yüzden bilgisayarınıza yüklemenize gerek kalmıyor. Dilediğiniz her ortama taşıyabilirsiniz.

Bir değer özelliği ise Gtalk’ta bile olmayan sekmeli arabirim. Her konuştuğunuz kişi için ayrı bir sekme açılıyor ve bu sekmelerde sohbetinize devam ediyorsunuz. Bence bu sekmeli arabirim çok güzel olmuş. İleride Gtalk masaüstü yazılımında da görebilecek miyiz acaba?
Google Talk Gadget aracının sekmeli arabirimi

Bir diğer farklı özelliği ise YouTube‘da bulunan bir videonun linkini arkadaşınıza gönderdiğinizda Google Talk Gadget içerisinden videoyu izleyebilmesi. Yani videonun linkini alıp web tarayıcısının başka bir sayfasına yapıştırması ve ayrı bir sekmeden/pencereden izlemesi gerekmiyor. Aynı şey Picasa Web Albümleri için de geçerli.
Google Talk Gadget içerisinden video izleme

Kişiselleştirilebilir google anasayfama nasıl eklerim?

http://www.google.com/talk/ adresine girdikten sonra "Add to your Google Personalized Homepage" butonuna tıklıyorsunuz. Size bu gadget’i anasayfanıza eklemek isteyip istemediğiniz doğrulatılacaktır. Bu esnada "Google’a Ekle" bututonuna tıklayıp gadget’i anasayfanıza eklemiş oluyorsunuz. Artık Kişiselleştirilebilir google anasayfanızı her açtığınızda Gtalk’taki arkadaşlarınızla kolayca görüşebileceksiniz.
Kişiselleştirilebilir google anasayfasında Google Talk Gadget

Kendi web sayfama nasıl eklerim?

Dediğim gibi Google Talk Gadget tamamen taşınabilir bir araç. Web tabanlı olduğu için de web sitenize ekleme imkanınız var. Web sitenize bu aracı eklediğinizde her ziyaretçi kendi Gtalk hesabı ile oturum açabilecektir. Ayrıca sizi kendi arkadaş listelerine ekleyebileceklerdir. Ziyaretçiler bir yandan web sitenizi gezerlerken diğer yandan arkadaşlarıyla sohbet etmeye devam edecektir. Bir bakıma web sitenize bir sohbet özelliği de kazandırmış oluyorsunuz.

Yine http://www.google.com/talk/ adresine giriş yapıyorsunuz. Bu sefer sayfanın altındaki "Get the code here" bağlantısına tıklıyorsunuz. Karşınıza bir özelleştirme sayfası çıkacak. Bu sayfada gadget’in web sayfanızda nasıl görüntüleneceğini ve ebatlarını belirtiyorsunuz. Eğer herşey tamamsa "Get the Code" butonuna tıklayıp hemen altta web sayfanıza ekleyeceğiniz kodları görebiliyorsunuz. Bu kodları web sayfanıza ekleyerek işlemi tamamlamış oluyorsunuz..
Herhangi bir web sayfasında Google Talk Gadget

Sonuç

Google Talk Gadget gerçekten ilginç ve bir o kadar da keyifli bir araç. Çünkü masüstümüze ancak install ederek kullanabildiğimiz bir yazılımı artık web’in her köşesinde kullanabilme imkanımız var. Artık yavaş yavaş masaüstünde kullandığımız yazılımlar internet tarafına kayıyor. Eskiden olmaz denilenlerin bir bir gerçekleştiğini görüyoruz. Adobe‘un da yine geçtiğimiz günlerde Photoshop’un web üzerinden kullanılabilen bir sürümünü hazırladığını duyurması da bu işin ne kadar ciddi olduğunun bir başka göstergesi.

Google Talk Gadget özelliklerini gösteren videoGoogle Talk Gadget aracına geri dönecek olursak yandaki video’yu da mutlaka izlemenizi tavsiye ederim. Bu video Google Talk Gadget aracını tanıtıyor ve özelliklerini gösteriyor. Ne kadar kullanışlı olduğunu, masaüstünde kullandığımız Gtalk’tan geri kalır bir yanı olmadığını videoyu izleyerek görebilirsiniz.

Kalıcı Bağlantı Yorum (yok) Yorum yaz!

Touchpad ile mouse orta tuşu kullanmak

15/12/2007 · Kategori: Yazilim - Donanim

touchpadHP marka dizüstü bilgisayarımda 3 adet usb çıkışı mevcut. Bunlardan 2 tanesi yanmıştı. Şu anda kullanılamaz ve tamir edilemez durumda. Geriye kalan tek usb çıkışına ise Onixon marka adsl modemimi bağlıyorum. Hal böyleyken internete bağlı olduğum zaman mouse’u takacak yer kalmıyor :) Ben de mouse yerine touchpad kullanmak zorunda kalıyorum. Fakat touchpad üzerinde sadece sol tıklama ve sağ tıklama tuşları mevcut. Orta tuş diye birşey koyma gereği duymamışlar (:

Orta tuş ile tıklama yapmanın önemi

operaOpera kullanıcıları orta tuşla tıklama yapmanın ne kadar önemli olduğunu iyi bilirler. Çünkü Opera’da sörf yaparken bir linke orta tuşla tıkladığınızda, o linki arka sekmede açabilirsiniz. Açık olan herhangi bir sekmeye orta tuş ile tıkladığınızda ise, o sekmenin kapanmasını sağlarsınız. Ama benim gibi touchpad kullanıyorsanız bu gibi kısayolları kullanamıyorsunuz demektir.

Orta tuş simülatörü

Ama geçen gün beni çocuklar gibi sevindiren bir haber okudum. Bu haberde yaklaşık 200 KB boyutundaki bir yazılım ile touchpad kullanılarak orta tuşun simüle edilebildiği yazıyordu. Middle-Click Simulator adlı bu yazılım bilgisayarınızda çalışır haldeyken, touchpad’in sol ve sağ tıklama tuşlarına aynı anda basarsanız sanki orta tuşla tıklama yapmışsınız gibi algılanıyor. Bu yazılım sorunsuz çalışıyor ve gerçekten çok pratik.

Haberin kaynağına buradan ulaşabilir, şuradan ise bahsettiğim yazılımı bilgisayarınıza indirebilirsiniz

Kalıcı Bağlantı Yorum (yok) Yorum yaz!

« Önceki ::