Jquery UI kullanarak gerçekleştirilen bu sistemde basit bir index kullanımı ile aktif hale gelebiliyor. Kodları inceleyelim;
Web sitelerimizde yer alan haber, yorum, ürün, yeni ürünler, kullanıcılar vb gibi bilgileri bir bölümde sırası ile geçmesini isteye bilir ve bunu marque olmadan zamana bağlı olarak ekranda durmasını ve ardından kaybolmasını ve sıradaki verinin onun yerini almasını isteyebiliriz.Oldukça kullanışlı ve görsel olarakda gayet güzel bir uygulama, hadi başlayalım.
Jquery yazılımcıların ve tasarımcıların oldukça kullanışlı ve görsel özellikli projeler yapmasına yardımcı olan muhteşem bir kütüphanedir. Bu mutheşem kütüphanenin nimetlerinden yararlanmaya devam ediyoruz. Ziyaretcilerimizi sitemizi dolaşırken mause imleci ile bir nesnenin üzerine geldiklerinde nesnenin belirmesini (orjinal haline dönmesini) sağlayan, mause’u nesne üzerinden çekince ise soluklaşmasını sağlayan uygulama yapacağız. Nesnelerimiz ilk olarak solgun bir haldeler, ziyaretcilerimiz nesneleri seçmek istedikleri anda yavaş yavaş kendi orjinal renklerine dönüyorlar.
E-ticaret sistemlerimizde yer alan ürünlerin kullanıcılar tarafından sepete ekleme işlemleri oldukça önemli ve dikkat edilmesi gereken bir konudur. Sepete eklemek için birden çok yolu kullana biliriz sepete ekle; iconu, butonu veya linki ile sepete ekleme işlemlerinin gerçekleşmesini sağlıya biliriz.
Sistemlerimizde yer alan linkler linklerin açıklamalarını yazı şeklinde yapabildiğimiz gibi Screenshot (Ekran Resmi) şeklindede yapabiliriz. Bu sayede kullanıcıların daha iyi bilgilendirilmesini sağlayabiliriz.Örneğimizde jquery ile screenshot önizlemesi yapıyoruz.
Web sitelerimizde yer alan bilgilerin kopyalanmasını önlemek istediğimizde önlemler almamız gerekebilir. Örneğin eposta tekrarında kullanıcının kopya yapıştır yapmasını istemiyoruz. Bu örneğimizde textleri image olarak göstermeyi öğreneceğiz. h1, h2, h3 ve spam elemetleri içerisindeki verileri resime dönüştürüyoruz.
Web projelerimizde yer alan ürünlere veya galerilere resimleri yüklemek için klasil dosya yükleme, dosyalar yüklenirken bir seferde sınırlandırma getirerek yükleme yapmamızı sağlıyor. Bir foto galeriye normal form file sistemi ile 1,3,5, gibi sınırlı yülemeler yapabiliyoruz. Bu örneğimize sayfamızı yenilemeden ajax ile fotograf dosyalarını yükleme işlemini uygulayacağız. Bu uygulamadaki asıl amaç çoklu dosya yükleme işlemleri yapmayı öğrenmek.
Web sistemlerimizde yer alan iletişim formlarını jquery ve ajax ile daha görsel ve kullanışlı bir hale getirebiliriz. Bu örneğimizde buton veya linke tıklanıldığında iletişim formumuz ekrana geliyor ve gerekli alanların doğruluk kontrolü yapılarak eposta yoluyoruz.Bu iletişim formu SimpleModal üzerine kurulmuştur. OnOpen, onShow ve onClose geriçağırımlarının kullanımı yanı sıra SimpleModal ile Ajax kullanımı gösterir.
Daha önceki Slider Galeri uygulamamızda galerimizde yer alan fotograflar istediğimiz nesne tıklanıldığında aktif oluyor ve ekrana gelen panelden fotograf geçişlerini sağlıyorduk. Bu örnegimizde ise link e tıklanıldığında ekrana kendi belirlemiş olduğumuz içerik gelecek. Örneğimizde “Site İçeriği” linkine tıklanıldığında gumusluoglu.com blogunda yer alan 7 adet uygulamanın başlıkları ekrana gelecek ve tıklandığında linkler blog yazıları yeni bir pencerede açılacak.
jQuery ve CSS kullanılarak hazırlanmış bir klavye uygulaması.
Bazen bildiğimiz programlama dilleri ile oynamak eğlenceli olabiliyor. CSS , online klavye oluşturmak için güzel olabilir, ve sonra jQuery ile çalışmasını sağladık düşündüm. Klavye tuşlarını işlemleri içermektedir.
