JS ve jQuery’de Girilen Değerleri Büyük/Küçük Yapmak

Anlık olarak kullanıcıdan aldığımız verilerde tamamı büyük ya da tamamı küçük olmasını isteyebiliriz. Bunu bir çok yolla yapabiliriz, ama daha kullanıcı girerken yapıyor olmamız bir avantaj.. Peki nasıl yapacağız?

Örneğin bir inputumuz olsun;

<input type="text" />

Bu input, keyup olduğunda bunu yakalayalım ve mevcut değerleri toUpperCase() ile büyütelim ve yeniden değerini yazdıralım.

$('input').keyup(function(){
    this.value = this.value.toUpperCase();
});

Ya da mesela büyütmek yerine küçültmek istersek bu seferde toLowerCase() işlemini uygulayacağız.

this.value = this.value.toLowerCase();

Hepsi bu kadar, bol kodlu günler.

 

JavaScript: indexOf()

indexOf() metodu dizi içerisinde eleman arar ve var ise eleman sırasını geriye döndürür.
Eğer yok ise geriye -1 değeri döner.
Eğer aranan eleman birden fazla kez bulunduysa ilk bulunduğu sıra geriye döner.

Not: Sıra değeri 0′dan başlar. Buna göre ilk dizi elemanı 0. sıradadır.

Örnek kullanımı;

var diller = ["php","asp","c#","c++","vb.net","javascript"];
alert( diller.indexOf('c#') ); // Çıktı: 2

 

JavaScript: length

Length özelliği dizi elemanlarının sayısını bulmak için kullanılır.

Örnek vermek gerekirse;

var dizi = ["tayfun","erbilen","test","erbilen.net"];
alert( dizi.length );

Sonuç olarak bize 4 değeri dönecektir, yani dizinin 4 elemanı olduğunu geri döndürecektir.

 

JavaScript: select()

Select() yöntemi, form nesneleri içerisindeki yazıyı seçmek için kullanılır.
Kullanıma göre tıklanınca ya da doğrudan nesne içerisinde ki değerler seçili halde olabilir.

Tıklanınca Yazıyı Seçtirmek

Bunun için onclick=”” niteliğini kullanacağız. İstersek bir fonksiyon çalıştırabiliriz ancak bu basit bir örnek olacağı için doğrudanthis.select() dememiz yeterli olacaktır. Burada this o an ki nesneyi temsil etmektedir.

<input type="text" name="test" value="Tayfun Erbilen" onclick="this.select()" />

Doğrudan Yazıyı Seçtirmek

Herhangi bir işlem yapmadan doğrudan yazıyı seçtirmek istersek öncelikle form nesnesini javascript ile seçmeli ve daha sonraselect() metodunu uygulamalıyız.
Nesneyi kolayca seçebilmek için bir id atayalım ve daha sonra örneğimizi tamamlayalım.

<script type="text/javascript">
document.getElementById('test').select(); // doğrudan yazıyı seçtik
</script>

<input type="text" id="test" name="yazi" value="Tayfun Erbilen" />

 

Sınıf İçerisindeki Event’larda Bind İşlemi (MooTools)

Hazır aklımdayken, unutmadan yazmak istedim.. MooTools sınıf yapısına dayalı bir framework olduğu için genelde sınıf içerisindeevent‘lar tanımlıyoruz.. Ve bu event‘lar içerisinde sınıf içerisindeki herhangi bir metoda erişmek için this kullanmamız gerekiyor.. Fakat ancak velakin event içerisinde this o event‘ın this‘i olduğundan sınıf içerisindeki metodlara this kullanarak erişemiyoruz.. İşte böyle bir durumda this‘i bind etmemiz gerekecek.. Peki nasıl yapacağız?

Bind Edilmemiş Hali

/* ... diğer class kodları */

create: function(){

     $('close_button').addEvent('click', function(){
         this.close(); /* sınıfa erişemediğimiz için hata alacağız */
     });

}

/* diğer class kodları ... */

