DonanımHaber Mini sürüm 2 Ocak 2026 tarihi itibariyle kullanımdan kalkacaktır. Bunun yerine daha hızlı bir deneyim için DH Android veya DH iOS uygulamalarını kullanabilirsiniz.
DH Anasayfa
İndirim Kodu
Ara
Popüler
Foruma Git
Hakkımızda
Destek
Mobil Sürüm
Standart Site Görünümü
Bu Konuda
  • Tüm Forumlar
  • Konu Dışı / Off Topic
  • Konu Dışı
  • Bu Konuda
Arama butonu
Bağlan:
Facebook
Google+
Twitter
Aşağı Git Tüm Forumlar Konu Dışı / Off Topic Konu Dışı Jquery ile yaptığım ilk interaktif arayüz
Bu konudaki kullanıcılar: 1 misafir, 1 mobil kullanıcı
8
Cevap 206
Tıklama 0
Öne Çıkarma
Jquery ile yaptığım ilk interaktif arayüz
Cevap Yaz
Konuya Özel
A
ArapTavsani
12 yıl (673 mesaj)
Teğmen
Konu Sahibi

2 gün önce başladım öğrenmeye javascript öğrenmeden jquery ajax felan atıldım ve çok iyi kavradım.
2 tane şey yaptım biri jquery biri ajax .
ilkinin fonksiyonu: sayfayı yenilemeden farklı kısımlara geçebilme
ikincinin fonksiyonu: sayfayı yenilemeden input alanına YAZDIĞINIZ BİLGİYİ php'ye gönderip geri çekme


