bildirgec.org

ajax hakkında tüm yazılar

inanılmaz 5 jQuery Uygulaması

angelsdemos | 25 March 2010 09:06

Web3.0, css3 ve Html5‘in gelişmesi ile birlikte web sayfaları artık interaktif uygulamalar ile dolmaya başladı. Masaüstü uygulamalarında kullanılan efekler ve uygulamaların birçoğu artık flash kullanmadan web sayfalarında da uygulanabiliyor. Tüm bu yeniliklerle beraber jQuery kütüphaneside sürekli büyüyor ve ön plana çıkıyor. Aşağıdaki benzersiz uygulamaları web sitenizin içeriğine göre veya farklı tarzlarda kullanabileceğiniz gibi jQuery geliştiricisiyseniz benzer uygulamalar yaratabilirsiniz. işte inanılmaz 5 jQuery uygulaması;

Interactive Map | Demo

Artık kendi bilgi haritanızı jQuery ile oluşturmanız mümkün. Genellikle bilgi haritaları, .jpg formatında yapılıyordu veya interaktif uygulamalar için ise flash tercih ediliyordu. Fakat web3.0, css3, html5 ile birlikte jQuery’de ön plana çıkarak bu kalıpları yıkıyor. Kendi bilgi haritanızı yaratabileceğiniz bu uygulamada tooltip özelliği ile bölgeler hakkında bilgi verebilir ayrıca belirli bölgelere yakınlaşarak daha ayrıntılı haritalar yayınlayabilirsiniz.

Jquery ile sayfalama

123guray123 | 11 March 2010 12:35

Herkes bilir günümüzün teknolojisinde olmassa olmazlardandır ajax. Artık benimde uygulamarıma ajax katma zamanım geldi diyorsanız doğru yerdesiniz..
Jquery ile yapacağımız bu basit ama işlevsel uygulamayı her türlü projenizde kullanabilirsiniz. Size önerim az sayfalı uygulamalarda kullanmaktır. Çünkü sayfaların hepsi tek seferde yüklenir ve sayfa değiştirildiğinde sayfa yenilenmeden geçilmiş olur. Eğer sayfa sayınız fazla ise bu boşuna yükleme yapmanıza ve sayfanın geç açılmasına sebep olur. 3-5 sayfalık sayfalandırma işlerinde kullanmak akıllıca olur..

Update Progress ile asenkron yüklemeler 1

Gennozaki | 09 March 2010 17:45

Bir veya birden çok UpdatePanel’in sayfada
yer aldığı uygulamalarda bazen bölgesel
bazen detüm sayfadaki yüklemelerin
durumlarına ait bilgileri kullanıcıya göstermek önemli
olacaktır. ASP.NET ile beraber gelen UpdateProgress
kontrolü ile kolaylıkla asenkron işlemlerin takibini
yaparak kullanıcılara “Yükleniyor” mesajları
gösterebiliyoruz.

İlk UpdateProgress örnegi

UpdateProgress kullanabilmemiz için sayfada bir
asenkron AJAX işleminin gerçekleşiyor olması
gerekir. Bu nedenle hemen aşağıdaki gibi bir sayfayı
hazırlayarak bir UpdatePanel içerisinde bir Label ve
Button yerleştireceğiz.

UpdateProgress ile asenkron yüklemeler 2

Gennozaki | 09 March 2010 17:45

Farklı UpdatePanel’lere farklı UpdateProgress’ler

Birden çok UpdatePanel’in kullanıldığı sayfalarda
her bir UpdatePanel’in yüklenme durumu ile ilgili
ayrı ayrı “Yükleniyor” mesajları göstermek
gerekebilir. Bu tarz durumlarda sayfaya konan
UpdateProgress kontrollerinin
Associated UpdatePanel ID özelliklerinin
ayarlanmış olması gerekir. Bu özelliğine
sayfadaki herhangi bir UpdatePanel’in ID bilgisi
verilirse artık söz konusu UpdateProgress sadece
hedef UpdatePanel içerisinde gerçekleşen AJAX
işlemleri ile ilgilenecektir. Böylece bölgesel
yüklemeler için farklı uyarı mesajları
gösterilebilir.

jQuery Form Uygulamaları

angelsdemos | 07 March 2010 12:10

