Flash/Flex Developer » javascript http://blog.ismailsimsek.com Thu, 22 Dec 2011 14:58:55 +0000 en hourly 1 http://wordpress.org/?v=3.3 php ile sayfa yönlendirme http://blog.ismailsimsek.com/genel/pratik-bilgiler/php-ile-sayfa-yonlendirme.html http://blog.ismailsimsek.com/genel/pratik-bilgiler/php-ile-sayfa-yonlendirme.html#comments Tue, 30 Mar 2010 11:57:14 +0000 İsmail Şimşek http://blog.ismailsimsek.com/?p=147 Çoğu zaman sayfamızdan başka bir sayfaya geçmek isteriz. Bunu javascript ile kolayca hallederiz. location.href ile.

Php kullanırken ise bunu header( "Location: diger_sayfamiz.php" ); şeklinde yaparız. Ama içerik oluşturduktan sonra header kullanmaya çalışıyorsak hata alacağızdır. Daha geniş bilgi için aşağıdaki linki ziyaret edin:

Cannot modify header information - headers already sent hatası alıyorum ? Nasıl düzeltirim ?

Gelelim bugün araştırırken öğrendiğim yeni yönteme. Bu yöntem benim çok hoşuma gitti. Hemen kodları vereyim.

PLAIN TEXT
PHP:
  1. function yonlen($sure,$sayfa)
  2. {
  3.     $deger = "<meta http-equiv='refresh' content='".$sure.";url=".$sayfa."'>";
  4.     echo $deger;
  5. }

Kullanımı ise çok basit. Yapmanız gereken tek şey sayfanızın kaç saiye sonra yönleneceğini vermek ve yönleneceği sayfayı vermek. Yani;

yonlen(1,"diger_sayfa.php");

]]> http://blog.ismailsimsek.com/genel/pratik-bilgiler/php-ile-sayfa-yonlendirme.html/feed 0 jQuery validation plugin ile form validation http://blog.ismailsimsek.com/genel/pratik-bilgiler/jquery-validation-plugin-ile-form-validation.html http://blog.ismailsimsek.com/genel/pratik-bilgiler/jquery-validation-plugin-ile-form-validation.html#comments Fri, 22 Jan 2010 00:40:34 +0000 İsmail Şimşek http://blog.ismailsimsek.com/?p=138 jQuery nin çok işe yarar bir plugin inden bahsedeceğim. Formları kontrol etmek doğru verinin girilip girilmediğini denetlemek çok büyük sıkıntı benim için. Hazırladığım bir formun kontrolü için araştırma yaparken karşıma çıkan bu güzel plugin tüm sorunlarımı kafamdan atmama neden oldu :)

Hemen kullanımına geçiyorum. Öncelikle şu adresten indirelim. İndirdiğimiz zip dosyasının içindeki jquery.validate.min.js dosyasını kullanacağız. İsterseniz jquery.validate.js ya da jquery.validate.pack.js dosyasını da kullanabilirsiniz.

Önce bu kütüphaneyi sayfamıza ekleyelim.

PLAIN TEXT
JavaScript:
  1. <script type="text/javascript" src="jquery132.js"></script>
  2. <script type="text/javascript" src="jquery.validate.min.js"></script>

Daha sonra sayfamız açıldığında hemen çalışmaya başlayacak olan validation kodlarını yazalım.

Kullanacağımız formun html kodları:

PLAIN TEXT
HTML:
  1. <form id="form1">
  2. <table border="1">
  5. <td>İsim</td>
  6. <td><input id="isim" name="isim" type="text" /></td>
  7. </tr>
  9. <td>Numara</td>
  10. <td><input id="numara" name="numara" type="text" /></td>
  11. </tr>
  13. <td>Email</td>
  14. <td><input id="email" name="email" type="text" /></td>
  15. </tr>
  17. <td colspan="2" align="right"><input onclick="kontrolet()" type="button" value="Kontrol Et" /></td>
  18. </tr>
  19. </tbody>
  20. </table>
  21. </form>