ilkinin kodu: 
<html> 
  <head> 
  <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
  <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 
  	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 
  	<title>AJAX</title> 
  	<script type="text/javascript"> 
  		function ad(){ 
  			$('#icerik1').css("visibility","visible"); 
  			$('#icerik2').css("visibility","hidden"); 
  			$('#icerik3').css("visibility","hidden"); 
  		} 
  				function ada(){ 
  			$('#icerik2').css("visibility","visible"); 
  			$('#icerik3').css("visibility","hidden"); 
  			$('#icerik1').css("visibility","hidden"); 
  		} 
  				function adb(){ 
  				$('#icerik1').css("visibility","hidden"); 
  			$('#icerik3').css("visibility","visible"); 
  			$('#icerik2').css("visibility","hidden"); 
  				 
  		} 
  						function sil(){ 
  				$('#icerik1').css("visibility","hidden"); 
  			$('#icerik3').css("visibility","hidden"); 
  			$('#icerik2').css("visibility","hidden"); 
  		} 
  	</script> 
  	<style type="text/css"> 
  	#icerik1 { 
  		background-color: orange; 
  		height: 500px; 
  		width: 450px; 
          visibility: hidden; 
  		float: left; 
  		position: absolute; 
  		padding: 20px; 
  				-moz-border-bottom-right-radius:2em; 
          -webkit-border-bottom-right-radius:2em; 
          border-bottom-right-radius:2em; 
  		-moz-border-bottom-left-radius:2em; 
          -webkit-border-bottom-left-radius:2em; 
          border-bottom-left-radius:2em; 
  		-moz-border-top-right-radius:2em; 
          -webkit-border-top-right-radius:2em; 
          border-top-right-radius:2em; 
  	} 
  		#icerik2 { 
  		background-color: orange; 
  		height: 500px; 
  		width: 450px; 
  		visibility: hidden; 
  		float: left; 
  		position: absolute;  
  		padding: 20px; 
  				-moz-border-bottom-right-radius:2em; 
          -webkit-border-bottom-right-radius:2em; 
          border-bottom-right-radius:2em; 
  		-moz-border-bottom-left-radius:2em; 
          -webkit-border-bottom-left-radius:2em; 
          border-bottom-left-radius:2em; 
  		-moz-border-top-right-radius:2em; 
          -webkit-border-top-right-radius:2em; 
          border-top-right-radius:2em; 
  	} 
  		#icerik3 { 
  		background-color: orange; 
  		height: 500px; 
  		width: 450px; 
  		visibility: hidden; 
  		float: left; 
  		padding: 20px; 
  		-moz-border-bottom-right-radius:2em; 
          -webkit-border-bottom-right-radius:2em; 
          border-bottom-right-radius:2em; 
  		-moz-border-bottom-left-radius:2em; 
          -webkit-border-bottom-left-radius:2em; 
          border-bottom-left-radius:2em; 
  		position: absolute; 
  		-moz-border-top-right-radius:2em; 
          -webkit-border-top-right-radius:2em; 
          border-top-right-radius:2em; 
  		 
  	} 
  	 
      .gonder { 
           
          -moz-box-shadow: 0px 1px 0px 0px #fff6af; 
          -webkit-box-shadow: 0px 1px 0px 0px #fff6af; 
          box-shadow: 0px 1px 0px 0px #fff6af; 
           
          background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffec64), color-stop(1, #ffab23)); 
          background:-moz-linear-gradient(top, #ffec64 5%, #ffab23 100%); 
          background:-webkit-linear-gradient(top, #ffec64 5%, #ffab23 100%); 
          background:-o-linear-gradient(top, #ffec64 5%, #ffab23 100%); 
          background:-ms-linear-gradient(top, #ffec64 5%, #ffab23 100%); 
          background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%); 
          filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec64', endColorstr='#ffab23',GradientType=0); 
           
          background-color:#ffec64; 
           
          -moz-border-top-right-radius:2em; 
          -webkit-border-top-right-radius:2em; 
          border-top-right-radius:2em; 
  		-moz-border-top-left-radius:2em; 
          -webkit-border-top-left-radius:2em; 
          border-top-left-radius:2em; 
           
          border:1px solid #ffaa22; 
           
          display:inline-block; 
          color:#333333; 
          font-family:arial; 
          font-size:15px; 
          font-weight:bold; 
          padding:6px 24px; 
          text-decoration:none; 
           
          text-shadow:0px 1px 0px #ffee66; 
           
      } 
      .gonder:hover { 
           
          background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffab23), color-stop(1, #ffec64)); 
          background:-moz-linear-gradient(top, #ffab23 5%, #ffec64 100%); 
          background:-webkit-linear-gradient(top, #ffab23 5%, #ffec64 100%); 
          background:-o-linear-gradient(top, #ffab23 5%, #ffec64 100%); 
          background:-ms-linear-gradient(top, #ffab23 5%, #ffec64 100%); 
          background:linear-gradient(to bottom, #ffab23 5%, #ffec64 100%); 
          filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffab23', endColorstr='#ffec64',GradientType=0); 
           
          background-color:#ffab23; 
      } 
  	    .gonder2 { 
           
          -moz-box-shadow: 0px 1px 0px 0px #fff6af; 
          -webkit-box-shadow: 0px 1px 0px 0px #fff6af; 
          box-shadow: 0px 1px 0px 0px #fff6af; 
           
          background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffec64), color-stop(1, #ffab23)); 
          background:-moz-linear-gradient(top, #ffec64 5%, #ffab23 100%); 
          background:-webkit-linear-gradient(top, #ffec64 5%, #ffab23 100%); 
          background:-o-linear-gradient(top, #ffec64 5%, #ffab23 100%); 
          background:-ms-linear-gradient(top, #ffec64 5%, #ffab23 100%); 
          background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%); 
          filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec64', endColorstr='#ffab23',GradientType=0); 
           
          background-color:#ffec64; 
           
          -moz-border-top-right-radius:2em; 
          -webkit-border-top-right-radius:2em; 
          border-top-right-radius:2em; 
  		-moz-border-top-left-radius:2em; 
          -webkit-border-top-left-radius:2em; 
          border-top-left-radius:2em; 
           
          border:1px solid #ffaa22; 
           
          display:inline-block; 
          color:#333333; 
          font-family:arial; 
          font-size:15px; 
          font-weight:bold; 
          padding:6px 24px; 
          text-decoration:none; 
           
          text-shadow:0px 1px 0px #ffee66; 
           
      } 
      .gonder2:hover { 
           
          background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffab23), color-stop(1, #ffec64)); 
          background:-moz-linear-gradient(top, #ffab23 5%, #ffec64 100%); 
          background:-webkit-linear-gradient(top, #ffab23 5%, #ffec64 100%); 
          background:-o-linear-gradient(top, #ffab23 5%, #ffec64 100%); 
          background:-ms-linear-gradient(top, #ffab23 5%, #ffec64 100%); 
          background:linear-gradient(to bottom, #ffab23 5%, #ffec64 100%); 
          filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffab23', endColorstr='#ffec64',GradientType=0); 
           
          background-color:#ffab23; 
      } 
  	    .gonder3 { 
           
          -moz-box-shadow: 0px 1px 0px 0px #fff6af; 
          -webkit-box-shadow: 0px 1px 0px 0px #fff6af; 
          box-shadow: 0px 1px 0px 0px #fff6af; 
           
          background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffec64), color-stop(1, #ffab23)); 
          background:-moz-linear-gradient(top, #ffec64 5%, #ffab23 100%); 
          background:-webkit-linear-gradient(top, #ffec64 5%, #ffab23 100%); 
          background:-o-linear-gradient(top, #ffec64 5%, #ffab23 100%); 
          background:-ms-linear-gradient(top, #ffec64 5%, #ffab23 100%); 
          background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%); 
          filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec64', endColorstr='#ffab23',GradientType=0); 
           
          background-color:#ffec64; 
           
          -moz-border-top-right-radius:2em; 
          -webkit-border-top-right-radius:2em; 
          border-top-right-radius:2em; 
  		-moz-border-top-left-radius:2em; 
          -webkit-border-top-left-radius:2em; 
          border-top-left-radius:2em; 
           
          border:1px solid #ffaa22; 
           
          display:inline-block; 
          color:#333333; 
          font-family:arial; 
          font-size:15px; 
          font-weight:bold; 
          padding:6px 24px; 
          text-decoration:none; 
           
          text-shadow:0px 1px 0px #ffee66; 
           
      } 
      .gonder3:hover { 
           
          background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffab23), color-stop(1, #ffec64)); 
          background:-moz-linear-gradient(top, #ffab23 5%, #ffec64 100%); 
          background:-webkit-linear-gradient(top, #ffab23 5%, #ffec64 100%); 
          background:-o-linear-gradient(top, #ffab23 5%, #ffec64 100%); 
          background:-ms-linear-gradient(top, #ffab23 5%, #ffec64 100%); 
          background:linear-gradient(to bottom, #ffab23 5%, #ffec64 100%); 
          filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffab23', endColorstr='#ffec64',GradientType=0); 
           
          background-color:#ffab23; 
      } 
  	 
      .myButton { 
           
          -moz-box-shadow:inset 0px 1px 0px 0px #f29c93; 
          -webkit-box-shadow:inset 0px 1px 0px 0px #f29c93; 
          box-shadow:inset 0px 1px 0px 0px #f29c93; 
           
          background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #fe1a00), color-stop(1, #ce0100)); 
          background:-moz-linear-gradient(top, #fe1a00 5%, #ce0100 100%); 
          background:-webkit-linear-gradient(top, #fe1a00 5%, #ce0100 100%); 
          background:-o-linear-gradient(top, #fe1a00 5%, #ce0100 100%); 
          background:-ms-linear-gradient(top, #fe1a00 5%, #ce0100 100%); 
          background:linear-gradient(to bottom, #fe1a00 5%, #ce0100 100%); 
          filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100',GradientType=0); 
           
          background-color:#fe1a00; 
           
          -moz-border-radius:6px; 
          -webkit-border-radius:6px; 
          border-radius:6px; 
           
          border:1px solid #d83526; 
           
          display:inline-block; 
          color:#ffffff; 
          font-family:arial; 
          font-size:15px; 
          font-weight:bold; 
          padding:6px 24px; 
          text-decoration:none; 
           
          text-shadow:0px 1px 0px #b23e35; 
          margin-left: 170px; 
      } 
      .myButton:hover { 
           
          background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ce0100), color-stop(1, #fe1a00)); 
          background:-moz-linear-gradient(top, #ce0100 5%, #fe1a00 100%); 
          background:-webkit-linear-gradient(top, #ce0100 5%, #fe1a00 100%); 
          background:-o-linear-gradient(top, #ce0100 5%, #fe1a00 100%); 
          background:-ms-linear-gradient(top, #ce0100 5%, #fe1a00 100%); 
          background:linear-gradient(to bottom, #ce0100 5%, #fe1a00 100%); 
          filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ce0100', endColorstr='#fe1a00',GradientType=0); 
           
          background-color:#ce0100; 
      } 
      .myButton:active { 
          position:relative; 
          top:1px; 
      } 
  	</style> 
  </head> 
  <body> 
  <input type="submit" class="gonder" value="Kayıt Ol!" onclick="ad();" /><input type="submit" class="gonder2" value="Giriş Yap!" onclick="ada();" /><input type="submit" class="gonder3" value="Hakkımızda" onclick="adb();" /><input type="submit" class="myButton" value="Hepsini Kapa" onclick="sil();" /><br/><div id="icerik1">Kayıt ol: <br /><input type="text" name="kadi" placeholder="Kullanici Adi"/><br /><input type="password" name="sifre" placeholder="Sifre"/><br /><input type="password" name="sifre" placeholder="Sifre Tekrari"/><br /><input type="submit" name="submit" value="Kayit ol!" onclick="kayit();"/></div><div id="icerik2">Giris Yap: <br /><input type="text" name="kadi2" placeholder="Kullanici Adi"/><br /><input type="password" name="sifre2" placeholder="Sifre"/><br /><input type="submit" name="submit2" value="Giris Yap!" onclick="giris();"/></div><div id="icerik3">Neden biz? <br/> Biz Turkiyenin bir numaralı web hosting firmalarindan biriyiz. <br/> Yaklaşık 120000 siteyi güvence altımızda tutuyoruz. <br/> Firmamızı bu kadar iyi yapan 3 sebep vardır: <br/><ul><li>Güvenilir</li><li>Ucuz</li><li>Hızlı</li></ul><br/>Bu özellikleri sağlayan CEO'muz sevgili Umut İnanç Şirketin Gözdesidir. <br/>CEO'muz yüksek tecbübeli 10 tane dil bilmekle birlikte </br> gençliğinde çok çeşitli web siteleri yapmıştır. <br/> Dolayısıyla bizi seçmeniz çok doğru bir seçim olur!</div> 
  </body> 
  </html>






ikincinin kodu(apache server gerekli):
index.html 
<html> 
  <head> 
      <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
      <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 
  	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 
  	<title>AJAX</title> 
  	<script type="text/javascript"> 
  		function ad () { 
  			var isim = $('#isim').val(); 
  			$('#isim').attr('disabled','disabled'); 
  				$.ajax({ 
  				type:"POST", 
  				url:"ajax.php", 
  				data: {ad:isim}, 
  				success:function(sonuc){ 
  				$('#isim').removeAttr('disabled'); 
  				$('#isim').val(""); 
  				$('#cevap').html(sonuc); 
  				} 
  				}); 
  		} 
  	</script> 
  	<style type="text/css"> 
  	</style> 
  </head> 
  <body> 
  	<input type="text" id="isim" name="isim"/> 
  	<input type="submit" id="submit" name="submit" value="Gonder" onclick="ad();"/> 
  	<br /><div id="cevap"></div> 
  </body> 
  </html>

ajax.php 
<?php 
  $isim = $_POST['ad']; 
  echo "<font color='blue'>Yazdiginiz sey: ".$isim."</font>"; 
  ?>






Not: Leş diyenler kendileri yapsında görelim buraya kodları yapıştırsınlar kopyala yapıştır olmadan
Not2: Şimdi kesin mehmed altair gelir bak sonra demedi demeyin



M
MrCaptain1001
12 yıl (1589 mesaj)
Yüzbaşı

bu konu hakkında bilgi özürlü biri olarak soruyorum bunları napacaz ?


Bu mesaja 2 cevap geldi.
A
ArapTavsani
12 yıl (673 mesaj)
Teğmen
Konu Sahibi

quote:

Orijinalden alıntı: MrCaptain1001

bu konu hakkında bilgi özürlü biri olarak soruyorum bunları napacaz ?

ne yapçağını bilmiyorsan mesaj atmana gerek yok detaylı bi konu indirmeli felan boşver sen
apache server mevcut olanlar yapar





< Bu mesaj bu kişi tarafından değiştirildi ArapTavsani -- 15 Eylül 2013; 12:05:15 >
Bu mesaja 1 cevap geldi.
M
MrCaptain1001
12 yıl (1589 mesaj)
Yüzbaşı

quote:

Orijinalden alıntı: ArapTavsani

quote:

Orijinalden alıntı: MrCaptain1001

bu konu hakkında bilgi özürlü biri olarak soruyorum bunları napacaz ?

ne yapçağını bilmiyorsan mesaj atmana gerek yok detaylı bi konu indirmeli felan boşver sen
apache server mevcut olanlar yapar

tamam kolay gelsin



S
SilverLining
12 yıl (2269 mesaj)
Yüzbaşı

Umut İnanç kim ya 10 dil bilen ceo


Bu mesaja 1 cevap geldi.
A
ArapTavsani
12 yıl (673 mesaj)
Teğmen
Konu Sahibi

quote:

Orijinalden alıntı: NephertitiKleopatra

Umut İnanç kim ya 10 dil bilen ceo

Umut inanç benimde 10 dil sallamasyon ama 4 dil bildiğim doğru


Bu mesaja 1 cevap geldi.
S
SilverLining
12 yıl (2269 mesaj)
Yüzbaşı

quote:

Orijinalden alıntı: ArapTavsani

quote:

Orijinalden alıntı: NephertitiKleopatra

Umut İnanç kim ya 10 dil bilen ceo

Umut inanç benimde 10 dil sallamasyon ama 4 dil bildiğim doğru

Güzel sallamışsın 120bin siteyi güvence altında tutmak filan server filan yok da kodları okuyorum neler yazmışsın diye


Bu mesaja 1 cevap geldi.
A
ArapTavsani
12 yıl (673 mesaj)
Teğmen
Konu Sahibi

quote:

Orijinalden alıntı: NephertitiKleopatra

quote:

Orijinalden alıntı: ArapTavsani

quote:

Orijinalden alıntı: NephertitiKleopatra

Umut İnanç kim ya 10 dil bilen ceo

Umut inanç benimde 10 dil sallamasyon ama 4 dil bildiğim doğru

Güzel sallamışsın 120bin siteyi güvence altında tutmak filan server filan yok da kodları okuyorum neler yazmışsın diye

Hakkımızda bölmü boş kalmasın diye salladıkça salladım kötümü yaptım
sallamamın sebebi pratik amaçlı yaptım bunu. kod yazmak vakit öldürmek için ideal
zamanım olsa kayıt olma giriş yapma felanda yapabilirdim ama hem vakit yok hemde çoğunuzda server yok mysql yok o yüzden yazmaya gerek duymadım



A
ArapTavsani
12 yıl (673 mesaj)
Teğmen
Konu Sahibi

quote:

Orijinalden alıntı: Illuminn

quote:

'ye gönderip geri çekme


bunu son diyen adam hala cezasını çekiyor




Cevap Yaz
Tüm Forumlar Konu Dışı / Off Topic Konu Dışı Jquery ile yaptığım ilk interaktif arayüz
DH Mobil uygulaması ile devam edin. Mobil tarayıcınız ile mümkün olanların yanı sıra, birçok yeni ve faydalı özelliğe erişin.
App Store'danİndirin Google Play'denİndirin
Gizle ve güncelleme çıkana kadar tekrar gösterme.
DonanımHaber Forum - Mini Sürüm

Hakkımızda | Yukarı

Tam sürüm için tıklayınız
Version: 1.2.887
Donanım Sponsoru: incehesap.com