Bind Edilmiş Hali

/* ... diğer class kodları */

create: function(){

     $('close_button').addEvent('click', function(event){
         this.close(); /* düzgün bir şekilde çalışacak */
     }.bind(this));

}

/* diğer class kodları ... */

Burada event’ın nesnesine fonksiyon’a parametre girerek erişebiliriz. Artık böyle bir sorunla karşılaşırsak bu şeklide çözeceğimizi öğrenmiş olduk 

Not: Başka yolları var ise, yorum olarak belirtirseniz bende öğrenmiş olurum. (Değişkene aktarıp kullanmak dışında tabi ki)

 

MooTools ile Tab Örneği Yapalım

MooTools’a yeni yeni başladığımı birkaç önceki yazımda söylemiştim.. Bu yüzden sürekli örnekler yaparak pekiştirmeye çalışıyorum.. Ve genelde örnekleri basit tutarak anlaşılır kılıyorum.. jQuery’de onlarca kez örneğini yaptığım tab uygulamasını bir kezde mootools ile nasıl yapabileceğimizi anlatacağım bu makalede  Umarım mootools’a yeni başlayanlar için açıklayıcı oluyordur bu makaleler.MooTools’a yeni yeni başladığımı birkaç önceki yazımda söylemiştim.. Bu yüzden sürekli örnekler yaparak pekiştirmeye çalışıyorum.. Ve genelde örnekleri basit tutarak anlaşılır kılıyorum.. jQuery’de onlarca kez örneğini yaptığım tab uygulamasını bir kezde mootools ile nasıl yapabileceğimizi anlatacağım bu makalede  Umarım mootools’a yeni başlayanlar için açıklayıcı oluyordur bu makaleler.

Adım 1

İlk olarak her zaman ki gibi mootools kütüphanemizi aşağıdaki bağlantıdan indiriyoruz;
http://mootools.net/download

Adım 2

Gerekli dosyalarımızı oluşturuyoruz.
– index.html
– style.css
– custom.js
– mootools.js (kütüphane)

Adım 3

index.html‘i açalım.. Standart html etiketlerimizi girerek diğer dosyalarımız head içerisinde çağıralım.

<!DOCTYPE HTML>
<html lang="en-US">
<head>

	<meta charset="UTF-8">
	<title>MooTools Tab Örneği (DEMO)</title>

	<!-- style -->
	<link rel="stylesheet" href="style.css" />

	<!-- scripts -->
	<script type="text/javascript" src="mootools.js"></script>
	<script type="text/javascript" src="custom.js"></script>

</head>
<body>

</body>
</html>

Adım 4

Tab için kullanacağımız HTML yapısını oluşturalım;

<div>
	<ul>
		<li><a href="#tab1">1. Tab</a></li>
		<li><a href="#tab2">2. Tab</a></li>
		<li><a href="#tab3">3. Tab</a></li>
	</ul>
	<div id="tab1">
	1. tab içeriği
	</div>
	<div id="tab2">
	2. tab içeriği
	</div>
	<div id="tab3">
	3. tab içeriği
	</div>
</div>

Biz burada idTab örneği yapacağımız için her tab içeriğininde id’si bulunmakta.. Ek olarak tab listesinde de a nesnelerinde href değeri olarak bu id’ler belirtilmiş.

Adım 5

Tab görünümü için basit bir CSS hazırlayalım;

* {
	padding: 0;
	margin: 0;
	list-style: none;
	border: 0;
	font-family: Arial;
	text-decoration: none
}

/*____ TAB _____*/
.tab {
	padding: 25px
}
.tab ul.tab_list {
	overflow: hidden;
	margin-bottom: 15px
}
.tab ul.tab_list li {
	float: left;
	margin-right: 10px
}
.tab ul.tab_list li a {
	display: block;
	padding: 10px 25px;
	border: 1px solid #ddd;
	border-top-color: #aaa;
	color: #111;
	border-radius: 2px;
	box-shadow: 0 2px 2px 0 #ddd inset
}
.tab ul.tab_list li a:hover {
	background-color: #f9f9f9
}
.tab ul.tab_list li.active a {
	background: #eee;
	box-shadow: none;
	border-color: #ccc
}
.tab .tab_content {
	border: 1px solid #ddd;
	border-top-color: #aaa;
	padding: 10px;
	font-size: 14px;
	line-height: 20px
}

