jQuery More eklentisi

Tahmin ediyorum 3 hafta sonra kaldığım yerden yazılarıma devam edeceğim. Bir proje için yazının tamamını gör olayını yaptım, bugünde bu olayı eklenti haline getireyim hemde jQuery e nasıl eklenti yazılıyor bunu bir göreyim diyerek more eklentisini yazdım :) (Hayatımın en garip duygulu günlerinden birini geçiriyorum, bu sebepten dolayı cümlelerde anormallikler olabilir, kodlarda da, sonra uğrar düzeltirim.)

Eklenti şu işi yapıyor; diyelim uzunca bir yazı var ve siz bunun ilk 100 karakterini göstermek istiyorsunuz, 100 karakterden sonra çıkan bir düğmeylede yazının tamamını gösteriyorsunuz. Yada kendi belirlediğiniz bir ayraçla bu işlemi yapabiliyorsunuz. Bu arada eğer özellik açıksa ki varsayılan olarak açık, html etiketlerini kaldırıyor, devam et düğmesine basıncada yazının orjinal halini getiriyor.  Örneklere bakarak demek istediğimi daha iyi anlayabilirsiniz.

$(document).ready(function () {
  $(".more").more();
  $(".more").more({text:' ..more',textClass:'moreLink',character:50,splitChar:'{devam}'});
});

Eklentinin git adresi: https://github.com/apoStyLEE/jQuery-More-plugin

Örnek: http://95.0.146.135/jqueryMore/

jQuery UI sürükle bırak ile alış veriş sepeti mantığı

Uzun zaman önce hayalini çok kurduğumuz fakat yeterince javascript bilmemekten ve kütüphanelerin bu denli gelişmiş olamayışından dolayı bir türlü gerçekleştiremediğimiz bir olaydı bu. Nereden aklıma geldi bilmiyorum, fakir bir çocuğun zengin olduğunda hayalini kurup bir türlü yapamadığı şeyi yapması heyecanıyla sarıldım web matrixe :) Heeeeeman, güç bende artık !

Okumaya devam et jQuery UI sürükle bırak ile alış veriş sepeti mantığı

jQuery serialize ve serializeArray fonksiyonları

Bu yazıda jQuery ile serileştirme (serialize) olaylarına değineceğim. Serileştirme, bir grup form elemanın elemanAdi ve içindeki değer olarak bir string haline yada dizi (array) haline getirilmesine diyoruz. Bu yöntem özellikle ajax ile veritabanı işlemleri yaparken kullanılıyor.


Okumaya devam et jQuery serialize ve serializeArray fonksiyonları

Ajax ile daha fazla kayıt göster olayı (Load More Data)

Yine kullanımını ilk olarak Facebook ve Twitter’ dan gördüğümüz bu olayın temel mantığını bildiğimiz sayfalama oluşturuyor. Neden bu şekilde bir sayfalama kullanmak gerekiyor isterseniz bunlara bir bakalım.

  1. Sayfa komple yenilenmeyeceğinden daha işlevsel. Örneğin; kullanıcı video izlerken altında ki yorumları sayfa sayfa dolaşmak isterse, video yarıda kesilmeyecektir.
  2. Sayfanın sadece ilgili yerini, ilgili kayıtlar kadar güncelleyeceğimizden daha performanslı. Bu performans sunucu tarafında; daha az sistem kaynağı tüketimi, kullanıcı tarafında ise; sayfanın yüklenme süresi olarak gözlenebilir. Özetlersek sunucudan yapılan isteği minimize etmiş oluyoruz.

Çektiğim videoların birinde dile getirdiğim bir konu vardı, yukarıda ki maddeleri görünce yazılı olarak da eklemek istedim. Anlık çok fazla kullanıcıya, çok fazla isteğe cevap verme durumunda olan siteler ajaxı bizim kara kaşımıza yada şekilli olsun afilli olsun diye kullanmıyor. Örneğin Facebook her işlemde sayfayı yeniden yüklemeye kalkarsa altından kalkılamaz bir yükle karşı karşıya kalır. Anlık Facebook’ a yazılan yorum, mesaj yada benzeri girdileri düşündüğümüzde ajaxın hava yastığı görevi gördüğünü hayal etmek güç olmasa gerek. Özetlemek gerekirse, ajax yaklaşımı şekilden ibaret değildir ;) Konumuza geri dönelim.

