jQuery İle Selectbox’tan değer almak

Aslında işe yaramaz bir özellik gibi gözükebilir ama zaman zaman hiç umulmadık yerde işinizede yarıyabilir. Selectbox kutusundan sayfa yenilemeden php kullanmadan değer alma işleminizi kolaycayapabilirsiniz.

Bu seçime görede işlem yapabilirsiniz.
Devamını Oku »

Satır Numaralı Textarea Hazırlamak

Kendime online yazıeditörü ve sitemde kullanmak amaçlı düzenleyiciler filan hazırlarken zaman zaman hataların oluşmasıyla text alanlarında satır numaralarınında güzel olacağı fikriyle scriptlerime eklediğim bir javascript kodu daha doğrusu jQuery eklentisi var. Şuan size ondan bahsetmek istiyorum.

jQuery LinedTextArea Nedir?

Lined TextArea Alan Williamson tarafından yazılmış bir jQuery eklentisidir.
textarea alanına atanacak id ile text alanını aşşağıdaki gibi bir hale getiriyoruz.

Devamını Oku »

jQuery İle Aç-Kapa Butonu Hazırlamak

Günümüzde websitelerinde görsellik ön planda yer alıyor. Bu ihtiyaçlar için imdadımıza yetişen jquery ile web tasarımlarımızda istediğimizi elde etmemizi sağlıyor.
Lafı fazla uzatmadan anlatıma başlıyayım.

---

Devamını Oku »

Şartlı İfadelerin Kısaltılarak Kullanılması [if else]

Kod yazarken bir çok sorgulama yaparız eğer gelen değer şuna eşitse şunu yap değilse bunu yap şeklinde yaptırımlar hazırlamak için if else ifadelerini kullanırız. Ama bir sayfada durduk yere boş bir değişken tanımlayıp sonra if else sorgulamasını yapıp bu değişkeni tekrar döndürmekle uğraşmak gereksiz kod yığını olabilir. Hatta Olur.

Devamını Oku »

jQuery İle İp Adresi Almak

PHP ile ip adresi alınabildiği gibi jQuery ilede aynı şekilde ip adresi alabiliyoruz. Ne işimize yarar derseniz açıkcası kullanım alanı bayağı geniş olucağından eminim.

Şuan için yazmakta olduğum script içi oylama sistemi hazırlıyorum bunun için ip adresi almak gerektiği için jQuery ile PHP’ye hiç bulaşmadan bu işimi gerçekleştiriyorum.

Devamını Oku »

HTML LocalStorage Nedir? Nasıl Kullanılır? [jQuery]

---

---

LocalStorage Nedir?

LocalStorage websitesi üzerinde tarayıcınız ile yaptığınız değişiklikleri websitesine değil sizin tarayıcınızın kendi belleğine kayıt eden bir javascript kodudur. Daha anlaşılır olabilmesi için demo adresine bakabilirsiniz. HTML Sayfada hiç bir sql sorgusu olmadan yazdığınız bir yazının veya görsel bir ayarın kullanıcılarınıza göre kayıt edilmesini sağlayabilirsiniz.
Çeşitliliği siz kendi imkanlarınızla geliştirebilirsiniz. Kodları inceliyelim. Devamını Oku »

jQuery Açılır Kapanır Div Alanı 2

---

Geçtiğimiz Günlerde a Adlı Yazımın Altına Gelen Bir Yorum İçin Bu Örneğin Bir Başka Versiyonunuda Hazırlamak İstedim. Bu Örnekte Linklere Tıklanıldığında Linkin Alt Bölümünde Açılan Bir Div İçerisinde Ayarladğınız İçerik Gözüküyor.

Devamını Oku »

jQuery İle Sayfa Yenilemeden Form İle Veri Göndermek

Bu Sistem İle Sayfanızı Yenilemeden jQuery Aracılığıyla Database’inize Veri Kaydetmenizi Sağlayan Bir Sistem. Arzu Ettiğiniz Şekilde Değiştirmek Size Kalmış.

---

Adım 1 —JavaScript Kodları

$("#form").ajaxForm() — Burdaki #form İfadesi <form> Elementine Ait Olan ID Değeridir. Form’u Gönderdiğimizde Kullanıcağımız ajaxForm() Metodu Formdaki Verileri gonder.php Adlı Dosyamıza Gönderip İşlemleri Yapıcak Ve Son Olarakta #preview Adlı Alanda Gönderdiğimiz Değerleri Bize Göstericek.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<script type="text/javascript">
$('document').ready(function(){
	$('#form').ajaxForm( { target: '#preview', success: function() {
			$('#formbox').slideUp('fast');
		}
	});
});
</script>

---

Adım 2 —index.html

Burda Basit Bir HTML Form Oluşturuyoruz.

	<div id="preview"> </div>
