t-infection.com | tasarım oyuncakları, web teknolojileri » Js http://www.t-infection.com tasarım oyuncaklarımız ve web teknolojilerine dair kısa kısa... Sat, 02 Apr 2011 17:47:23 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 jQuery ile Açılır Paneller Oluşturmak http://www.t-infection.com/jquery-ile-acilir-paneller-olusturmak/ http://www.t-infection.com/jquery-ile-acilir-paneller-olusturmak/#comments Mon, 31 Aug 2009 01:36:36 +0000 webthese http://www.t-infection.com/?p=942 jQuery şüphesiz en çok bilinen ve kullanılan Javascript kütüphanesi. Bunda kısa kodlarla büyük işler başarmasının elbette çok büyük payı var. jQuery’nin sunduğu efekt, olay ve işlemler sayesinde çok az bir kodla muhteşem şeyler yapılabiliyor. Ben bu yazımızda çok kısa olarak jQuery ile web sayfalarımızda kullanmak üzere bir açılır panelin nasıl yapılacağını anlatacağım. Makalemizin sonunda neler yaptığımızı anlatacak ve çalışır bir örneğimizi sizlerle paylaşacağız.

(Makalemize başlamadan önce jQuery’nin temel dosyasını indirmiş olmanız gerekiyor. jQuery’nin kararlı son sürümünü kendi sayfasından indirebilir ve üzerinde uygulamalar geliştirebilirsiniz)

Öncelikle panelimizin görünümünü düzenleyen Css kodlarını yazarak başlayalım…Uygulamamızı yazmak için panel.html isimli bir web sayfası oluşturalım. Aşağıdaki kodları panel.html dosyamızın  Head bölümü içine yazarak kaydedelim.

.panelac {
width:100px;
padding:4px;
margin:0;
background:#2e83ff;
color:#fff;
}

.panel {
width:500px;
height:200px;
background:#000;
display:none;
color:#fff;
padding:10px;
}

Kodlarda gördüğünüz gibi iki adet Css sınıfı oluşturduk. Bunlardan .panelac isimli sınıf üzerine fare ile tıkladığımızda panelimizi görünür hale getirecek olan sınıftır. Diğer bir sınıf olan .panel isimli sınıfta ise panelimizin açıldığında nasıl bir görünümde olacağını belirledik. Klasik Css yazımının dışına çıkmadık. Yalnız .panel isimli sınıfın görünüm durumunu “display:none” parametre ve değeriyle görünmez olarak belirledik.

Css kodlarımız oldukça yalın ve anlaşılır sanıyorum. Şimdi bu iki sınıfı kullanarak jQuery kodlarımızı yazalım. Panelimizin açılır kapanır olması için biz jQuery’nin “slide” fonksiyonundan yararlanacağız. Aşağıdaki kodları panel.html sayfamızın  Head bölümüne kaydedelim.

$(document).ready(function(){

$(".panelac").click(function(){
$(".panel").slideToggle("slow");
$(this).toggleclass("active"); return false;
});
});