Buraya kadar her şey tamam ise, şuan ki görüntü aşağıdaki gibi olmalı;

Adım 6

custom.js dosyamızı açalım ve sayfamız hazır olduğunda bizde hazırız komutunu yazalım..

window.addEvent('domready', function(){
	/* .. */
});

Adım 7

Evet artık tab için gerekli kodları yazmaya başlayabiliriz.. Ben tab sınıfını döngüye sokacağım.. Böylece birden fazla tabı tek kodla kullanabileceğiz.. İlk olarak tüm tab sınıflı nesneleri $$ ile seçip each döngüsüne sokalım.

$$('.tab').each(function(elem, index){
	/* .. */
});

Adım 8

tab nesnesi içindeki tıklanacak tüm li nesnelerini ve tüm tab içerik nesnelerini getElements() ile seçip değişkenlere aktaralım. Burada bir hatırlatma yapmak gerekirse getElement() sadece bir nesne için getElements() ise tüm nesneler için kullanılıyor..jQuery‘deki find() gibi düşünebilirsiniz 

var tabLi = elem.getElements('ul.tab_list li'),
    tabContent = elem.getElements('.tab_content');

Adım 9

Sıra geldi ilk liste’ye active sınıfı ekleyip ilk tab içeriği hariç diğerlerini gizlemeye 

tabLi.filter(':first-child').addClass('active');
tabContent.setStyle('display','none');
tabContent[0].setStyle('display','block');

jQuery‘de de filter()‘ı aynı mantıkta kullanıyoruz, burada da aynı mantıkta işliyor. tabContent[0] burada ilk tab içeriğini temsil ediyor.. Şöyleki; getElements() bize seçtiği nesneleri dizi olarak döndürdüğü için [0] ilk elemanı temsil ediyor.

Adım 10

Şimdide li’lere tıklama event’ını yazalım;

tabLi.addEvent('click', function(){
	/* .. */
});

İlk olarak yapmamız gereken şey a’nın içerisindeki href değerini almak olacak;

var idTab = this.getElement('a').get('href');

Daha sonra tüm li’lerin aktif sınıfını silelim;

tabLi.removeClass('active');

Tıklanana aktif sınıfını ekleyelim;

this.addClass('active');

Ve içeriklerin hepsini gizleyip id’si eşleşen içeriği gösterelim;

tabContent.setStyle('display','none').filter(idTab).setStyle('display','block');

Evet, gördüğünüz gibi çok basit bir şekilde tab uygulamasını hazırlamış olduk.

indexTab Örneği

Eğer idTab değilde indexTab örneği yapmak isterseniz.. Kodları şöyle değiştirmeniz yeterli;

window.addEvent('domready', function(){
	$$('.tab').each(function(elem, index){
		var tabLi = elem.getElements('ul.tab_list li'),
			tabContent = elem.getElements('.tab_content');
		tabLi.filter(':first-child').addClass('active');
		tabContent.setStyle('display','none');
		tabContent[0].setStyle('display','block');
		tabLi.addEvent('click', function(event){
			var index = tabLi.indexOf(this); /* tıklanan li'nin index değeri */
			tabLi.removeClass('active');
			this.addClass('active');
			tabContent.setStyle('display','none');
			tabContent[index].setStyle('display','block'); /* index'inci içeriği göster */
			event.preventDefault();
		});
	});
});

Demolar

idTab Örneği;
http://www.erbilen.net/demo/mootools-idTab/index.html

indexTab Örneği;
http://www.erbilen.net/demo/mootools-indexTab/index.html

İndir