jQuery ile yapılan form uygulamaları ile formlarınızı daha anlaşılır ve daha güvenli biçime getirebileceğiniz gibi oluşabilecek hataları da önleyebilirsiniz. Bu uygulamalar ile ziyaretçileriniz formları doldururken zorlanmazlar. İşte jQuery ile yapılan form uygulamaları;

Otomatik Tamamlayıcılar
Otamatik tamamlayıcı jQuery form elemanları, aradığınız bölüm ile ilgili veri tabanını eş zamanlı olarak tarar ve yazdığınız harf veya kelimeye göre siz henüz arama butonuna basmadan aramaya başlayarak alltaki küçük bir blokta size benzer sonuçları gösterir.

Autocomplete | demo

Autocomplete ile eş zamanlı olarak arama yapabileceğiniz gibi aramalarda filtreleme işlemini de uygulayabilirsiniz.

jQuery buton Uygulamaları

angelsdemos | 23 February 2010 09:43

Realistic Hover Effect With jQuery | Demo

Bu uygulama ile web sitenizdeki butonları hareketli hale getirebilirsiniz. Reflection ve Shadow şeklinde 2 farklı demosu bulunmakta.

Create an Animated Call to Action Button | Demo

Artık sing up butonları faklı olacak. Bu jQuery uygulaması ile butonları kararıp sönen veya farklı renklere şeffaf geçiş yapabilen bir özellik kazandıramanız mümkün.

Jquery Animated Buttons using CSS | Demo

Bu uygulama ile web sitenizde bulunan butonları hareketli hale getirebilirsiniz.

En iyi jQuery Upload uygulamaları

angelsdemos | 17 February 2010 09:39

jQuery upload uygulamaları, kullanıcılarınızın sunucunuza dosya yüklemesini sağlar. Fakat kullanıcılar, dosya yüklerken aynı zamanda farklı işlemler yapabilmelidirler. Birden fazla dosya yükleme özelliği bulunan bazı uygulamaları da kullanabilirsiz. İşte en iyi jQuery upload uygulamaları

AJAX File Upload Form Using jQuery

Bu uygulama ile sayfayı yenilemeden, herhangi bir sorunla karşılaşmadan kullanıcılarınızın dosyaları sunucunuza yüklemesini sağlayabilirsiniz. Her seferinde tek dosya yükleyebiliyorsunuz.

AJAX Upload

AJAX Upload ile önceden belirlediğiniz formattaki dosyaları sunucunuza yükleyebilirsiniz. Dilerseniz sadece resim veya tüm dosyaların yüklenmesine izin verebilirsiniz. Ayrıca pop-up açılarak yükleme özelliği bulunmakta.Submit butonu olmadan dosyayı seçtiğiniz an çalışmayan başlayan bu uygulama ile her defasında bir dosya yüklebilirsiniz.

css3 ve jQuery uygulamarı

angelsdemos | 12 February 2010 17:18

jQuery günümüzde oldukça popüler ve genişlemiş bir kütüphane. css3 ise yeni bir dil olmasına rağmen oldukça kullanışlı ve görsel olarak muhteşem. Bu ikisi birleşince ortaya çok güzel çalışmalar çıkabiliyor. Fakat css3 çalışmaları tam olarak tamamlanmadığından tarayıcıların daha alt sürümlerinde çalışmayabilir. Aşağıdaki uygulamaları web sitenize ekleyebileceğiniz gibi uygulamalar ilham kaynağınız olup kendiniz farklı çalışmalar yapabilirsiniz;

Polaroid photo viewer with CSS3 and jQuery | demo

Polaroid photo viewer, css3 ve jQuery ile yapılmış farklı bir uygulamadır. Farklı birçok resmi ekranda yayar ve mouse ile taşınmasını sağlar.

Sweet AJAX Tabs With jQuery 1.4 | demo

Sweet AJAX Tabs, css3 ve jQuery ile hazırlanmış bir tab uygulamasıdır. Bu uygulama sayesinde web sayfanızda yeni sayfa yüklemesine gerek kalmadan diğer sayfalar arası geçişi sağlayabilirisiniz. Bu sayede ziyaretçileriz daha az bağlanma sorunu yaşamış olurlar.

jQuery İle “Gizle/Göster” Sütun ve Tablo Yapımı

Metin METE | 12 February 2010 08:52