Dilerseniz şimdi yazdığımız Css ve Js kodlarını ve yaptığımız işlemi gösterecek olan Xhtml kodlarını tek bir sayfa üzerine yazalım. (Css kodlarında gördüğünüz #sayfa isimli id örneğimizin sayfa ortasında yer alması içindir, dilerseniz bu kodu da yazabilirsiniz)

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jQuery ile Açılır Paneller Oluşturmak</title>
  <script src="jquery.js"></script>

  <script>
$(document).ready(function(){

	$(".panelac").click(function(){
		$(".panel").slideToggle("slow");
		$(this).toggleclass("active"); return false;
	});
	});

  </script>
  <style>
  #sayfa {margin:0 auto; width:500px; padding:0;font:12px arial, verdana, sans-serif;}
  .panelac {width:100px;padding:4px;margin:0;background:#2e83ff;color:#fff;}
  .panel {width:500px;height:200px;background:#000;display:none;color:#fff;padding:10px;}
  </style>
</head>
<body>
<div id="sayfa">
<div class="panel">Burada Panelimizin İçeriği Bulunmakta</div>
<div class="panelac">Panel Aç</div>
</div>
</body>
</html>

Javascript kodunda gördüğünüz gibi öncelikle .panelac isimli sınıfa tıkladığımızda (click) neler olacağını yazıyoruz. Burada .panel isimli sınıfımız jQuery’nin slideToggle fonksiyonunu kullanarak görünür hale gelecek. Fonksiyon satırında parantez içinde hangi hızda açılacağını fast, slow gibi değerlerle yazabiliyoruz. Dilersek bu alanda milisaniye cinsinden değerlerde yazabiliriz. (1000, 500 gibi) Javascript kodumuzun son satırında işlemin return false ile terse döndürülmesini istiyoruz. Yani .panelac isimli sınıfa yapılacak sonraki bir fare tıklaması ile panelimiz kapanacak.

Örnek sayfayı açarak panelimizin çalışır halini görebilirsiniz. Bu makale ve uygulamayı hazırlarken jQuery’nin kendi belgelerinden ve Türkçe en faydalı jQuery kaynağı olarak gördüğüm Erhan kardeşimin ilgili yazısından faydalandım. Umarım sizler için faydalı olmuştur.

ÖRNEK SAYFA

]]> http://www.t-infection.com/jquery-ile-acilir-paneller-olusturmak/feed/ 9 Adobe Dreamweaver CS4 ile Form Alanlarının Kontrolü http://www.t-infection.com/adobe-dreamweaver-cs4-ile-form-alanlarinin-kontrolu/ http://www.t-infection.com/adobe-dreamweaver-cs4-ile-form-alanlarinin-kontrolu/#comments Sat, 22 Aug 2009 20:37:47 +0000 webthese http://www.t-infection.com/?p=920 Adobe Dreamweaver kendi görüşüme göre en iyi görsel web editörlerinden biri. Özellikle Cs serisinde eklenen yeni kontrol ve özelliklerle tasarımcıların işini büyük oranda kolaylaştırıyor. Bünyesine katılan Spry Js kütüphanesi sayesinde menü, navigasyon ve belli başlı web elementlerinin kontrolü oldukça basit bir şekilde yapılabiliyor. Bu makalemizde çok basit ve hızlı bir şekilde form alanlarının kontrolünü anlatacağız.

Form alanlarında biz aksini belirtmedikçe tüm alanların doldurulmasına gerek yoktur. Bu nedenle tasarımda formlar her zaman üzerinde iki kere düşünülmesi gereken elemanlardır. Formda istenilen bir değerin girilmemesi durumunda verilecek olan bir uyarı kullanıcı/ziyaretçiyi bilgilendirir ve buna göre hareket etmesi sağlanır. Bilgi girişinin sağlandığı bu elemanlar bu yüzden her zaman suistimale açıktırlar. Adobe Dreamweaver CS4 kullanarak önce basit bir form yapacağız ve sonra bu formda boş bırakılan yerlerde bir uyarı mesajının görünmesini sağlayacağız. Dilerseniz hemen başlayalım.

Öncelikle Dreamweaver’da boş bir Html dosya açalım. Sonra bir form oluşturalım. Bu formda kullanıcıdan adını ve e-posta adresini yazmasını isteyelim. 2 tane metin girdi elemanı ekleyelim. Sonrasında form menüsünden gönderme butonumuzu koyarak formumuzu tamamlayalım.

Hemen hemen aşağıdaki gibi bir form alanına sahip olmamız gerekiyor.

Şimdi fare ile formumuzun Ad soyad isteyen İnput bölümüne bir kere tıklayıp seçili hale getiriyoruz. Bu aşamadan sonra üst menüden Spry bölümüne geliyoruz. Burada Spry Validation Text Field butonuna tıklıyoruz. Böylece metin girdi alanımızda Spry js kullanarak bir form kontrolü sağlamış olduk. Aynı işlemi e-posta adresini istediğimiz metin girdi alanı için de yapalım.

Dokümanı .html uzantılı olarak kaydedelim ve tarayıcımızda izleyelim. Ad soyad veya e-posta alanlarından birini boş bırakıp formu onaylamaya çalıştığınızda form ögesinin yanında “A value is required” mesajı alacağız.

Dikkat ettiyseniz forma Text validation opsiyonunu eklediğimizde SpryValidationTextField.js ve SpryValitadionTextField.css isimli iki dosya da oluşuyor. Formun kontrolünü sağlayan ana js dosyası ve stilleri barındıran stil dosyası da çalışmamızın olduğu dizinde kayıt oluyor.

Stil dosyasında yapacağınız değişikliklerle uyarı mesajının daha iyi görünmesini sağlayabilir ve görünümünü özelleştirebilirsiniz. Sadece metin girdi alanlarında değil Textarea, Radio buton gibi diğer form ögelerinde de aynı kontrolü sağlayabilirsiniz. Umarım yararlı olur.

]]> http://www.t-infection.com/adobe-dreamweaver-cs4-ile-form-alanlarinin-kontrolu/feed/ 5 20 Muhteşem Javascript Navigasyon Tekniği ve Örnekleri http://www.t-infection.com/20-muhtesem-javascript-navigasyon-teknigi-ve-ornekleri/ http://www.t-infection.com/20-muhtesem-javascript-navigasyon-teknigi-ve-ornekleri/#comments Sat, 02 May 2009 13:50:30 +0000 webthese http://www.t-infection.com/?p=739 Sixrevisions.com yine güzel bir derlemeye imza atmış. Çeşitli Js kütüphaneleri ve salt Js ile yapılmış olan navigasyon çeşitlerinden 20 tanesini derlemişler. Bazılarını ben de görmemiştim, iyi bir kaynak oldu.

]]> http://www.t-infection.com/20-muhtesem-javascript-navigasyon-teknigi-ve-ornekleri/feed/ 1 Resimlerle Çalışanlar için 14 jQuery Eklentisi http://www.t-infection.com/resimlerle-calisanlar-icin-14-jquery-eklentisi/ http://www.t-infection.com/resimlerle-calisanlar-icin-14-jquery-eklentisi/#comments Sat, 14 Mar 2009 14:56:06 +0000 webthese http://www.t-infection.com/?p=695 SixRevisions yine güzel bir derlemeye imza atmış. Resimler üzerinde etkili olan ve harika işler çıkaran 14 jQuery eklentisini (plugin) derlemişler. Gözatmanızda fayda var…

]]> http://www.t-infection.com/resimlerle-calisanlar-icin-14-jquery-eklentisi/feed/ 4 Atölye: Mootools ile Akordion Menü Yapımı http://www.t-infection.com/atolye-mootools-ile-akordion-menu-yapimi/ http://www.t-infection.com/atolye-mootools-ile-akordion-menu-yapimi/#comments Sat, 24 Jan 2009 15:10:59 +0000 webthese http://www.t-infection.com/?p=596 menuonizleMootools çalışmalarımda sıkça kullandığım ve çokta sevdiğim bir Javascript kütüphanesidir. Basit ve esnek yapısı sayesinde birçok dinamik web ögesini Mootools ile oluşturabilirsiniz. Ben bu makalemizde Mootools’un Akordion özelliğini kullanarak nasıl bir Akordion menü yapacağımızı anlatacağım. Yazımızın sonunda (ve gönderi yanındaki resmimizde de) yapmış olduğumuz menüye ait önizlemeyi görebilir dilerseniz de bilgisayarınıza indirip kullanabilirsiniz.