http://yadi.sk/d/8a5elr7y77Nns

 

MooTools ile Tooltip Örneği Yapalım

MooTools kütüphanesini kullanarak kolayca tooltip örneği nasıl yapabiliriz, bu konuda sizlere bundan bahsetmek istiyorum.

MooTools kütüphanesini kullanarak kolayca tooltip örneği nasıl yapabiliriz, bu konuda sizlere bundan bahsetmek istiyorum.

Adım 1

Öncelikle mootools kütüphanesini sayfamıza dahil edelim. Eğer yok ise aşağıdaki adresten temin edebilirsiniz;
http://mootools.net/download

Adım 2

Gerekli dosyalarımızı oluşturalım;
– index.html
– style.css
– custom.js
– mootools.js

Adım 3

Index.html dosyamızda standart html etiketlerimizi yazalım. Ve daha sonra gerekli dosyalarımızı head etiketi içerisinde çağıralım.

<!DOCTYPE HTML>
<html lang="en-US">
<head>

	<meta charset="UTF-8">
	<title>Erbilen.NET</title>

	<!-- style -->
	<link rel="stylesheet" href="style.css" />

	<!-- scripts -->
	<script type="text/javascript" src="mootools.js"></script>
	<script type="text/javascript" src="custom.js"></script>

</head>
<body>

</body>
</html>

Adım 4

Şimdi tooltip örneği için span kullanacağız.. Ve data nitelikleri ile bilgileri alacağız. Bu yüzden şöyle bir örnek kod ekleyebiliriz body’e;

<div>
	Burası benim <span data-text="İpucu" data-direction="left">tooltip</span> örneğim :)
</div>

Burada data-text tooltip’te gözükecek değer, data-direction ise tooltip’in yönü olacak.

Adım 5

custom.js dosyamızı açalım ve sayfa hazır olduğunda bizde hazırız diyelim;

window.addEvent('domready', function(){
	/* .. */
});

Adım 6

Mootools ile DOM’da bir nesneyi seçmek için bir çok yol vardır.. Eğer çoklu seçip yapılacaksa iki dolar ($$) işareti ile yapılır. Ve nesnelere olay atamak içinde 2 tanımlı metod vardır.. Bunlar addEvent ve addEvents‘dır. Tahmin edebileceğiniz üzere 2.si çoklu olay atama için kullanılıyor. Bizde bunu kullanacağız.. Kısaca tooltip nesnemiz için fare üzerine geldiğinde ve fare üzerinden gittiğinde olaylarını tanımlayacağız.

window.addEvent('domready', function(){
	$$('.tooltip').addEvents({
		mouseenter: function(){

		},
		mouseleave: function(){

		}
	});
});

Burada mouseenter fare üzerine geldiğinde mouseleave ise fare üzerinden gittiğinde çalışacaktır.

Adım 7

Şimdi mouseenter olayı içerisinde kodlarımızı yazmaya devam edelim.. İlk olarak data değerlerimizi alalım;

var text = this.get('data-text'),
	direction = this.get('data-direction');

Ve şimdide tooltip için gerekli nesnemizi oluşturalım.. Ve sınıf değeri ile yazı değerini ekleyelim;

this.toolTip = new Element('span', {
	'class' : 'tooltip_text ' + 'direction_' + direction,
	'html' : text
});

Burada gördüğünüz gibi 2 sınıf ataması yaptım.. 2. sınıf ataması belirlediği yöne göre direction_YÖNDATASI şeklinde kullanılabilecek.. Böylece okların yönünü belirleyebilmemiz daha kolaylaşır. Ve fark ettiyseniz var ile oluşturmadım.. this.toolTipdedim. Bunun sebebi ise diğer olayda bunu kullanabilmemdir.. Bu şekilde mouseleave‘de bu nesneye erişip üzerinde işlem yapabilirim. Ve html ile data-text değerini nesneme atadım. text ilede atayabilirdim ancak o zaman html etiketleri çalışmazdı 

