Archive for JavaScript
Mayıs 24, 2010 at 20:55 · Kategori: JavaScript, PHP
Bir yandan projeler, diğer yandan bilgisayar mühendisliğinin bölüm başkanlığını yapmam sebebiyle diğer öğrenci arkadaşlardan gelen sorular derken bloguma yazmaya vakit bulamadığımı itiraf etmeliyim. Bu yoğun dönem içerisinde web programlama dersinin son ödevi olan ajax, php ve javascript kullanarak bir hesap makinesi yapmamız istenmişti. Sizin de dikkatlice incelemeniz koşuluyla bulabileceğiniz bir hata dışında, sorunsuz çalışan bir proje oldu diyebilirim. Herkesin yararlanabilmesi adına blogumda paylaşıyorum.
Aşağıdaki bağlantı aracılığıyla projeyi indirebilirsiniz.
Projeyi indir
Ocak 2, 2010 at 20:40 · Kategori: JavaScript, Jquery
Merhabalar,
Birçok sitede yazıların devamını okuyabilmek için bir seçenek bulunur ve bu seçenek genellikle konunun tümünün başka bir sayfada açılmasını sağlar. Ancak eğer biz konunun devamını yine aynı sayfada görmek istersek, burada Javascript kütüphanelerinden biri olan Jquery yardımımıza koşuyor. Sözü daha fazla uzatmadan kodumuzu yazmaya başlayalım.
1) Öncelikle xhtml ve css ile basit bir şablon oluşturalım.
<html>
<head><title>Jquery ile Read More Methodu</title>
<style type="text/css">
#mesajKutusu { width:400px; border:2px solid #000; padding:10px} /* En dış çerçeve ( Mesaj Kutusu ) */
#mesajKutusu #mesaj p.baslik { font-weight:bold; font-size:18px; font-decoration:underline; color:red; }
#mesajKutusu #mesaj .m2 { display:none; } /* Varsayılan olarak yazının devamının gösterilmemesi sağlıyoruz */
#mesajKutusu #mesaj p.readMore { font-size:12px; color:#000; } /* "Devamını oku" kısmı için yaptığımız görünüm ayarı */
</style>
</head>
<body>
<div id="mesajKutusu">
<div id="mesaj">
<p class="baslik"> Jquery ile read more methodu </p>
<div class="m1">1923 yılında Trabzon'da ilk resmi lig maçları oynanmaya başlandı. İlk sezon İdmanocağı şampiyon olmuştu. Bunu 1923-24,1924-25 sezonlarında Lise takımının arka arkaya şampiyonlukları izledi. 1925 sezonunda yine İdmanocağı şampiyon olurken, 1929 yılına kadar da önce Lise, arkasından Muallim Mektebi daha sonra da Ticaret Lisesi takımları mutlu sona ulaştılar.</p>
<div class="m2">İdmanocağı ile İdmangücü arasındaki büyük rekabet 1930dan sonra had safhaya ulaştı. 1929-30dan sonra 5 kez arka arkaya İdmanocağı'nın şampiyon olmasından sonra 1934-35 sezonundan itibaren İdmangücü takımı tam 7 yıl arka arkaya şampiyon olarak bu iki takım arasındaki rekabeti büsbütün alevlendirmişti.</div>
<p class="readMore"><a href="#">Devamını Oku...</a></p>
</div></div>
</body>
</html>
2) Jquery kütüphanesini şablonumuza çağıralım.
<script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script>
[/html]
Not: Bu kodu "head" tagları arasına ekleyiniz ve eklemeden önce indirdiğiniz Jquery kütüphanesinin sürümünün kullandığım sürüm ile aynı olmasına dikkat ediniz. Eğer indirdiğiniz sürüm farklı ise, ilgili sürümünün adını src kısmında gereken yere yazınız.
Yazının Devamı
Ocak 1, 2010 at 22:40 · Kategori: JavaScript, Jquery
Fare imleci üzerine gelindiği zaman saydamlaşan, imleç kalktığında ise tekrar eski haline dönen bir menü oluştaracağız. Jquery’nin “animation” methodunu ve CSS’nin opacity (saydamlık) özelliğini kullanarak bu işlemi en kolay yoldan gerçekleştirmeye çalışacağız.
İşe menümüzü oluşturmakla başlıyoruz.
1.xhtml ile menümüzü oluşturuyoruz
<html>
<head><title>Jquery ile saydamlaşan menü</title></head>
<body>
<div id="menu">
<ul>
<li><a href="#"> Anasayfa </a></li>
<li><a href="#"> JavaScript </a></li>
<li><a href="#"> Visual Basic </a></li>
<li><a href="#"> C sharp </a></li>
</ul>
</div>
</body>
</html>
2. Css ile menümüzü dizayn ediyoruz
<style type="text/css">
#menu ul { list-style:none; text-align:center }
#menu ul li { float:left; width:100px; background-color:#BBBDE3; border-right:1px solid #FFF; }
#menu ul li a { text-decoration:none; color:#FFF }
</style>
Bu kodları yazdıktan sonra menümüzü elde etmiş olacağız.
Şimdi sıra Jquery ile bu menüyü saydamlaştırmaya geldi. Fare imlecinin bulunduğu menü elemanının saydamlaşmasını sağlayacağız.
Yazının Devamı
« Previous entries
