Üye Girişi
Bağlan Google+ ile Bağlan Facebook ile Bağlan
Yeni Kayıt
Tüm Forumlar
  • Tüm Forumlar
  • Konu Dışı / Off Topic
  • Konu Dışı
  • Bu Konuda
Şimdi Ara

Jquery ile yaptığım ilk interaktif arayüz

Sıcak Fırsatlarda Tıklananlar
Editörün Seçtiği Fırsatlar
Daha Fazla
Bu Konudaki Kullanıcılar: Daha Az
2 Misafir (1 Mobil) - 1 Masaüstü, 1 Mobil
5 sn
9
Cevap
0
Favori
206
Tıklama
Daha Fazla
İstatistik
  • Konu İstatistikleri Yükleniyor
Konuya Özel
Öne Çıkar
0 oy
Sayfa: 1
Giriş
Mesaj
  • 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> 
      
    Kayıt ol: 



    Giris Yap: 


    Neden biz? 
     Biz Turkiyenin bir numaralı web hosting firmalarindan biriyiz. 
     Yaklaşık 120000 siteyi güvence altımızda tutuyoruz. 
     Firmamızı bu kadar iyi yapan 3 sebep vardır: 
    • Güvenilir
    • Ucuz
    • Hızlı

    Bu özellikleri sağlayan CEO'muz sevgili Umut İnanç Şirketin Gözdesidir. 
    CEO'muz yüksek tecbübeli 10 tane dil bilmekle birlikte 
     gençliğinde çok çeşitli web siteleri yapmıştır. 
     Dolayısıyla bizi seçmeniz çok doğru bir seçim olur!
     
      </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



    _____________________________
    Bu yazıyı FARKEDERSEN, FARKEDECEKSIN ki bu yazıyı FARKETMEN ya da FARKETMEMEN hiç FARKETMEZ.





    Sen en iyisi bu yazıyı hiç FARKETME.




  • bu konu hakkında bilgi özürlü biri olarak soruyorum bunları napacaz ?
    _____________________________
  • 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 yazıyı FARKEDERSEN, FARKEDECEKSIN ki bu yazıyı FARKETMEN ya da FARKETMEMEN hiç FARKETMEZ.





    Sen en iyisi bu yazıyı hiç FARKETME.
  • 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
    _____________________________




  • Umut İnanç kim ya 10 dil bilen ceo
    _____________________________
  • 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 yazıyı FARKEDERSEN, FARKEDECEKSIN ki bu yazıyı FARKETMEN ya da FARKETMEMEN hiç FARKETMEZ.





    Sen en iyisi bu yazıyı hiç FARKETME.
  • 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
    _____________________________




    • Yapay Zeka’dan İlgili Konular
    Oyun yapmak ile ilgili(görsel tasarım-motor)
    9 yıl önce açıldı
    Android Auto ile araçlarda web tarayıcı dönemi başlıyor
    7 ay önce açıldı
    Yapay Zeka ile Kolay Video İçerik ve Sunum Hazırlama (Kendi Deneyimlerim ve Öneriler)
    6 ay önce açıldı
    Daha Fazla Göster
  • 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
    _____________________________
    Bu yazıyı FARKEDERSEN, FARKEDECEKSIN ki bu yazıyı FARKETMEN ya da FARKETMEMEN hiç FARKETMEZ.





    Sen en iyisi bu yazıyı hiç FARKETME.




  • quote:

    Orijinalden alıntı: Illuminn

    quote:

    'ye gönderip geri çekme


    bunu son diyen adam hala cezasını çekiyor

    _____________________________
    Bu yazıyı FARKEDERSEN, FARKEDECEKSIN ki bu yazıyı FARKETMEN ya da FARKETMEMEN hiç FARKETMEZ.





    Sen en iyisi bu yazıyı hiç FARKETME.
    • 
Sayfa: 1

Benzer içerikler

- x
Bildirim
mesajınız kopyalandı (ctrl+v) yapıştırmak istediğiniz yere yapıştırabilirsiniz.
Hizmet kalitesi için çerezleri kullanabiliriz, DH'yi kullanırken depoladığımız çerezlerle ilgili veri politikamıza gözatın.
Kabul Ediyorum