Şimdi oluşturduğumuz nesneyi mevcut span’ımızın içerisine ekleyelim;

this.toolTip.inject(this);

Artık kodlarınızı çalıştırdığınızda span’ın üzerine her geldiğimizde İpucu yazdığını görebilirsiniz. devam ediyoruz.. 

Adım 7

JS kodlarımız bir kenarda kalsın, şimdide css kodlarımızı yazalım..

.tooltip {
	position: relative
}
.tooltip_text {
	font: 12px/17px Arial;
	background-color: #222;
	padding: 5px 10px;
	border-radius: 5px;
	position: absolute;
	z-index: 1;
	color: #fff;
	text-align: center
}

Burada ilk olarak kapsayıcı nesneye position: relative verdik. Çünkü içerisindeki tooltip nesnesi absolute yani diğer nesnelerden bağımsız olması gerek. Ve diğer birkaç özellik ekledik. Bu bu şekilde kalsın, JS kodlarımıza geri dönebiliriz 

Adım 8

Şimdi tooltip’in fade tarzı açılması için öncelikle opacity değerini 0′a düşürelim.. Ve daha sonra tween kullanarak animasyon süresini belirleyip fade ile açtıralım;

this.toolTip.setStyle('opacity', 0).set('tween', { duration: 400 }).fade('in');

Evet, eğer test ederseniz gayet tatlı olduğunu görebilirsiniz 

Şimdi yön işlemlerinde css tanımlaması yapmak için öncelikle tooltip’in genişlik ve yüksekliğini bulmamız gerekiyor. Bunun için getSize() metodunu kullanabiliriz.

var size = this.toolTip.getSize(),
	width = size.x + 10,
	height = size.y + 10;

Burada ben + 10px daha ekledim. Bunun sebebide biraz daha uzakta kalmalarını sağlamak için. Dilerseniz siz eklemek zorunda değilsiniz 

Adım 9

Şimdi yön işlemlerini yapacağız.. Toplu CSS işlemleri için setStyles() metodunu kullanıyoruz. İlk if koşulumuz şöyle olacak;

if ( direction == 'left' ){
	this.toolTip.setStyles({
		'left': '-' + width + 'px',
		'top': '50%',
		'margin-top': '-' + ((height / 2) - 5) + 'px'
	});
}

Eğer yön sol olarak belirlenmiş ise css kodlarımız bu şekildedir. Öncelikle left değerini tooltip’in genişliği + 10px kadar sola çekiyoruz.. Daha sonra yukarıdan ortalayıp yüksekliğin yarısı kadar margin ile yukarı çekiyoruz..

Yukarı için

else if ( direction == 'top' ){
	this.toolTip.setStyles({
		'top' : '-' + height + 'px',
		'left' : '50%',
		'margin-left' : '-' + ((width / 2) - 5) + 'px'
	});
}

Sağ için

else if ( direction == 'right' ){
	this.toolTip.setStyles({
		'right' : '-' + width + 'px',
		'top' : '50%',
		'margin-top' : '-' + ((height / 2) - 5) + 'px'
	});
}

Aşağı için

else if ( direction == 'bottom' ){
	this.toolTip.setStyles({
		'bottom' : '-' + height + 'px',
		'left' : '50%',
		'margin-left' : '-' + ((width / 2) - 5) + 'px'
	});
}

Evet neredeyse bitti sayılır.. CSS kodlarını tek tek anlatmıyorum, mantık ilkinde olduğu gibi hepsinde aynıdır. Şimdi artıkmouseenter olayı ile işimiz bitti.. Sıra geldi mouseleave olayı çalıştığında mevcut tooltip örneğimizi kaldırmaya. Bunun içindestroy() metodunu kullanacağız.

this.toolTip.destroy();

Ve fade efektinde hızlı yapıldığında sorun çıkıyor. Bunu engellemek için animasyonu fare üzerinden çekildiğinde durduracağız.

this.toolTip.get('tween').stop();