<div id="formbox">
<form id="form" action="submit.php" method="post"> Name
<input type="text" name="name" /> Email
<input type="text" name="email" /> Message
<textarea name="message"></textarea>
  <input type="submit" value="Submit"/>
</form>
</div>

---

Adım 3 —Database Oluşturalım

Aşşağıdaki kodları phpmyadminden sql bölümünden çalıştırın.

 CREATE TABLE `contact` (
`id` int(11) AUTO_INCREMENT PRIMARY KEY,
`name` varchar(255) UNIQUE KEY,
`email` varchar(100),
`message` text UNIQUE KEY,
`created_date` int(11),
)

---

Adım 4 —gonder.php’yi Oluşturalım.

<?php include("db.php"); if($_SERVER["REQUEST_METHOD"] == "POST")
{
$name=mysql_real_escape_string($_POST['name']);
$email=mysql_real_escape_string($_POST['email']);
$message=mysql_real_escape_string($_POST['message']);  if(strlen($name)>0 && strlen($email)>0 && strlen($message)>0){
$time=time();  mysql_query("INSERT INTO contact (name,email,message,created_date) VALUES('$name','$email','$message','$time')");  echo "<h2>Teşekkürler !</h2>";
}
}

---

Adım 5 —jQuery Validate Eklentisi

Bu Eklenti Uygulamanın İlk Kodları Arasında Yer Alan jquery.form.js Dosyasındaki Eklentinin Kullanılmasını Sağlayan Kodlardır.

	<script type="text/javascript">
$('document').ready(function()
{
$('#form').validate(
{ rules:
{
"name":{ required:true, maxlength:40
},
"email":{ required:true, email:true, maxlength:100
},
"message":{ required:true
}}, messages:
{
"name":{ required:"Bu Alan Zorunludur."
},
"email":{ required:"Bu Alan Zorunludur.", email:"Lütfen Geçerli Bir Mail Adresi Giriniz."
},
"message":{ required:"Bu Alan Zorunludur."
}}, submitHandler: function(form){
$(form).ajaxSubmit({ target: '#preview',  success: function() {
$('#formbox').slideUp('fast');
}
});
}

})
});

---

Adım 6 —db.php

<?php
$mysql_hostname = "localhost";
$mysql_user = "root";
$mysql_password = "";
$mysql_database = "db";
$bd = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) or die("Database Baglantısı Yapılamadı"); mysql_select_db($mysql_database, $bd) or die("Database Bulunamadı");

jQuery’de Dizi (array) Kullanımı

Geçenlerde Hazırladığım Bir Form Sisteminde Lazım Oldu. O Sıra Hazırladım Dosyaları Kurcalarken Gördüm Paylaşmak İstedim. Birdaha Aklıma Gelmeyebilir Benimde.

Öncelikle Sayfanıza jQuery’i Dahil Ettiğinizden Emin Olun Sonra;

jQuery Kodları

<script> Tagları Arasına Kodlarımızı Yazıyoruz.

$(document).ready(function() {

    $("input").click(function () {

		$(this).toggleClass('selected');

      });

	// gönder butonuna basıldığında seçili alanları kontrol edip value değerlerini alıyoruz.
    $(".submit").click(function () {

	var itemsarray = [];

      $("#list li .selected").each(function () {

       var items = $(this).attr('value');
	   itemsarray.push(items);

      });

	  //  Bu Alanda ise ne işlem yapıcaksak onu hazırlıyoruz isterseniz Post Metodunu İsterseniz AJAX Kullanarak Gönderme İşlemi Yapabilirsiniz.
          // Ben Alert İle Ekrana Yazdırıyorum.

	  alert(itemsarray);

	});

});

HTML Kodlamamız

<ul id="list">
	<li><input value="Reklamlar" type="checkbox" class=""/> Reklamlar</li>
	<li><input value="Art" type="checkbox" class=""/> Sanat</li>
	<li><input value="Otomobil" type="checkbox" class=""/> Otomobil</li>
	<li><input value="İs" type="checkbox" class=""/> İş</li>
	<li><input value="Bisiklet" type="checkbox" class=""/> Bisiklet</li>
	<li><input value="Komedyen" type="checkbox" class="" /> Komedyen</li>
	<li><input value="Egitim" type="checkbox" class=""/> Eğitim</li>
	<li><input value="Is_Basvurusu" type="checkbox" class=""/> İş Başvurusu</li>

	<div class="clear"></div>
</ul>
<div class="submit">Gönder</div>

Gönder Butonunu Biraz Şekillendirelim.

.submit{
	width:70px;
	padding:9px;
	background-color:#F60;
	color:#FFF;
	font-weight:700;
	text-align:center;
	cursor:pointer;}