Herşeyden önce başlıktada belirttiğimiz gibi biz bu menüyü Mootools kütüphanesini kullanarak oluşturacağız. O yüzden Xhtml dokümanımızda öncelikle Mootools’u çağıracak olan kodu yazıyoruz. Bu sayede sayfamız Mootools betiğini okuyacak ve işlemi buna göre yapacaktır. Bu kodları Head bölümüne yazıyoruz.

<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/akordion.js"></script>

Sonrasında menümüzü görsel anlamda şekillendirecek olan stil dosyasını tanımlıyoruz. Stil dosyasında menümüzün ana birimleri ve alt birimlerinin stilleri yer alıyor.

<link rel="stylesheet" href="style/style.css" type="text/css" />

Bu aşamadan sonra Body etiketi içinde sayfamızda menümüzü göstermek istediğimiz yerde menümüzün ana Xhtml kodlarını giriyoruz. Bu aşamadan sonra menümüz görünecek ve kullanıma hazır hale gelecektir.

<div id="accordion">
	<h3 class="toggler"><a href="#" class="anasayfa">Anasayfa</a></h3>
	<div class="element">

	<ul>
	<li><a href="#">Hakkımızda</a></li>
	<li><a href="#">Atölye</a></li>
	<li><a href="#">Tavsiyeler</a></li>
	<li><a href="#">İletişim</a></li>
	</ul>
	</div>

	<h3 class="toggler"><a href="#" class="kategori">Kategoriler</a></h3>
	<div class="element">
	<ul class="kategori">
	<li><a href="#">Ajax</a></li>
	<li><a href="#">Photoshop</a></li>
	<li><a href="#">Dreamweaver</a></li>
	<li><a href="#">Xhtml/Css</a></li>
	<li><a href="#">Php/Mysql</a></li>
	</ul>
	</div>

	<h3 class="toggler"><a href="#" class="baglanti">Bağlantılar</a></h3>
	<div class="element">
	<ul class="link">
	<li><a href="#">Mootools</a></li>
	<li><a href="#">Google</a></li>
	<li><a href="#">Adobe</a></li>
	<li><a href="#">Facebook</a></li>
	<li><a href="#">Twitter</a></li>
	<li><a href="#">FrienFeed</a></li>
	</ul>
	</div>

	<h3 class="toggler"><a href="#" class="besleme">Rss Takip</a></h3>
	<div class="element">
	<ul class="rss">
	<li><a href="#">Son Gönderiler</a></li>
	<li><a href="#">Son Yorumlar</a></li>
	</ul>
	</div>