Evet işte bu kadar  Şimdi CSS’e geri dönebiliriz!

Adım 10

Son olarak css’de yöne göre ok şekillerini yapacağız.. Bunun için tooltip_text öncesine content ekleyip şurada olduğu gibiok şekillerini yapacağız.

.tooltip_text:after {
	content: '';
	border: 6px solid transparent;
	position: absolute
}
/* son yön için */
.tooltip_text.direction_left:after {
	border-left-color: #222;
	top: 50%;
	margin-top: -6px;
	right: -12px
}
/* sağ yön için */
.tooltip_text.direction_right:after {
	border-right-color: #222;
	top: 50%;
	margin-top: -6px;
	left: -12px
}
/* yukarı yön için */
.tooltip_text.direction_top:after {
	border-top-color: #222;
	left: 50%;
	margin-left: -6px;
	bottom: -12px
}
/* aşağı yön için */
.tooltip_text.direction_bottom:after {
	border-bottom-color: #222;
	left: 50%;
	margin-left: -6px;
	top: -12px
}

Adım 11

Ek olarak bir özellik daha ekleyebiliriz.. data-width özelliği.. Bu şu durumlar için lazım olabiliyor, kapsayıcı nesne küçük ise, tooltip nesneside en fazla onun genişliği kadar oluyor.. Bu yüzden tooltip için standart bir width belirleyebiliriz.. Bunuda data-width=”200″ şeklinde belirleyeceğiz.. Buna göre ise JS kodlarımıza şunu ilave edelim. Ve bu ilave işlemini inject‘ten hemen sonrasında yapalım 

if ( w = this.get('data-width') ){
	this.toolTip.setStyle('width', w + 'px');
}

Evet tamamdır..

Tebrikler, mootools’u daha iyi anlamak adına basit bir örnek daha hazırlamış olduk. Demoyu inceleyebilir, kaynak kodlara aşağıdan ulaşabilirsiniz.

Demo

http://www.erbilen.net/demo/mootools-tooltip/index.html

İndir

http://yadi.sk/d/vuOEUcO472K4Y

 

Mootools ile Özel Selectbox Yapımı

Şuan evimden çoook uzaklarda olduğum için ne yazık ki videolu eğitim hazırlayamıyorum.. Ancak mootools’a başladığım şu günlerde bir yandanda bilgilerimi aktarmaya çalışacağım.. Bu yazımda sizlerle adım adım özelleştirilebilir selectbox örneği yapmayı öğreneceğiz..Şuan evimden çoook uzaklarda olduğum için ne yazık ki videolu eğitim hazırlayamıyorum.. Ancak mootools’a başladığım şu günlerde bir yandanda bilgilerimi aktarmaya çalışacağım.. Bu yazımda sizlerle adım adım özelleştirilebilir selectbox örneği yapmayı öğreneceğiz..

Adım 1

Öncelikle mootools kütüphanesi mevcut değil ise, aşağıdaki bağlantıdan sıkıştırılmış halini indirelim;
http://mootools.net/download

Adım 2

Şimdi sırasıyla şu dosyaları oluşturalım;
– index.html
– style.css
– custom.js

Adım 3

html sayfamızın içerisine standart html taglarımızı girelim.. Style dosyamızı çağıralım.. Ve mootools kütüphanesi ile custom.js dosyamızıda sayfamıza dahil edelim..

<!DOCTYPE HTML>
<html lang="en-US">
<head>

	<meta charset="UTF-8">
	<title></title>
	
	<!-- style -->
	<link rel="stylesheet" href="style.css" />
	
	<!-- scripts -->
	<script type="text/javascript" src="mootools-core-1.4.5-full-nocompat-yc.js"></script>
	<script type="text/javascript" src="custom.js"></script>
	
</head>
<body>

</body>
</html>

Adım 4

html sayfamıza özelleştirmek için bir adet selectbox ekleyelim..