Bu uygulamamızda formumuzun adı ve id si form1. Ayrıca formun içinde isim, numara ve email alanları bulunmakta.

PLAIN TEXT
JavaScript:
  1. <script type="text/javascript">
  2. $(document).ready(function() {
  3. $('#form1').validate({
  4. rules: {
  5. isim: { required: true, minlength:5 },
  6. numara: { required: true, number:true },
  7. email: { required: true, email: true }
  8. },
  9. messages: {
  10. isim: { required: 'Lütfen bu alanı doldurunuz.',minlength:'5 karakterden daha az giremezsiniz.'  },
  11. numara: { required: 'Bu alanı doldurmak zorundasınız.',number:'sadece numara girilebilir.' },
  12. email: { required: 'Lütfen bu alanı doldurunuz.' , email: 'Lütfen geçerli bir email adresi giriniz.' }
  13. }
  14. });
  15. });
  16. </script>

Şimdi tüm bu kodlar ne işe yarıyor biraz ondan bahsedeyim. Döküman hazır olduğunda form1 nesnesi validation için yakalanıyor ve kontrol ediliyor :) required komutu ilgili alanı doldurmak zorunda olduğumuzu belirtiyor. Default değeri false. Bunun dışında number, minlength, maxlength, email gibi özelliklerde var. Bu kodları yazdırdıktan sonra eğer formumuz doğru doldurulmuşsa işlem yaptırmak istiyoruz. Bunun içinde şu kodları kullanacağız.

PLAIN TEXT
JavaScript:
  1. <script type="text/javascript">
  2. function kontrolet()
  3. {
  4. sonuc = $('#form1').valid();
  5. if(sonuc==true)    {
  6. alert("Form başarıyla dolduruldu.")
  7. }else{
  8. alert("Lütfen gerekli alanları doldurunuz.");
  9. }
  10. }
  11. </script>

Çalışmanın derli toplu haline buradan ulaşabilirsiniz.

Bu plugin hakkında daha çok bilgi için:
http://docs.jquery.com/Plugins/Validation
http://jquery.bassistance.de/validate/demo/

]]> http://blog.ismailsimsek.com/genel/pratik-bilgiler/jquery-validation-plugin-ile-form-validation.html/feed 1 Highslide Giriş http://blog.ismailsimsek.com/html-css-js/highslide/highslide-giris.html http://blog.ismailsimsek.com/html-css-js/highslide/highslide-giris.html#comments Sun, 15 Mar 2009 02:02:18 +0000 İsmail Şimşek http://www.webtimi.com/ismail/blog/?p=74 Merhabalar. Uzun zamandır ertelediğim highslide yazımı yazmaya başladım. Vakit buldukça yazmaya devam edeceğim.
Öncelikle highslide neler yapabilir ona bir göz atalım. Bu adresten neler yapabileceğine (yapabileceğinize) bakalım.

Örnek uygulamaları incelediyseniz işe highslide kütüphanesini, css dosyasını ve resimleri indirerek başlayalım.Bu adresten indireceğiniz zip uzantılı dosya içerisinde ihtiyacınız olan herşeyi bulacaksınız. İlk aşamada bizim için önemli olan highslide dosyası ve içindekiler. Example dosyasında örnek uygulamalar var inceleyip uygulamanızda fayda var.

Bir uyarıda bulunayım bu noktada; kodlamaya geçmeden önce verdiğim kodları kendiniz tek tek yazarsanız daha yararlı olur. Kopyala / yapıştır ile hiç bir faydası olmaz.

Bu hatırlatmayıda yaptıktan sonra ilk kodumuzu yazalım.

