bildirgec.org

Eylül ayı boyunca en popüler jQuery derslerini sizler için derledik. Aşağıdaki birbirinden farklı ve kullanışlı uygulamarın tümünü ücretsiz olarak kullanabilir ve özelleştirebilirsiniz. Popüleritesi artan jQuery kütüphanesi sayesinde interaktif olarak web ortamında birçok farklı projede kullanabilirsiniz. Eylül Ayının jQuery UygulamalarıUygulamaları;

jQuery Roundrr – How To Create Awesome Circular Image Galleries With jQuery & CSS
(jQuery Roundrr – jQuery ve CSS ile Nasıl Dairesel Resim Galerisi Oluşturulur)

A jQuery & CSS3 Drop-Down Menu With Integrated Forms
(jQuery ve CSS3 ile Açılır Menüye Entegreli Formlar)

Simple Tooltip with jQuery & CSS
(jQuery ve CSS ile Basit Tooltip)

Daha önce haziran 2009‘un en iyi jquery derslerini görmüştük. Bu yazımızda ise Mart 2010’un en iyi jquery derslerini göreceğiz.

1. How to Create an Infinite Scrolling Web Gallery (Sınırsız kaydırma web galerisi nasıl oluşturulur?)

2. Advanced jQuery background image slideshow (Gelişmiş jquery arkaplan imaj slayt gösterisi)

Henüz bütün tarayıcılar tarafından bütün özellikleriyle desteklenmese de, bir çok web tasarımcı CSS 3’ü Jquery, Mootools gibi javascript kütüphaneleriyle bir arada kullanarak neler yapılabileceğini denemeye başladılar bile.

Bir çoğu şimdilik sadece Safari ve Chrome tarafından desteklense de bu uygulamaları gördüğümüzde şaşırmamak elde değil gerçekten. CSS adeta aldı başını gidiyor.

CSS 3’ü öğrenmek için hala geç değilken bir an önce bu uygulamaları gözden geçirerek CSS 3’e başlangıç yapmanızda fayda var. Diğer yandan CSS 3’ü kullanmaya başlamak, Internet Explorer 6’yı tamamen terk etmek için de önemli bir adım bence.

Google maps artık birçok interaktif sitede yerini aldı ve almaya devam ediyor. Sizler de sitelerinizde google maps kullanmak istiyorsanız aşağıdaki jquery eklentileri ile bunu kolaylıkla gerçekleştirebilirsiniz…

gMap

gmaps, özelleştirilebilir esnek yapısı ve küçük boyutu (2KB) ile google mapsi sitenize kolayca yerleştirebilmenizi sağlayan bir jquery eklentisidir. yapmanız gereken sadece gMap fonksiyonu kullanmak olacaktır. Ayrıca fonksiyonun seçenekleri sayesinde haritanızı istediğiniz gibi özelleştirebilirsiniz.

Demo – Download

Google Maps jQuery Plugin

Google Maps jQuery Plugin, Google Maps Javascript API için geliştirilmiş bir eklentidir. Bu eklenti sayesinde harita üzerindeki div veya bilgi pencerelerini CSS ile rahatlıkla kontrol edebiliyorsunuz.

Demo – Download

Çoğu çalışmalarımızda gerekli olan DropDown menü jQuery ile dahada basit hale gelmiştir. 3 adımda aşağıdaki örnekteki gibi yapabilirsiniz. İşinize yarayacağını düşünüyorum.

Adım 1 : HTML
HTML tagları ile menümüzün başlıklarını oluşturuyoruz.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<ul class="topnav">
    <li><a href="#">Home</a></li>
    <li>
        <a href="#">Tutorials</a>
        <ul class="subnav">
            <li><a href="#">Sub Nav Link</a></li>
            <li><a href="#">Sub Nav Link</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Resources</a>
        <ul class="subnav">
            <li><a href="#">Sub Nav Link</a></li>
            <li><a href="#">Sub Nav Link</a></li>
        </ul>
    </li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Advertise</a></li>
    <li><a href="#">Submit</a></li>
    <li><a href="#">Contact Us</a></li>
</ul>

Jquery, ajax, javascript ve efekt olarak kullanabileceğiniz bir framework‘dür. Bu yazıda haziran 2009’un en iyi jquery derslerine ulaşabileceksiniz.

1. Animated Menu Using jQuery

Bu derste jquery ve css kullanarak nasıl animasyonlu bir menü yapıldığını göreceksiniz.

2. Create a Dynamic Scrolling Content Box Using AJAX

Dinamik kaydırma kutusu oluşturma dersi.

sitenizde çeşitli amaçlarla jquery‘den faydalanabilirsiniz. resim gösterimleri, arama kutusu… ya da yalnızca görsel zenginliği arttırmak için de yine bu javascript kütüphanesinden yararlanmanız mümkün. sitenizi daha hoş yapabilecek 20 uygulama;

Creating a Keyboard with CSS and jQuery

Animate Curtains Opening with jQuery

Merhabalar yine bir jquery dökümanı ile burdayım, her ne kadar kısa olsa da jQuery’ye başlamayaı düşünenler, gözü korkanlar, yada ufakdan bişeyler denemek isteyenler için faydalı bir yazı olacak.

Bu yazıda gerçekten jquery felsefesine çok güzel uyan bir örnek yapacağız.
The Write Less, Do More deyip başlıyoruz. klasik açılıp kapanan içerik yapacağız bunun bir çok örneği var ama 4 satırlık kod için niye hazır kullanalım ki 🙂 ben de bu kadar kolay olacağını beklemezdim açıkcası.

neyse bir içerik bir de head sınıfımız var. 3 tane div ile bir örnek deneyecğiz.
sınıflarımız burada.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

body,td,th {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	color: #333333;
}

.header
{
width:530px;
padding:5px;
height:20px;
cursor:pointer;
font-size:12px;
font-weight:bold;
border:1px solid #CCCCCC;
background-color:#FFFFCC;
background:url(pop_02.jpg);
}

.content
{
width:500px;
padding:20px 20px 20px 20px;
height:150px;
display:none;
border:1px solid #CCCCCC;
background-color:#FFFFCC;
background:#E4EEF1;
}

jQuery UI’si (Kullanıcı Arabirimi) bir web sayfasına çok şey katabilir. Bu kullanıcı arabiriminin sunduğu pek çok widget bulunmaktadır. Bu makalede bahsedeceğim element, gittikçe popülerleşen “kaydırıcı” (slider). Bu dersimizde metin boyutunu kontrol etmek için slider kullanmak üzerine duracak ve bunun nasıl web sayfalarına entegre edilebileceğini örneklendirmeye çalışacağız. Bu özellik sayesinde ziyaretçileriniz, web sitenizdeki metin boyutunu kendi zevklerine göre değiştirebilecekler. Ayrıca bu özellik bir web sayfası üzerinde de oldukça çekici duruyor.

Sadece birkaç satır jQuery kullanarak istediğiniz bir metnin üzerine fare imlecini getirdiğinizde onun rengini değiştirmek çok kolay bir işlem. Nasıl mı? Yazının devamını okuyun.

Demo | İndir

Prensip
Bu betiğin yaptığı şey, bağlantıları (A Etiketikleri) seçmek, içeriğini “.one” adındaki bir sınıfa dahil olan SPAN’a dahil etmek ve “.two” adında bir SPAN elementi oluşturmak. SPAN “iki” A etiketi ile aynı içeriği taşıyor ve bağlantı metninin hemen üzerine konumlandırılmış.