<select name="sehir">
	<option value="0">Şehir Seçin</option>
	<option value="Eskişehir">Eskişehir</option>
	<option value="Ankara">Ankara</option>
	<option value="Adana">Adana</option>
	<option value="İzmir">İzmir</option>
</select>

Adım 5

custom.js dosyamızı açalım.. Ve sayfamız hazır olduğunda bizde hazırız diyelim;

window.addEvent('domready', function(){
	
	/* .. .. */

});

Adım 6

Şimdi sınıfı select olan bütün selectbox’ları seçip each ile döngüye sokalım.

$$('select.select').each(function(elem, index){
    /* .. .. */
});

İlk olarak selectbox’ın opacity değerini 0 yaparak görünmez hale getirelim;

elem.setStyle('opacity', 0);

Şimdi selectbox’ın kapsayıcı nesnesini oluşturalım;

var selectBoxContent = new Element('div', {
	'class': 'selectBoxContent'
});

Oluşturduğumuz kapsayıcı nesneyi önce dom’a ekliyoruz.. Yani select nesnesinin hemen öncesine ekliyoruz.

selectBoxContent.inject(elem, 'before');

Ve dom’a eklediğimiz kapsayıcı nesnenin içerisine şimdi selectbox’ımızı ekleyebiliriz;

elem.inject(selectBoxContent);

f12′yi basıp developer tools’dan baktığınızda şöyle bir görüntü var ise buraya kadar her şeyi doğru yaptınız demektir 

Seçilen select değerini gösterecek text nesnesini oluşturalım, içerisine ise seçili select değerini atayalım;

var selectText = new Element('span', {
	'class' : 'selectText',
	'text' : elem.getSelected().get('text')
});

Ve şimdi bu text nesnesini select’ten hemen öncesine ekliyoruz.

selectText.inject(elem, 'before');

Son bir adım kaldı, oda select değeri değiştiğinde bunu yakalayıp text nesnesine yazdırmak.. Onun içinse şöyle bir kod yazacağız;

elem.addEvent('change', function(){
	selectText.set('text', elem.getSelected().get('text'));
});

Evet, bu kadar koddan sonra custom.js dosyamızın son hali şöyle olmalı;

window.addEvent('domready', function(){
	
	$$('select.select').each(function(elem, index){
		elem.setStyle('opacity', 0);
		var selectBoxContent = new Element('div', {
			'class': 'selectBoxContent'
		});
		selectBoxContent.inject(elem, 'before');
		elem.inject(selectBoxContent);
		var selectText = new Element('span', {
			'class' : 'selectText',
			'text' : elem.getSelected().get('text')
		});
		selectText.inject(elem, 'before');
		elem.addEvent('change', function(){
			selectText.set('text', elem.getSelected().get('text'));
		});
	});

});

Buradan sonrasını ise css ile halledeceğiz..

Adım 7

İlk olarak bir reset.css yazmamak için sevgili eric meyer’in reset.css’ini kullanabiliriz.. Bunun için aşağıdaki bağlantıyı kullanabilirsiniz;
http://meyerweb.com/eric/tools/css/reset/

Adım 8

Son olarak selectbox’ımıza biraz şekil verelim;

/*__ SELECTBOX __*/
.selectBoxContent {
	position: relative;
	display: inline-block;
	*display: inline;
	zoom: 1;
	background: #f7f7f7 url(https://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat 175px;
	border: 1px solid #ddd;
	border-top-color: #aaa;
	height: 30px;
	width: 200px
}
.selectBoxContent span.selectText {
	position: absolute;
	padding-left: 8px;
	font: 12px/30px Arial;
	color: #666
}
.selectBoxContent:hover span.selectText {
	color: #111
}
.selectBoxContent select {
	width: 100%;
	height: 30px;
	cursor: pointer;
	position: relative;
	z-index: 1
}

Evet, tebrikler.. Başarılı bir şekilde basit ve kullanışlı bir selectbox örneği hazırladık 

Demo

www.erbilen.net/demo/mootools_selectbox/index.html

İndir

