Byumut » ajax bul http://www.byumut.com " En büyük risk, risk almamaktır.... " Tue, 27 Sep 2011 18:40:46 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Eskilerden Ajax Bul Uygulaması :) http://www.byumut.com/eskilerden-ajax-bul-uygulamasi/ http://www.byumut.com/eskilerden-ajax-bul-uygulamasi/#comments Sun, 21 Dec 2008 19:55:10 +0000 byumut http://www.byumut.com/?p=317 Merhaba arkadaşlar uzun zaman öncesinden yazmış olduğum o zamanlar ne için yazdığımı tam bilmediğim bir uygulamayı sizlerle paylaşmak istiyorum . Uygulama aslında basit bir metin veriyorsunuz ve bu metin içerisinde istediğiniz sözcüğü arayıp renklendiriyor ama dahada geliştirilebilir ve yeni özellikler katılarak değişik uygulamalarda kullanılabilir diye düşünüyorum mesela her sitede en altta bunun gibi bul kutusu olsa arayınca istediğimiz sözçüğü çat diye bulsak güzel olurdu :) Gerçi ctrl+f bu istediğimiz işlemi görüyor ama şu zamanda ama birçok insana ctrl+f ne işe yarıyor desek bilmez onun için güzel olabilirdi neyse kodlar aşağıda sistemin çalışır halini görmek için ise linki tıklamanız yeterli olacak iyi kullanımlar ..

index.php

PLAIN TEXT
PHP:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Ajax Bul Uygulaması ! - Umut ÇETİNKAYA</title>
  6. <style>
  7. #content{
  8. border:1px solid silver;
  9. height:100%;
  10. }
  11. #form{
  12. text-align:center;
  13. margin:5px;
  14. border:1px solid silver;
  15. padding:5px;
  16. background-color:#E8E8E8;
  17. padding:10px;
  18. }
  19. #veri_kutusu{
  20. border:1px solid silver;
  21. width:600px;
  22. height:100%;
  23. }
  24. #sonuc_veri{
  25. margin-top:5px;
  26. margin-bottom:5px;
  27. margin-left:5px;
  28. margin-right:5px;
  29. border:1px solid silver;
  30. height:250px;
  31. overflow:auto;
  32. padding:5px;
  33. }
  34. #bul_alan{
  35. text-align:center;
  36. margin-top:5px;
  37. margin-bottom:5px;
  38. margin-left:5px;
  39. margin-right:5px;
  40. border:1px solid silver;
  41. height:20px;
  42. background-color:#E8E8E8;
  43. padding:10px;
  44. }
  45. #bul{
  46. border:1px solid silver;   
  47. width:570px;
  48. height:20px;
  49.  
  50. }
  51. </style>
  52. </head>
  53. <body>
  54. <script>
  55. function veriyaz(){
  56. document.getElementById('sonuc_veri').innerHTML = document.getElementById('veri_kutusu').value;
  57. }
  58. </script>
  59. <iframe style="display:none;" name="gizli_iframe"></iframe>
  60. <form action="guncelle.php" name="bul_formu" id="bul_formu" target="gizli_iframe" method="post">
  61. <div id="content">
  62. <div id="bul_alan">
  63. <input name="bul" type="text" id="bul" value="Bulunacak Sözcük" onclick="this.value='';"/>
  64. &nbsp;<input type="submit" name="submit"  value="Bul" />
  65. </div>
  66. <div id="form">
  67. <textarea name="veri" id="veri_kutusu" rows="10" onblur="veriyaz()" onclick="this.value='';">İçinde Arama Yapılacak Metin</textarea>
  68. </div>
  69. <div id="sonuc_veri">
  70.  
  71. </div>
  72. </div>
  73. </form>
  74. </body>
  75. </html>

guncelle.php

PLAIN TEXT
PHP:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Ajax Bul Uygulaması !</title>
  6. </head>
  7. <body>
  8. <div id="sonuc">
  9. <?
  10. $veri = $_POST['veri'];
  11. $bul = $_POST['bul'];
  12. $veri = str_replace($bul,"<span style=\"background:#FF8C8C;\">$bul</span>",$veri);
  14. ?>
  15. </div>
  16. <script> parent.document.getElementById('sonuc_veri').innerHTML = document.getElementById('sonuc').innerHTML </script>
  17. </body>
  18. </html>

Uygulamanın Çalışır Halini Görmek İçin Tıklayınız !

4 views

]]> http://www.byumut.com/eskilerden-ajax-bul-uygulamasi/feed/ 0