Bu aralar nedendir bilmem bir jquery öğrenme istegi doğdu içime. çalışmalara başladıktan sonra gerçekten bir arayüz geliştiricisinin kesinlikle öğrenmesi gereken en önemli konulardan biri olarak düşünmeye başladım… Her yerde karşımıza çıkan jquery artık flash animasyonların yerini tutacak kadar gelişti… Aslında web sitemde jquery anlatımlarına baştan sona konu bazlı olarak yer vermeyi düşündüm ama sonradan bundan vazgeçtim. Böyle işimize yarayacak güzel örneklere yer vermek daha mantıklı geldi… İleride kendi adıma bir web sitesi açarsam… Bu bilgileri ve bu gibi bir dünya örnek yapıp paylaşmayı düşünüyorum…  Şimdi Örneğimize geçelim…

Örnek web sitelerinde gördüğümüz ve kullanılması herzaman muhtemel bir örnek… Jquery ile ilk verdiğim ilk uygulama oldugu için işe yarar bişey olmasınıda istedim… Kısaca Sayfamızda bulunan bir input text formun value değeri olarak ‘Arama yapın veya buraya adınızı giriniz’ gibi değerler atayarak. input içine tıkladığımızda yani focus yaptığımızda value değerinin silinmesi. focus olayı bittiğinde yani blur olayında eğer input text in içinde değer varsa yani value değeri doluysa aynen kalması… ama değer yoksa… tekrar valur değerini Eğer içinde değer varsa o değerin kalması ama içinde değer yoksa ‘Arama yapın veya buraya adınızı giriniz’ gibi değerleri atamaktır…

İlk Önce Sayfamıza Jquery kodunu çağırıyoruz.

<script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

Daha sonra body kodlarımızın içine input textimizi hazırlıyoruz…

<input type="text" value="Adınızı Giriniz" />

Şimdi Jquery Kodlarımız yazalım

$(document).ready(function(){

 $('input[type="text"]').focus(function(){

 $(this).select(); // girince gitti

 $(this).val("");

 });

 $('input[type="text"]').blur(function(){

 var Valuemiz = $(this).val();
 if(Valuemiz == "" || Valuemiz == null ){

 $(this).val("Seçtikmi");
 }else{

 $(this).select(Valuemiz);

 }
 });

 })

Demo

Video Kategorilerimize Bakmayı Unutmayın

• Amatör
• Animasyon
• Çocuklar
• Hayvanlar
• Kadın
• Kamera Şakası
• Klipler
• Komik Videolar
• Korku
• Magazin
• Oyun
• Sinema
• Spor
• Sıcak
• Teknoloji
• İnsan ve Yaşam

1. Free “Site Under Construction” Template

Demo | İndir
2. Greyscale web elements

Demo | İndir
3. Mac DeviantID

Demo | İndir
4. Web elements pack (PSD & PNG)

Demo | İndir
5. Free Power Icon Set

Demo | İndir
6. MINTY-FRESH WEB BUTTONS (PSD)

Demo | İndir
7. Dark Mysterius Web Design Elements

Demo | İndir
8. CLEAN & SIMPLE NAVIGATION MENU (PSD)

Demo | İndir
9. FREE VIDEO PLAYER INTERFACE (PSD)

Demo | İndir
10. A free set of mobile UI design elements

Demo | İndir
11. Free Colored Web Menus

Demo | İndir
12. Aristo-24

Demo | İndir
13. Toolbar Cleantool psd

Demo | İndir
14. Button Design PSD Resource

Demo | İndir
15. Free Psd – subtle gloss effect login box

load | İndir
16. Video Player UI

load | İndir
17. HORIZONTAL ACCORDION / SLIDER GUI (PSD)

Demo | İndir
18. 2011 Counters

Demo | İndir
19. Small GUI Pack

Demo | İndir
20. ELEGANT LOGIN FORM DESIGN (PSD)

Demo | İndir
21. Fleepy Under Construction PSD

