Archive for the ‘Javascript’ category

jQuery qTip ile Görsel Açıklama Kutuları Oluşturun

November 17th, 2009

qtip_bubbles_blueqTip jQuery kütüphanesi ile hazırlanmış çok şık ve esnek bir jQuery eklentisidir.

Bu eklentiyle hızlı ve görsel bir şekilde açıklama kutuları ve konuşma balonları gibi görsel öğeler kullanabilirsiniz.

Özellikleri,

  • Tarayıcı uyumu: IE 6.0+, FF 2.0+, Opera 9+, Safari 3+,  Chrome 1+, Konqueror 3.5+
  • Çalışabilirlik: qTip kodları dinamik olarak oluşturulur. Eğer tarayıcının javascript desteği pasif ise salt html olarak görünür.
  • Yuvarlatılmış kenarlar
  • Çoklu uygulama: Nesneye birden fazla qTip ekleyerek konuşma balonları oluşturulabilir.
  • Kolay Pozisyonlama: qTip’te tanımlı 12 kutu pozisyonu ile nesnenin istediğiniz yerinde kutuyu gösterebilirsiniz.
  • Görsel stil: Tanımlı 6 stil teması ile farklı tasarımlar için uygun.
  • Sırayla döşeme: qTip kutuları üst üste binse bile fare imleci ile üstüne gelindiğinde geçerli kutu ön plana çıkıyor.
  • Animasyon: qTip içerisinde kutuların belirlenmesi için varsayılan olarak fade, slide ve grow efektleri bulunmaktadır. Kendi animasyonlarınızı oluşturup qTip’i istediğiniz gibi genişletebilirsiniz.
  • Ajax desteği: qTip kutularının içeriğini ajax olarak çekebilirsiniz.
  • API:  API kütüphanesi ile callback ve diğer özelliklere hızlıca erişip, düzenleyebilirsiniz.

jQuery qTip ile ilgili bağlantılar;

qTip Anasayfa |   Demo | Documentation | Download

Tarayıcıda Javascript Aktiflik Kontrolü

July 28th, 2009

javascript-codeWeb uygulamalarının olmazsa olmazı, elimiz ayağımız Javascript kodlarının düzgün çalışabilmesi için kullanıcının tarayıcısının javascript desteği özelliğinin açık olması gerekiyor. Belki herkesin bildiği bir koddur fakat ben daha yeni kullanıyorum, o yüzden buraya yazmak istedim.

Aşağıdaki örnekte olduğu gibi <noscript></noscript> kontrol kodları ile bu javascript desteği kontrolünü yapabilir ve eğer desteklemiyorsa belirteceğimiz URL’ye yönlendirebiliriz. Aşağıdaki kodları <head> yada <body> takısı içine yerleştirebilirsiniz.

<NOSCRIPT>
<meta http-equiv="Refresh" content="0; URL=Hata.asp?Msg=Tarayıcınızın
Javascript desteği pasif görünüyor. Bu uygulamayı kullanabilmeniz için
tarayıcının javascript desteğini açmanız gerekmektedir.">
</NOSCRIPT>

Bu kodlarda content özelliğinde belirttiğimiz “0″ değeri kaç saniye bekleyip yönleneceğini ayarlar. Diğer URL özelliğini ise biliyorsunuz.
Kolay gelsin.

<NOSCRIPT><meta http-equiv=”Refresh” content=”0;URL=Sinav.Hata.asp?Bas=Tarayıcınızda Bir Sorun Görünüyor!&Msg=Tarayıcınız Javascript desteği pasif görünüyor. Sınav uygulamasını kullanabilmeniz için tarayıcı javascript desteğini açmanız gerekmektedir.”></NOSCRIPT>

Klavye Tuş Kodları – Keyboard Key Code Values

July 7th, 2009

keyboard-12Javascript ile klavye tuşlarını engelleme üzerine çalışmalar yaparken yazının devamında vereceğim klavye tuş kodları ile hangi tuşun javascriptte hangi tuş kodu ile alınabileceğini öğrenebilirsiniz.

Aşağıda size jQuery ile hazırlanmış ve hangi tuşa basıldığını bildiren şu adrestende erişebileceğiniz bir örnek kod veriyorum.

<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery("#tbPageInfo").keydown(
      function(e){
        var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
        alert(key);
      }
    );
  });
</script>

Klavye tuşları kod listesi yazının devamında

» Read more: Klavye Tuş Kodları – Keyboard Key Code Values

jQuery ile Sağ Tıklama Engeli – jQuery Right Click Plugin

June 21st, 2009

mouse-1Yaptığımız uygulamalarda tarayıcı üzerindeki sağ tıklama ile gelen menüyü pasif yapmak için şuradaki “jQuery Right Click Plugin isimli jquery scriptini kullandım. Safari, Chrome, Firefox ve IExplorer da başarılı şekilde çalışıyor.

Ayrıca bu scriptin diğer önemli özelliği ise sadece bir öğeye yada css classına(div, span yada “.classAdi”) uygulayabiliyor ve sadece onun üzerindeyken gelen menüyü engelleyebiliyorsunuz.

Örneğe bakmak için Demo sayfasına gidebilirsiniz.