jquery image preview

jQuery: Upload Edilmeden Resim önizleme

jquery image previewjQuery ile gelen nimetlerden birini daha bugün inceleyelim. Form kullanarak upload edeceğimiz görsel dosyaları sunucuya yollamadan önce preview (önizleme) jQuery kodları ile mümkün. Kullanılabilirlik ve kolaylık için ziyaretçilerinize sunabilirsiniz. 

Formun file element değeri her değiştiğinde çalışan bu kod bloğu seçilen resimin local adresini ele alarak sayfada gösteriyor.

Demo uygulamanın kodları da bu mantık kadar basit aslında. Uygulamanın çalışan demosunu ve kaynak kodlarını yazının altında bulabilirsiniz.

Uygulama kodlarına geçelim;  […]

PHP:AJAX: Alexa Rank Uygulaması

alexa-demoAlexa Rank sistemi yaklaşık 15 senedir, tüm dünyanın web ekosisteminde etkisini korumaya devam ediyor. Websitelerin istatistiklerini ücretli hesaplara erişime açtığı servislerle, RANK sistemine devam ediyor.  Bu yazıda , bir websitenin ALEXA RANK istatistiklerini hesaplayan bir uygulama geliştiriyoruz. Daha önceki checker uygulamalarımızda kullandığımız, AJAX ve standart serpito demo arayüzünü bu uygulama demosu için de kullanıyoruz. […]

jQuery: Tweet Listeleme Uygulaması

tweet listeleme2012’nin son makalesi niyetine,  twitter kullanıcıların tweetlerini listeleyen sade ve basit bir uygulama hazırladım.

Kullanıcı adını arayarak kullanıcının public tweetlerini listeleyen bu araçta, jQuery kütüphanesi ve herzamanki gibi serpito.com demo arayüzünü HTML + CSS  altyapısı olarak kullanıyorum. […]

jQuery Uygulaması

jQuery Form Post

jQuery Uygulaması

Serpito arşivini kurcalarken, jQuery kütüphanesini kullanarak ajax form örneklerini hiç paylaşmadığımızı farkettim. Geç de olsa bu açığı kapatmaya çalışalım.

 

Özellikle sayfalarda kullanıcı yorumları veya mesajlarını iletebilmek için kullanılan formlar ,  jQuery kullanarak pratik bir şekilde Ajax ile çalıştırılabilmektedir.  […]

Yeni Başlayanlar İçin jQuery – Bölüm 2

jQuery’de Olaylar

Önceki bölümde de belirttiğim gibi, javascript olay temelinde çalışır. Bir işlemin yapılası için bir olay gerçekleşmeli. jQuery’de tanımlı olaylardan bazıları;

  • click(): Bir elemana tıklanma olayı
  • mouseOver(): Fare üstüne gelme olayı
  • moseOut(): Fare üstünden ayrılma olayı
  • toggle(): 2 tık. Fare bir tıklayınca 1., ikinci tıklayışında da 2. fonksiyonu çalıştırır.
  • change(): Bir “select box” nesnesindeki, seçili elemanın değişmesi
  • trigger(): Tetikçi. Bir olay çalıştığında başka bir olayı tetikler. […]
Slider Form

Jquery Fancy Sliding Form (Jquery Form)

Slider Form
Jquey web geliştiriciler için oldukca kullanışlı bir kütüphane. Jquery bazen hayal gücü sınırlarımız zorlamamıza neden olmakta. Sistemlerimizde kullana bileceğimiz insan kaynakları, iletişim, sipariş vb. formları bugunkü örnegimizle dahada geliştire bilir ve hızlı çözümler sunabiliriz.

Örneğimiz 5 sekmeli bir jquery form niteliğinde.  Her sekmede alanların doldurmamız gerekmekte doldurmadığımız takdirde en son bölümde gönder dediğimizde java script uyarısı karşımıza geliyor ve boş geçmiş olduğumuz alanlar açık pembe ile belirgin hale geliyor.

Boş geçilen alanlar tab içerisinde oldugunda fark edilmesi güç bunu önlemek içinde tabların üzerine bir sonraki taba geçildiginde ikon beliriyor ve bu ikona göre nerede hata yapmış olduğumuzu görebiliyoruz.

[…]

Tüm Jquery cheat Sheetler (Jquery Kopya Kağıtları)

jquery ile çalışırken hepimizin zaman zaman jquery olayları ve fonksiyonları ile ilgili yardıma ihtiyacı olur işte tam burada devreye Jquery cheat Sheet’ler  girer.

TÜm Jquery Cheatleri buraya topladım umarım işinize yarar.

En son verison 1.4 un ki: http://www.futurecolors.ru/jquery/

jQuery 1.1.3

[…]

Jquery: Date Picker (Takvim) uygulaması


Web sitelerimizde kullanıcılarımız tarih işlemleri yaparken tarihleri uygun bir biçimde yazmaları ve bizimde sorgularımız bu dogrultuda yapmamız gerekir. Tarih işlemleri i “Jquery Date Pick’i ” kullanabiliriz. İnput alanımız aktif edildiği anda karşımızı bir takvim geliyor ve bu alandan sitediğimiz tarihi seçebiliyoruz.

Dosyamıza jsDatePick.min.1.1.js dosyamızı ve jsDatePick.css stil dosyamızı ekliyoruz, ardından aşagıda yer alan javascript kodumuzu yazıyoruz ve input id inputField aktif edildiğinde karşımızam tarhi seçimi yapacağımız takvimimiz geliyor. […]