Tutorialzine’de gördüğüm basit AJAX Yorum formunu sizlerle paylaşmak istedim..
Yorum formunun özelliği kendi içerisinde belirli bir kaç PHP formatında dosya ile çalışan, session kontrollü ve aynı zamanda web 2.0 yorum formları oluşturmak aslında çok kolaymış. Hem de bunları AJAX formatında güncelleyen arkadaşımın ders anlatım sayfasına buradan ulaşabilirsiniz. Continue reading
Merhabalar.. Bugün sizlere, çoğu yabancı ve birkaç tane de türk blogunda yer alan, sonraki konu ya da yorumlara atla gibi jQuery ScrollTo Pluginini nasıl kullanırız onu göstereceğim.. Zaten şurada mevcut olan jQuery Pluginimizi öncelikle indirmemiz gerekiyor. Ve de jQuery scriptimizi şuradan indirebilirsiniz. Continue reading
404 Hata sAyfası
Awesome İletişim Formu kullanışlı ve bir o kadar da kolaykullanımıyla web sitelerinizde kullanabileceğiniz, AJAX dolu bir scripttir.
Yüklemesi de çok basittir sadece config ayarlarıyla gerçekten göz doldurucu bir iletişim formuna sahip olabilirsiniz. Continue reading
Gelecek zamanlara php derslerinde göreceğimiz, ve php bilen arkadaşlarımın da anlayacağı gibi, başka bir sayfadaki bilgileri, verileri yada herhangi bir nesneyi o an bulunduğumuz sayfada Ajax ile göstermeye çalışacağız.. Bunun için birkaç jQuery Koduna ihtiyac duyduk.Örnekte kullandığımız jQuery Metodları;
appendTo
Continue reading
Merhaba arkadaşlar.. Geride kalan ve haberdar olamayan arkadaşlar için böyle bi yapışkan konu ekleyelim dedim.. Her yeni jquery video dersinde bu konu güncellenecektir..
Videolarda ve ders anlatımlarında hatamız varsa affola, ve aynı şekilde hatamız varsa söyleyin düzelteyim..
Continue reading
Techime.com sitesi bir blogdan ziyade daha çok bir haber alıcısı. Tasarım ve ilham kategorileri diğer bloglardaki en popüler linkleri ve en taze haberleri alarak size zaman kazandırıyor. İlginç ve iyi bir proje.
Techime / Webdesign
Noupe blogu geçtiğimiz günlerde SmashingMagazine tarafından satın alındı. Bu sebeple sitede önümüzdeki günlerde daha da kaliteli yazıları görmek üzere olduğumuzu söylemek yerinde olur. Noupe, tasarımcılar ve web geliştiricileri için CSS, AJAX, JavaScript, web tasarımı, grafik tasarımı, tipografi, reklamcılık ve daha diğer pek çok kategoride yazılar site üzerinde yer alıyor. Continue reading
Demoyu incelediğinizde gerçekten hayran bırakan ve extra seçim aralıklarıyla, menü açıklamaları ve ajax kullanımıyla göz kabartan menü özellğine sahip.. Şimdiye kadar zingocan.com da verdiğimiz dropdown menülerden en iyisi diyebilirim..Ajax menü, Submenü ve submenü başlıkları, menü içerisinde form oluşturabilme ve header image kullanabilme şansımız var…Ayrıca iki çeşit renk düzenine sahip demo1 ve demo 2 de inceyebilirsiniz.
Hemen scrptin kullanımına geçelim..
optional: jquery.metadata.plugin
optional: jquery.hoverIntent.plugin
<code>$(".myMenu").buildMenu(
{
template:"menuVoices.jsp",
additionalData:"",
menuWidth:200,
openOnRight:false,
menuSelector: ".menuContainer",
iconPath:"ico/",
hasImages:true,
</code><code> fadeInTime:200,
fadeOutTime:100,
</code><code>adjustLeft:2,
adjustTop:10,
opacity:.95,
shadow:true,</code><code>
closeOnMouseOut:true,</code><code>
closeAfter:500,
minZindex:200,
hoverIntent:0
});</code>
(bu bağlam opera sistemlerinde tam çalışmayabilir)
<code>$(document).buildContextualMenu(
{
template:"menuVoices.html",
menuWidth:200,
overflow:2,
menuSelector: ".menuContainer",
iconPath:"ico/",
hasImages:false,</code><code>
</code><code> fadeInTime:200,</code>
<code> fadeOutTime:100,</code>
<code> adjustLeft:0,
adjustTop:0,
opacity:.99,
shadow:true,
</code><code>onContextualMenu:function(o,e){}</code>
<code> });</code>
<code><!-- menu voices --><div><table class="rootVoices" cellspacing='0' cellpadding='0' border='0'><tr> <td menu="menu_12" >ajax menu 1</td> <td menu="menu_2" >menu 2</td> <td menu="menu_3" >menu 3</td> </tr></table> </div> </code> <!– end menu voices –>
<code><!-- example code --><div id="menu_1" class="menu"><a rel="title" >title menu_1.1</a> <!-- menuvoice title-->
<a href="../mb_carusel/carousel.html" target="_blank" img="image.gif" >menu_1.1 (href)</a> <!-- menuvoice with href-->
<a action="document.title=('menu_1.2')" >menu_1.2</a> <!-- menuvoice with js action-->
<a rel="separator"></a> <!-- menuvoice separator-->
<a action="document.title=('menu_1.3')" disabled=true>menu_1.3</a> <!-- menuvoice disabled-->
<a action="document.title=('menu_1.4')" menu="menu_1" img="image.png">menu_1.4</a><!-- menuvoice with js action, image and submenu-->
</div></code>
Bölgelerini kendinize göre değişerek sonuca ulaşınız..Teşekkürler..İşte Örnekler;
Web sayfalarını zenginleştirmek için kullanılan içeriklerden biri de “content slider” en yakın anlamıyla kayan içerik uygulamasıdır. Bu gibi örneklere bir çok WordPress blog tasarımında da rastlamış olabilirsiniz. Continue reading
AJAX Timer Kontrol web sayfasında herhangi bir güncelleme görevi gerçekleştirmek için zaman aralığı belirleyen bir kontroldür. Bizim belirlediğimiz periyotlarla aktif olarak sürekli postback yapmamızı sağlar. GenllikleUpdatePanellerle birlikte kullanılırlar. Sayfamızın kısmi olarak güncellenmesini sağlarlar. Örnek vermek gerekirse sayfa içinde saat görüntülemek, slayt göstermek, bir oyun içinde topu sürekli hareket ettirmek yada sayfa içinde yapılacak bir işlem için bekleme yapmak gerktiğinde kullanılabilecek önemli bir kontroldür.
Daha iyi kavrayabilmemiz açısından bu kontrolü basit bir örnekle ele almaya çalışacağız. Bu örnekte yapacağımız şey sayfanın başında saniyeleri gösteren bir saat ve hemen altında bizim hazırladığımız klasör içindeki resimlerden beş saniyede bir rasgele seçilerek oluşturulan bir slayt.
VisualStudio içinde projemizi AJAXEnabledWebApplication olarak başlatıyoruz. Dizayn sayfasına bir adet update panel, panel içine bir tane Label ve bir tanede Timer kontrolü sürüklüyoruz. Bu kontrolün özelliklerine bakılınca Interval özelliğini görüyoruz. Bu özellik Timer’ın kaç milisaniyede (saniyenin binde biri) bir tetikleneceğini gösteriyor.
Event (olay)’larına baktığımızda Tick görüyoruz bunun karşısına iki kez tıkladığımızda Default.aspx.cs sayfasına
protected void Timer1_Tick(object sender, EventArgs e)
{
Label1.Text = DateTime.Now.ToString();
}
kod parçasını yazarak projemizi çalıştırdığımızda sayfamızın içinde artık hersaniye değişen sistem saatimizi gösteren bir saatin mevcut olduğunu görürüz.
Sayfamıza bir tane de slayt ekleyelim. Bunun için önce proje içine bir Resimler klasörü ekleyelim. Resimlerin rasgele seçilmesi sağlayabilmek için resim isimlerinin sıralı olması gerekmekte. Örneğin resim_1, resim_2, resim_3, … gibi. Dizayn sayfamıza 1 tane daha update panel, timer kontrol ve image ekliyoruz. ImageUrl tanımlıyoruz.
<asp:Image ID=”Image1″ runat=”server” ImageUrl=”~/Resimler/resim_1.gif” />
Timer Kontrolün resimleri 5 saniyede 1 değiştirmesi için için Timer2’nin Interval özelliğine 5000 yazıyoruz. Update panelin Triger Kolleksiyonunu aşağıdaki gibi düzenliyoruz.
Timer2’nin Tick eventi üzerine iki kez tıkladıktan sonra Default.aspx.cs sayfası içine
protected void Timer2_Tick(object sender, EventArgs e)
{
Random RasgeleResimlerim = new Random();
int i = RasgeleResimlerim.Next(1, 5);
Image1.ImageUrl = System.String.Concat(“Resimler/resim_”, i.ToString(), “.gif”);
}
Kod bloğunu yazıyoruz. Burada Random sınıfından yararlanarak i değişkenine bir ile beş arasında bir değer tanımlıyoruz (bu sayıda olmasının nedeni resim klasörüne beş tane resim koymam) sonrasında da resimlerin görüntülenmesi amacı ile bu değişkeni Image1.ImageUrl ile dosya yolu bulmasında kullanıyoruz.
Projeyi çalıştırdığımızda sayfanın başında bir tarih saat göstergesi ve alttada beş saniyede değişen bir slayt yer alıyor.