</div>

Menünün işleyişi hakkında kısa bir bilgi vermek istiyorum. Menümüzü çağıran ve akordion fonksiyonunu tanımlayan akordion.js dosyasında Mootools’dan yararlanılarak h3 etiketiyle ilişkili bir Css sınıfı oluşturuluyor. Bu sınıf toggler özelliğini kullanarak menü biriminin aşağı doğru açılmasını sağlıyor. H3 etiketi başlık olarak kullanılıp tıklandıktan sonra aşağıda yer alan menü birimi gösteriliyor. Menü biriminin görüneceği alanda yine bir Css sınıfı olan .element işin içine giriyor ve tıklandıktan sonra açılan alanda .element sınıfına ait veriler gösteriliyor. Menünün ana görünümü başlatmak içinse #Akordion isimli div id’si yazılıyor. Menünün genişliğini bu alanda sınırlayabilirsiniz.

Menünün kodları içinde (ister Xhtml ister stil) istediğiniz kadar değişiklik yapabilirsiniz. Menü stil dosyasında ben birçok ekleme yaptım ve yan taraflarına da bir takım kısa açıklamalar yazdım. Bu da sizin için faydalı olacaktır.

AKORDİON MENÜ ÖNİZLEME AKORDİON MENÜ İNDİR (36kb)

]]> http://www.t-infection.com/atolye-mootools-ile-akordion-menu-yapimi/feed/ 11