PLAIN TEXT
HTML:
  1. &lt;html&gt;
  2. &lt;head&gt;
  3.  
  4. &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;highslide/highslide.css&quot; /&gt;
  5. &lt;script type=&quot;text/javascript&quot; src=&quot;highslide/highslide-full.js&quot;&gt;&lt;/script&gt;
  6.  
  7. &lt;/head&gt;
  8. &lt;body&gt;

Bu kod bloğu ile highslide css dosyamızı ve highslide kütüphanemizi sayfamıza çağırdık.  Bundan sonraki en önemli kodumuz ise

PLAIN TEXT
HTML:
  1. &lt;script type=&quot;text/javascript&quot;&gt;
  2. hs.graphicsDir = 'highslide/graphics/';
  3. &lt;/script&gt;

olacak. Bu kodumuzla highslide ın sayfa içerisinde kullanacağı zoom, move gibi araçların resimlerinin yolunuda belirlemiş oluyoruz. Bu kodlardan birini eksik yazarsak highslide düzgün çalışmayacaktır.

Kodlarımızın son hali aşağıdaki gibi olacaktır.

PLAIN TEXT
JavaScript:
  1. &lt;head&gt;
  2.  
  3. &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;highslide/highslide.css&quot; /&gt;
  4. &lt;script type=&quot;text/javascript&quot; src=&quot;highslide/highslide-full.js&quot;&gt;&lt;/script&gt;
  5. &lt;script type=&quot;text/javascript&quot;&gt;
  6. hs.graphicsDir = 'highslide/graphics/';
  7. &lt;/script&gt;
  8. &lt;/head&gt;
  9. &lt;body&gt;

İlk örnek olarak bir resmin tıklanınca büyüyerek ekrana gelmesini gösterelim. Bu sayede highslide mantığınıda biraz olsun görmüş olacağız. Bir resmin büyüyerek ekrana gelmesi için aynı resmin bir küçük bir de büyük haline ihtiyacımız var. Yani küçük olan sayfamızda gözüken resim büyük olan ise tıkladığımızda ekrana gelecek olan resim. Aşağıdaki kodları sayfamızın <body></body> tagları arasına yazıyoruz.

PLAIN TEXT
HTML:
  1. &lt;body&gt;
  2.  
  3. &lt;a href=&quot;resimler/buyuk_resim.jpg&quot; class=&quot;highslide&quot; onclick=&quot;return hs.expand(this)&quot;&gt;
  4. &lt;img src=&quot;resimler/kucuk_resim.jpg&quot; title=&quot;Büyük hali için tıklayınız&quot; /&gt;&lt;/a&gt;
  5. &lt;/body&gt;

Böylelikle işlemimiz bitiyor. Örneği görmek için tıklayınız.

Yaptıklarımızı açıklayacak olursak:

Öncelik resmimizin küçük haline link verip büyük halini açmasını istedik. linkimize class ataması yapıp bu linkin bir highslide linki olduğunu ve tıklandığında (onclick) resmi büyüterek açması gerektiğini söyledik.

Umarım faydalı olmuştur. İkinci derste görüşmek üzere.

]]> http://blog.ismailsimsek.com/html-css-js/highslide/highslide-giris.html/feed 2 Highslide Türkçe Anlatımlar http://blog.ismailsimsek.com/html-css-js/highslide/highslide-turkce-anlatimlar.html http://blog.ismailsimsek.com/html-css-js/highslide/highslide-turkce-anlatimlar.html#comments Thu, 05 Feb 2009 16:06:04 +0000 İsmail Şimşek http://www.webtimi.com/ismail/blog/?p=61 Pek yakında Türkçe highslide anlatımlarına ve örneklerine buradan ulaşabilirsiniz. Javascript ile ilgilenen herkesin highslide'ı anlayabileceği şekilde olacak olan anlatımları kaçırmamanızı tavsiye ederim.

]]> http://blog.ismailsimsek.com/html-css-js/highslide/highslide-turkce-anlatimlar.html/feed 0