Eskilerden Ajax Bul Uygulaması :)
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
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
<html xmlns="http://www.w3.org/1999/xhtml">
-
<head>
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-
<title>Ajax Bul Uygulaması ! - Umut ÇETİNKAYA</title>
-
<style>
-
#content{
-
border:1px solid silver;
-
height:100%;
-
}
-
#form{
-
text-align:center;
-
margin:5px;
-
border:1px solid silver;
-
padding:5px;
-
background-color:#E8E8E8;
-
padding:10px;
-
}
-
#veri_kutusu{
-
border:1px solid silver;
-
width:600px;
-
height:100%;
-
}
-
#sonuc_veri{
-
margin-top:5px;
-
margin-bottom:5px;
-
margin-left:5px;
-
margin-right:5px;
-
border:1px solid silver;
-
height:250px;
-
overflow:auto;
-
padding:5px;
-
}
-
#bul_alan{
-
text-align:center;
-
margin-top:5px;
-
margin-bottom:5px;
-
margin-left:5px;
-
margin-right:5px;
-
border:1px solid silver;
-
height:20px;
-
background-color:#E8E8E8;
-
padding:10px;
-
}
-
#bul{
-
border:1px solid silver;
-
width:570px;
-
height:20px;
-
-
}
-
</style>
-
</head>
-
<body>
-
<script>
-
function veriyaz(){
-
document.getElementById('sonuc_veri').innerHTML = document.getElementById('veri_kutusu').value;
-
}
-
</script>
-
<iframe style="display:none;" name="gizli_iframe"></iframe>
-
<form action="guncelle.php" name="bul_formu" id="bul_formu" target="gizli_iframe" method="post">
-
<div id="content">
-
<div id="bul_alan">
-
<input name="bul" type="text" id="bul" value="Bulunacak Sözcük" onclick="this.value='';"/>
-
<input type="submit" name="submit" value="Bul" />
-
</div>
-
<div id="form">
-
<textarea name="veri" id="veri_kutusu" rows="10" onblur="veriyaz()" onclick="this.value='';">İçinde Arama Yapılacak Metin</textarea>
-
</div>
-
<div id="sonuc_veri">
-
-
</div>
-
</div>
-
</form>
-
</body>
-
</html>
guncelle.php
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
<html xmlns="http://www.w3.org/1999/xhtml">
-
<head>
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-
<title>Ajax Bul Uygulaması !</title>
-
</head>
-
<body>
-
<div id="sonuc">
-
<?
-
$veri = $_POST['veri'];
-
$bul = $_POST['bul'];
-
?>
-
</div>
-
<script> parent.document.getElementById('sonuc_veri').innerHTML = document.getElementById('sonuc').innerHTML </script>
-
</body>
-
</html>