GüLe SeVDaLi BiR GeNçLiK

WEBMASTER SAHASI => Webmaster Kaynaşma Yeri => Webmaster Programları => Konuyu başlatan: sevdaligul - 18 Haziran 2010, 21:25:59

Başlık: Javascript Sanal Klavye Yapımı
Gönderen: sevdaligul - 18 Haziran 2010, 21:25:59
Merhaba arkadaşlar tekrardan farklı bir örneği sizinle paylaşmaktan mutluluk duyuyorum. Şuanda üzerinde çalıştığım bir alışveriş sistemi için gerekli olan sanal klavye uygulamasının yapımını burdan sizinle paylasmak istedim . Klavye basit biraz artık burdan mantığını alıp geliştirmek size düşüyor .


Başlıyoruz

İlk önce basit bir form oluşturuyoruz !
(http://www.byumut.com/ornekler/sanal_klavye/form.JPG)

şte bu şekilde iki input’tan oluşan bir form oluşturduktan sonrasında ise kodlarımıza geçiyoruz . Başta sölediğim gibi bu örnek basit sadece mantığını anlatmak için oluşturulmuş bir örnek . Siz ne kadar geliştirirseniz o kadar büyücek ve güzelleşecektir buna inanıyorum . İlk önce input değerlerinden herhangi birisine tıklandığında sağ kısımda küçük bir alanın görünmesini diğer input’a tıkladığımızda ise o input değeri için olan alanın görünmesini diğer alanın ise gizlenmesini istiyoruz . O halde yapmamız gerek input ‘ lara birer onclick eklemek ve javascript fonksiyonumuzu yazmaya baslamak .

javascript fonksiyonları
(http://www.byumut.com/ornekler/sanal_klavye/js.JPG)

işte arkadaşlar gördüğünüz gibi temelde 3 kalıp fonksiyonu birleşimi .

1. fonksiyon birinci inputtan ikinci inputa geçtiğimizde 1. input için görünen alanın kaybolmasını saglıyor . Aynı şekilde tam terside geçerli tabiki .

2. fonksiyon ise sanal klavyeyi gösteren gizleyen alan !

3. fonksiyon gurbu ise sanal klavye içindeki değerleri inputların içerisine yazmaya yarayan fonksiyon .

Şimdi ise sanal klavyeyi gösterelim ! Sanal klavyede burda çok basit bir şekilde tekrardan üzerinde bastırmak istiyorum bu örneği göz önüne alarak çok değişik şeyler geliştirebilirsiniz ! …

Sanal Klavye Kodları
(http://www.byumut.com/ornekler/sanal_klavye/klavye.JPG)

BİTTİ …

Uygulamanın Çalışır Hali İçin Tıklayınız !

Uygulamayı İndirmek İçin Tıklayın !

UMUT ÇETİNKAYA

Alıntı