http://yadi.sk/d/5VGBleen6uVtV

 

JavaScript ve jQuery’de Fonksiyon Varlık Kontrolü

Bazı durumlarda eklenti kullanmamız gerekir.. Ancak eklentiye her sayfada ihtiyaç olmadığı için sadece ihtiyaç olan sayfada eklenti dosyalarını yükletiriz.. Ancak genel js dosyası tek olduğu için, diğer sayfalarda bu eklenti olmadığından eklenti tanımından sonraki kodlar çalışmaz hale gelir.. Bu gibi durumlarda o kod satırını eğer eklenti var ise çalıştırmak en sağlıklı çözüm olacaktır.. Peki bunu nasıl yapacağız? Öncelikle bu jQuery eklentisi olacağından jQuery’nin bize sunmuş olduğu $.isFunction()fonksiyonunu kullanacağız.. Ve şu şekilde kontrol işlemini yapacağız;

if ( $.isFunction($.fn.eklentiAdi) ){
    /* eklentiAdi adlı eklentiyi uygulamak için gerekli kodlar */
}

Ya da şöylede kontrol edebiliriz;

if ( $().eklentiAdi ){
    /* eklentiAdi adlı eklentiyi uygulamak için gerekli kodlar */
}

Bu şekilde eğer böyle bir eklenti var ise o kod bloğu çalışacaktır ve altındaki kodları etkilemeyecektir.. Bunun bir benzeride jquery fonksiyonlarıdır.. Onun içinde kontrol şöyledir;

$.test = function(){}
if ( $.isFunction($.test) ){
    alert('test fonksiyonu var!');
}

javascript ile fonksiyon kontrolü için ise;

function test(){}
if ( typeof test == 'function' ){
    alert('fonksiyon mevcut!');
}

Ya da;

function erbilen(){}
if ( window.erbilen ){
    alert('erbilen fonksiyonu mevcut!');
}

Kolay gelsin 

 

IE6-9 için linear-gradient Renk Tanımlama Sorunu

Bildiğiniz gibi css3 ile birlikte linear-gradient özelliği geldi. Ancak css3 özelliği olduğundan IE6-9 için kullanabilmek adına filterözelliğine başvuruyoruz.. Ve burada ise ilginç şekilde bir renk tanımlama sorunu oluşuyor..

Sorun: Renk tanımlamalarında kısa renk tanımı kullanamıyoruz.. Örneğin #333333 olan renk kodunu #333 şeklinde yaptığımızda da aynı mantığa geliyor ancak bunu filter için uygulayamıyoruz, aksi taktirde başka bir renk ortaya çıkıyor..

Örnek;

<style type="text/css">
a {
	text-decoration: none;
	font: 14px Arial;
	display: inline-block;
	padding: 5px 10px;
	color: #fff;
	border-radius: 3px;
	border: 2px solid #444;
	background: #333; /* eski tarayıcılar için */
	background: -moz-linear-gradient(top, #333 0%, #9999 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333), color-stop(100%, #999)); 
	background: -webkit-linear-gradient(top, #333 0%, #999 100%);
	background: -o-linear-gradient(top, #333 0%, #999 100%);
	background: -ms-linear-gradient(top, #333 0%, #999 100%);
	background: linear-gradient(to bottom, #333 0%, #999 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333', endColorstr='#999',GradientType=0 );
}
</style>
<a href="#">erbilen.net</a>

Burada #333 ve #999 renk değerlerinin her ikisinide kısa tanım olarak kullandık.. Örneğin chrome’da şöyle gözükmekte;

Normal şartlarda da olması gereken görüntü bu.. Ancak birde buna IE6-9 arasında bakalım.. Sonuç;

Çözüm: yapmamız gereken #333 ve #999 değerlerini uzun haliyle yazmak.. Ancak sadece filter için;

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333', endColorstr='#999',GradientType=0 );

yerine;

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#999999',GradientType=0 );

yazmak olacak  Şimdilik bu sorununda üstesinden gelmiş olduk.