Okumaya devam et Ajax ile daha fazla kayıt göster olayı (Load More Data)

Textbox içinde arama (Twitter Style)

Twitter da tweet yazarken @ işaretiyle başlayıp yazmaya başladığımızda, arkadaşlarımızı bulmamıza olanak sağlayan bir arama mekanızması bulunuyor. Geçenlerde lazım oldu epey bir aradım fakat tam olarak bu işi yapan bir betiğe rastlayamadım, bende isteğime en yakın örneği bulup üzerinde bir kaç ufak değişiklikle amacıma ulaştım. Faydalandığım örneğin adresini bir türlü bulamadım, bu yüzden paylaşamıyorum :S Olayın temelinde jQueryUi – Autocomplete‘ nin Multiple Values özelliği bulunuyor.

Bu işi yaparken jQuery ve jQueryUi yi kullanıyoruz, diğer dinamik kısım için php, asp, java vb.. diller kolaylıkla kullanılabilir. Ben asp.net mvc (c#) ile bu örneği gerçekleştirdim. Mekanızma şöyle çalışıyor; adres satırından aranacak bilgiyi gönderip, veritabanında aramamızı gerçekleştirip sonucu geriye json olarak döndürüyoruz.


Okumaya devam et Textbox içinde arama (Twitter Style)

jQuery ile Laz İşi Ajax Push

Özellikle Friendfeed, Twitter, FaceBook gibi sosyal ağlarda sayfa yenilenmeden verilerin güncellendiğini biliyoruz. Bu tür bir durumu gerçekleştirmek için akla ilk gelen yöntem ajax ile verinin bulunduğu yeri belirli zaman aralıklarında yenilemek geliyor, fakat veri trafiğinin çok üst düzey olduğu bu sistemlerde sürekli yenileme yapmak aşırı kaynak tüketimine hatta sistemin durmasına sebep olur. Bu işi şüphesiz en iyi yapan site FriendFeed, o kadar iyi yaptılar ki FaceBook bu siteyi ve geliştiricilerini satın aldı :) Neyse oralara daha fazla girmeden konumuza dönelim.

Okumaya devam et jQuery ile Laz İşi Ajax Push

Mvc 3 ile Ziyaretçi Defteri

Çok sevdiğim bir öğrenci arkadaşım, “abi ziyaretçi defteri yapar mısın bana ?” dedi,  yaparım dedim. Ne kadar sürer dedi, taş patlasa 1 saat dedim. Mvc 3 sağolsun 15 dakika da istediğimiz özelliklerdeki ziyaretçi defterini yaptık :) Yeni başlayan arkadaşların işine yarar diye bu örneği paylaşmak istedim. Bu basit defterde, code-first ile model ve doğrulama (validation), jQuery Ajax ve sql compact 4.0 kullandık. Örneği buradan indirebilirsiniz, umarım faydalı olur.

Bu görseli başka bir yazı için hazırlamıştım, sanırım bundan sonra sık sık kullanacam, çok güzel oldu yav :) Okumaya devam et Mvc 3 ile Ziyaretçi Defteri

jQuery ile performans hareketleri – 3

Bir menümüz var diyelim, kullanıcı herhangi bir elemana tıkladı ve o sayfaya gitti. Kullanıcının nerede olduğu göstermek için menüden ilgili bölümü işaretlememiz yada bir şekilde belli etmemiz gerekiyor. Yada bir kategori menümüz var ve kategorilerin alt kategorileri şeklinde de bir hiyerarşimiz bulunuyor, kategori seçildiğinde altındaki diğer kategorileride belli etmemiz gerekiyor. İşte bu tip seçme durumlarında jQuery ile işimizi çok basit bir şekilde görüyoruz. Bunu asp, php vb.. dillerle yapmak için heleki menü dinamik oluşmuyorsa kaç satır yazmanız gerekiyor tahmin bile edemiyorum, basit bir hesapla menüdeki eleman sayıları kadar, yani çOOook. Lafı uzatmadan örneklerimize geçiyoruz. Unutmadan buradaki ve buradaki hareketlere göz atmanızda fayda var ;)
Okumaya devam et jQuery ile performans hareketleri – 3