Demo | İndir
22. Android Widgets

Demo | İndir
23. Free PSD Login Panel

Demo | İndir
24. 31 FREE Buttons PSD file

Demo | İndir

Artık Html 5 günümüzde yavaş yayınlaşmaya başlayınca web geliştiricileride bişeyler yapmaya başladılar… Html 5′i tüm web browserleri desteklemesede ileride desteleyecekleri kesin bu yüzden şimdiden bişeyler html 5 öğrenmek gerektiğini düşünüyorum…

Html 5 kullanarak yapılmış resim slideshow gerçekten hoş yapılışını ve detaylı bilgisi için burayı inceleyebilirsiniz.

Html 5 ve jquery kullanarak yapılmış resim slide

İNDİR – DEMO

Oldukça güzel bir portfolio teması ajax teknolojisi kullanılmış, Sadece kullanışlı ve tasarımı oldukça güzel bir tema bedava olarak dağıtılan temanın demosu için buradan -  indirmek için buradan… Alalım sizi… Tema hakkında detaylı bilgi için ise galiba tema yapımcısı olan pengbos işte onun içinde buradan… Tema güzel ama işime yaramaz bana başka tema lazım diyosan… o zamanda buradan

1. CU3ER – Flash 3D Image Slider

2. Avia Slider jQuery Plugin

3. Advanced jQuery background image slideshow

4. Nivo Slider – The Most Awesome jQuery Image Slider

5. jqFancyTransitions

6. Create content swithcer without javascript

7. How to Create Facebook Sliders With Mootools and CSS

8. Blockster – Featured Content Slider With Transition Effect

9. dualSlider – Two Sided jQuery Content Slider

10. jCoverflip – Customizable jQuery CoverFlow Plugin

11. Fancy Sliding Form with jQuery

12. Create an Image Rotator with Description (CSS/jQuery)

13. Colorful Sliders With jQuery & CSS3

14. Coin Slider – jQuery Image Slider Plugin with Unique Effects

15. Easy Slider jQuery Plugin

16. Create a Slick and Accessible Slideshow using jQuery

17. Create a Beautiful jQuery Slider Tutorial

18. The Lof SiderNews Plugin

19. jQuery Blinds Slideshow using CSS Sprites

20. A Beautiful Apple-style Slideshow Gallery With CSS & jQuery

21. jQuery Plugin – Feature List

22. Automatic Image Slider w/ CSS & jQuery

23. The Piecemaker XML Gallery

24. Supersized jQuery Fullscreen Plugin

25. Orbit – A Slick jQuery Image Slider Plugin

2. HTML5, CSS3, ve jQuery Kullanarak Nasıl Bir Açılır Menü Yaparız

3. CSS & jQuery ile Yapılmış Harika Açılır Menüler

4. Kayan jQuery Açılır Menü

5. Kibar Bir Açılır Menü

6. Basit Bir Açılır Menü Eklentisi

7. jQuery ve CSS Açılır Menü Örneği

8. Şık Bir Açılır Menü Yapımı

9. Değişik Açılır Menü Örnekleri

10. Düzenlemesi Kolay Bir jQuery Açılır Menü

11. RSS Aboneliği İçin Şık Bir CSS Açılır Menü

12. jQuery Animasyonlu Açılır Menü

13. Superfish

14. CSS ve jQuery ile Yapılmış Açılır Menü

15. Basit ve Sade jQuery Açılır Menüler

16. Harika jQuery Menüler

17. McDropdown jQuery Eklentisi

18. jdMenu Hiyerarşik Menü Eklentisi

19. Dim Gray Açılır Menü

20. jQuery ve CSS Kullanılarak Yapılmış Bir Açılır Menü Yapın

21. WordPress’de CSS3 ve jQuery Kullanarak Açılır Menü Yapmak

22. jQuery ile Harika Bir Menü Yapın

23. Droppy

24. Multi-Level Bir Açılır Menü Yapımı

25. jQuery Multi-Level CSS Menü