Bu yazımızda jQuery ile sitemizdeki sağ yada sol sütunu, tabloyu yada paneli nasıl gizle/göster yapabileceğimizle ilgili uygulama hazırladım. Çalışma mantığı, daha önce anlattığım (jQuery İle “Tab” Uygulaması Geliştirmek) yazısındaki uygulama ve çalışma mantığıyla neredeyse aynıdır. Tek farkı! Bu uygulamada animasyonun daha fazla olması. Çalışan örneği için BU bağlantıya bakabilirsiniz.

Şimdi öncelikle site içeriklerini Ana Tablo içine aldım;

1
2
3
<div class="ana-tablo">
...
</div>

Ana Tablo için eklediğim stil;

1
.ana-tablo { overflow:hidden; position:relative; padding-bottom:10px; }

Şimdide sırayla içerikleri doldurmaya başlıyorum. Öncelikle Gizle/Göster butonlarını ekledim;

1
2
<div class="gizle">»</div>
<div class="goster">«</div></code>

Gizle/Göster butonları için eklediğim stil;

1
.gizle, .goster { font-size:25px; position:absolute; top:0; right:10px; background:#000; color:#fff; padding:5px 5px 8px 5px; line-height:0.2em; cursor:pointer; overflow:hidden; /*Buradan*/-moz-box-shadow:1px 1px 5px #e4e4e4; -moz-border-radius:5px; -webkit-border-radius:5px;/*Buraya CSS3! Her tarayıcıda çalışmaz!!!..*/ }

Tabii bu bölümde de atlamamak lazım! Kullanıcılarımıza sadece “Gizle” butonu gösterileceğinden, “Göster” butonunu stille ekstra olarak gizledim;

1
.goster { display:none; }

Ardından Sağ Sütunu ekledim;

1
2
3
4
<div class="sag-sutun">
<div>...</div>
<div>...</div>
</div>

Sağ Sütun için eklediğim stil;

1
2
.sag-sutun { width:220px; float:right; overflow:hidden; padding-right:10px; margin-right:40px; }
.sag-sutun div { width:200px; padding:10px; margin-bottom:10px; /*Buradan*/-moz-box-shadow:1px 1px 5px #e4e4e4; -moz-border-radius:10px; -webkit-border-radius:10px;/*Buraya CSS3! Her tarayıcıda çalışmaz!!!..*/ }

ve son olarak da Sol Sütunu ekledim;

1
2
3
<div class="sol-sutun">
...
</div>

Sol Sütun için eklediğim stil;

1
.sol-sutun { margin-right:280px; padding:10px; background:#fefee0; /*Buradan*/-moz-box-shadow:1px 1px 5px #e4e4e4; -moz-border-radius:10px; -webkit-border-radius:10px;/*Buraya CSS3! Her tarayıcıda çalışmaz!!!..*/ }

Sayfa için kullanacağımız XHTML kodları burada bitiyor. Buradan sonrasında jQuery ile yazacağımız fonksiyonlar çalışacak.

jQuery kodlarını vermeden önce hazırladığım fonksiyonların ne işe yaradığından bahsetmek istiyorum. Öncelikle ilk fonksiyonumuz, “Gizle” butonu tıklanınca “Sağ Sütun” ve “Gizle” buttonu kaybolacak, kaybolan sütun yerine “Sol Sütun“‘u genişletecek, genişleyecek ama bir yandan da sağdan “Göster” butonu kadar boşluk bırakacak. İkinci fonksiyonumuzda ise “Göster” butonu tıklanınca “Gizle” butonu kaybolacak, “Sol Sütun” belirttiğimiz ölçüde tekrar daraltılacak, “Sağ Sütun” ve “Gizle Butonu” gösterilecek, gösterilecek ama “Sağ Sütun“‘un sağına “Gizle” butonun sığıcağı kadar boşluk ekleyecek. Aman dikkat!!! Anlattıklarımdan kafanız karışmasın. Sadece anlattıklarımı hayal edip, “- tabi ya! böle yapınca bu olucak, şöle yapınca şu olucak.” gibisinden düşünebilirsiniz…

Neyse, yukarıda anlattıklarım hayal ürünü olmaktan çıkıp, kodsal olarak bu şekli alıyor;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(document).ready(function(){
$(".gizle").click(function(){
$(".gizle").animate({opacity:0}, 250).hide("slow");
$(".goster").animate({opacity:1}, 250).show("normal");
$(".sag-sutun").animate({marginRight:"-220px", opacity:0}, 250);
$(".sol-sutun").animate({marginRight:"40px"}, 250);
});
$(".goster").click(function(){
$(".gizle").animate({opacity:1}, 250).show("normal");
$(".goster").animate({opacity:0}, 250).hide("slow");
$(".sag-sutun").animate({marginRight:"30px", opacity:1}, 250 );
$(".sol-sutun").animate({marginRight:"270px"}, 250);
});
});

Herşeyi bu şekilde yaptıktan sonra, aşağıdaki gibi kodlara sahip olucaktınız;

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery İle "Gizle/Göster" Sütun ve Tablo Yapımı</title>
<script src="http://arsiv.pilli.com/jquery-1.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".gizle").click(function(){
$(".gizle").animate({opacity:0}, 250).hide("slow");
$(".goster").animate({opacity:1}, 250).show("normal");
$(".sag-sutun").animate({marginRight:"-220px", opacity:0}, 250);
$(".sol-sutun").animate({marginRight:"40px"}, 250);
});
$(".goster").click(function(){
$(".gizle").animate({opacity:1}, 250).show("normal");
$(".goster").animate({opacity:0}, 250).hide("slow");
$(".sag-sutun").animate({marginRight:"30px", opacity:1}, 250 );
$(".sol-sutun").animate({marginRight:"270px"}, 250);
});
});
</script>
<style type="text/css">
.ana-tablo { overflow:hidden; position:relative; padding-bottom:10px; }
.sag-sutun { width:220px; float:right; overflow:hidden; padding-right:10px; margin-right:30px; }
.sag-sutun div { width:200px; padding:10px; margin-bottom:10px; /*Buradan*/-moz-box-shadow:1px 1px 5px #e4e4e4; -moz-border-radius:10px; -webkit-border-radius:10px;/*Buraya CSS3! Her tarayıcıda çalışmaz!!!..*/ }
.sol-sutun { margin-right:270px; padding:10px; background:#fefee0; /*Buradan*/-moz-box-shadow:1px 1px 5px #e4e4e4; -moz-border-radius:10px; -webkit-border-radius:10px;/*Buraya CSS3! Her tarayıcıda çalışmaz!!!..*/ }
.gizle, .goster { font-size:25px; position:absolute; top:0; right:10px; background:#000; color:#fff; padding:5px 5px 8px 5px; line-height:0.2em; cursor:pointer; overflow:hidden; /*Buradan*/-moz-box-shadow:1px 1px 5px #e4e4e4; -moz-border-radius:5px; -webkit-border-radius:5px;/*Buraya CSS3! Her tarayıcıda çalışmaz!!!..*/ }
.goster { display:none; }
</style>
</head>
<body>
<div class="ana-tablo">
<div class="gizle">»</div>
<div class="goster">«</div>
<div class="sag-sutun">
<div>...</div>
<div>...</div>
</div>
<div class="sol-sutun">...</div>
</div>
</body>
</ html>

Farklı jQuery uygulamaları

angelsdemos | 02 February 2010 17:04

Artık jQuery’siz günümüz olmuyor. Web tasarımında hayatın o kadar içine girdi ki her sitede, her uygulamada jQuery uygulamaları bulunmakta. İşte birbirinden farklı yeni jQuery uygulamaları;

Slidedeck – Interactive Presentation Slider

Slidedeck, ücretsiz olarak sunulan jQuery slider uygulamasıdır. Projelerinizi, web sayfanızdaki önemli makale veya haberleri Slidedeck ile yayınlayabilirsiniz.

Visual Lightbox

Visual Lightbox, jQuery ile yapılan resimler için hazırlanmış bir tooltipuygulamasıdır. Sayfanızda bulunan resimleri ziyaretçi tıklandığında anında bir tooltip açılarak resmin orjinal halini görebilir.

DropCaptions

Resimlerinizin altına notlar eklemek isteyenler için hazırlanmış çok kullanışlı bir jQuery tooltip uygulaması. Resimlerin üzerine gelindiğinde aşağı sarkan kutuya resim hakkında açıklama yapabilirsiniz.