jQuery ile performans hareketleri – 2

İlk yazımızda count işlemlerine bakmıştık. Bu yazımızda ise başımızda ki en büyük sıkıntılardan biri olan selectbox, radiobutton, checkbox gibi elemanların form düzenleme ekranında yada benzeri bir durumda ilgili seçeneğin nasıl seçileceğine yada işaretleneceğine değineceğiz. Yani kullanıcıya önceden seçtirdiğimiz yada işaretlettiğimiz seçeneğin tekrar kullanıcıya gösterildiğinde ilgili değerlerin seçilmesi olayından bahsediyorum :) (cümleler epey bir devrildi) Örneğin kullanıcı dinamik oluşturmadığımız, içinde 5 tane eleman olan bir selectbox dan bir seçenek seçti ve kaydetti. Kullanıcının formu düzenlemesi gerektiğinde bir if bloğuyla türlü taklalar atıp ilgili seçeneğe “selected” niteliğini (attribute) eklememiz gerekiyor. Bu durum diğer elementler içinde geçerli bir durum. Mesela 5 seçenekli bir checkbox grubumuz var, kullanıcı içlerinden herhangi 3 tanesini işaretledi ve tekrar düzenlemek istedi, if senaryosunı aynen tekrarlamamız gerekiyor. Bu noktada yine jQuery Selector() imdadımıza yetişiyor ve ufak kod parçalarıyla taklalardan uzaklaşıyoruz. Hemen örneklerimize göz atalım;
Okumaya devam et jQuery ile performans hareketleri – 2

jQuery ile performans hareketleri – 1

Bu yazı serisinde jQuery ile nasıl performans çakallıkları yapabiliriz bunlara değineceğim. Zaman zaman çok ufak nüanslar ile ciddi yüklerden kurtulabiliyoruz, önemli olan bu nüansları görebilmek. Yaptığım işlerde jQuery’ i sadece bu amaçlarla kullandığım bile oluyor. Neyse lafı fazla uzatmadan ilk hareketimize geçelim.


Okumaya devam et jQuery ile performans hareketleri – 1

Mvc ile jQuery Template Kullanımına Giriş – Video

Geçtiğimiz günlerde jQuery Template hakkında detaylı bir yazı yazmıştım. Bu videoda template olayını mvc ile birlikte kullanıp bilgilerimizi pekiştiriyoruz. Mvc kontrolümüzden gelen json veriyle işlemlerimizi yaptığımız bu videoda, templatenin artılarınada değiniyoruz.

Videoyu daha kaliteli izlemek için buradan indirebilirsiniz.

Konuyla ilgili adresler;

  1. http://weblogs.asp.net/hajan/archive/2010/12/15/jquery-templates-with-asp-net-mvc.aspx
  2. http://weblogs.asp.net/hajan/archive/2010/12/13/jquery-templates-tmpl-tmplitem-and-template.aspx
  3. http://weblogs.asp.net/hajan/archive/2010/12/13/jquery-templates-in-asp-net-introduction.aspx
  4. http://api.jquery.com/jQuery.template/
  5. http://stephenwalther.com/blog/archive/2010/11/30/an-introduction-to-jquery-templates.aspx

Projeyi buradan, videoyu buradan indirebilirsiniz.

Mvc projesinde jQuery Ajax Kullanımı – Video

Mvc projemizde jQuery ajaxı kullanarak, bir içeriğin altına yorum ekleme ve silme işlemini gerçekleştireceğiz. Bu işlemin bize kazandırdıklarını, mvc ile uygulama geliştirmenin bize kattıklarınıda anlamaya çalışacağız. Umarım faydalı olur.

Videoyu daha kaliteli izlemek için buradan indirebilirsiniz.

Projeyi buradan, videoyu buradan indirebilirsiniz.