JQUERY Açılır Menu Yapımı.
H2, class ustoge olan etiketimizin click olayına icerik etiketimizin acılmasını sağladık.. slideToggle(“fast”) yerine slideToggle(“slow”) yazmış olsaydık, menünün açılması daha yavaş olucaktı…
Login formumuzda, kullanıcı Giriş butonuna bastığında girilen bilgileri PHP dosyamıza gönderip, değerleri kontrol ediyoruz.
Bu işlem boyunca ekrana “Veriler Kontrol Ediliyor Lütfen Bekleyiniz…” mesajı veriyoruz.
Tabi bu mesajımızı ekranı tamamen karartan bir efektle(fade) yapıyoruz
ve PHP dosyası ile alışveriş bittikten sonra eğer giriş başarılı ise sayfamızı yönlendiriyoruz,
hatalı ise ekranımız tekrar aydınlanarak form tekrar işlevli hale getirilmiş oluyor…
JQUERY Form Kontrolü
Daha Önce basit bir şekilde, JQUERY ile PHP veri gönderme, alma işlemine değinmiştim..
Şimdi ise, form verilerini JQUERY ile kontrol edeceğiz ve text kutuları boş ise, kırmızı oklarla belirtecek ve işlem yapmayacağız.
Eğer kutular dolu ise PHP dosyamıza verileri gönderecek ve cevabı alacağız…
Kodlarımız
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%20type%3D%22text%2Fcss%22%3E%0Abody%20%7B%0A%20%20%20%20font%3A%2012px%20normal%20Arial%2C%20Helvetica%2C%20sans-serif%3B%0A%7D%0A*%2C%20*%20focus%20%7B%0A%20%20%20%20outline%3A%20none%3B%0A%20%20%20%20margin%3A%200%3B%0A%20%20%20%20padding%3A%200%3B%0A%7D%0A.menu%7B%0A%20%20%20%20width%3A288px%3B%0A%20%20%20%20padding-left%3A%2010px%3B%0A%20%20%20%20padding-top%3A%2010px%3B%0A%7D%0Ah2.ustoge%20%7B%0A%20%20%20%20background%3A%20url(ustoge.png)%20no-repeat%3B%0A%20%20%20%20height%3A%2035px%3B%0A%20%20%20%20line-height%3A%2035px%3B%0A%20%20%20%20width%3A%20288px%3B%0A%20%20%20%20font-size%3A%2016px%3B%0A%20%20%20%20font-weight%3A%20normal%3B%0A%20%20%20%20float%3A%20left%3B%0A%20%20%20%20padding-left%3A%206px%3B%0A%20%20%20%20margin-bottom%3A6px%3B%0A%7D%0Ah2.active%20%7Bbackground-position%3A%20left%20bottom%3B%7D%0A.ustoge%20a%7B%0A%20%20%20%20font-size%3A%2016px%3B%0A%20%20%20%20color%3A%20%23666%3B%0A%20%20%20%20text-decoration%3A%20none%3B%0A%20%20%20%20display%3Ablock%3B%0A%7D%0A.ustoge%20a%3Ahover%7B%0A%20%20%20%20color%3A%23333%3B%0A%7D%0A.icerik%7B%0A%20%20%20%20clear%3A%20both%3B%0A%20%20%20%20padding%3A%206px%3B%0A%20%20%20%20background-color%3A%20%23FCFCFC%3B%0A%20%20%20%20margin-bottom%3A%206px%3B%0A%20%20%20%20border%3A%201px%20solid%20%23F5F5F5%3B%0A%20%20%20%20color%3A%20%23666%3B%0A%20%20%20%20overflow%3A%20hidden%3B%0A%20%20%20%20text-align%3A%20justify%3B%0A%7D%0A.icerik%20a%7B%0A%20%20%20%20color%3A%20%23F60%3B%0A%20%20%20%20padding%3A6px%3B%0A%7D%0A.icerik%20ul%20%7B%0A%20%20%20%20padding%3A0px%3B%0A%7D%0A.icerik%20ul%20li%20%7B%0A%20%20%20%20list-style%3Anone%3B%0A%20%20%20%20border-bottom-style%3A%20solid%3B%0A%20%20%20%20border-bottom-width%3A%201px%3B%0A%20%20%20%20border-bottom-color%3A%20%23F2F2F2%3B%0A%7D%0A.icerik%20ul%20li%3Ahover%20%7B%0A%20%20%20%20border-bottom-color%3A%20%23FF0000%3B%0A%7D%0A.icerik%20ul%20li%20a%7B%0A%20%20%20%20display%3Ablock%3B%0A%20%20%20%20text-decoration%3Anone%3B%0A%20%20%20%20color%3A%2366859D%3B%0A%20%20%20%20font-weight%3Abold%3B%0A%20%20%20%20font-size%3A%2014px%3B%0A%7D%0A.icerik%20ul%20li%20a%3Ahover%7B%0A%20%20%20%20color%3A%23FF6600%3B%0A%7D%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22http%3A%2F%2Fcode.jquery.com%2Fjquery-latest.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0A%24(document).ready(function()%7B%0A%20%20%20%20%24(%22.icerik%22).hide()%3B%0A%20%20%20%20%24(%22h2.ustoge%22).click(function()%7B%0A%20%20%20%20%20%20%20%20%24(this).toggleClass(%22active%22).next().slideToggle(%22fast%22)%3B%0A%20%20%20%20%7D)%3B%0A%7D)%3B%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
</head>
<body>
<div class="menu">
<h2 class="ustoge"><a href="#">Sayfa İşlemleri</a></h2>
<div class="icerik">
<ul>
<li><a href="#">Sayfa Ekle</a></li>
<li><a href="#">Sayfa Düzenle</a></li>
<li><a href="#">Alt Öğeler</a></li>
<li><a href="#">Alt Öğeler</a></li>
</ul>
</div>
<h2 class="ustoge"><a href="#">Yazı İşlemleri</a></h2>
<div class="icerik">
<ul>
<li><a href="#">Yazı Ekle</a></li>
<li><a href="#">Yazı Düzenle</a></li>
<li><a href="#">Alt Öğeler</a></li>
<li><a href="#">Alt Öğeler</a></li>
</ul>
</div>
</div>
</body>
</html>