Blog TemplateMonster Türkiye

jQuery ile Slide Kayıt Formu Panel Kodu Nasıl Oluşturulur

Barış Hepçorman

Bir Giriş/Kayıt Paneli düzeni oluşturmak için pek çok farklı kullanıcı arayüzü teknikleri bulunmaktadır. Benim en sevdiğim yaklaşımlardan birisi tek bir sayfada iki formu içeren ve her ikisinin arasında bir navigasyon sunmaktır. Büyük dropdown veya pop-up kalıcı pencere işe yaraya bilir ve ayrıca sürgülü panellerde örnek verilebilir.

Bu eğitimde ben jQuery kullanarak tek bir sayfa içerisinde dönen iki sürgülü formun nasıl inşa edilebileceğini sizlere göstermek istiyorum. Etkisi çok fazla kod gerektirmez ve doğal olarak çoğunlukla tekrarlamaz. Bunun aynı zamanda JavaScript etkin olan akıllı telefonlar ve diğer mobil tarayıcılarda çalışması gerekir.  Kullanıcı deneyimi için doğrudan geliştirilebilir ve olağanüstü özellikleri ile kendi web sitelerinizde uygulamak için dikkate değer.

Canlı Demo – Kaynak Kodunu Yükleyin

Şimdi bir index.html sayfası olarak başlayalım.  Ben projelerim çoğunda oluşturduğum kullanımı basit bir HTML5 şablonu oluşturuyorum. Aşağıdan bunu kopyalayabilirsiniz:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<!doctype html>
<html lang="en-US">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Sliding Registration Panel Demo</title>
  <meta name="author" content="Jake Rocheleau">
  <link rel="shortcut icon" href="http://www.templatemonster.com/favicon.ico">
  <link rel="icon" href="http://www.templatemonster.com/favicon.ico">
  <link rel="stylesheet" type="text/css" href="styles.css">
  <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=ABeeZee:400,400italic">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  <script type="text/javascript" src="formslider.js"></script>
<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body>

</body>
</html>

Header kısmına bir kaç yerel dosya eklediğimin farkına varabilirsiniz.  Öncelikle sayfamızda tasarımlarımızı düzenleyeceğimiz bir styles.css dosyası oluşturalım. Şimdi o zaman bazı özel sayfa metin için harici bir Google Web Fontlarını sitil sayfamıza dahil ettik.   Kenara HTML5shiv ve jQuery kütüphanelerini ve diğer referans formslider.js isimli betiği dahil edip ekledik.

Daha sonra detaylı olarak bu dosya içerisine depolanan tüm jQuery kodu geçerli olacaktır.  Şimdi  body sayfamıza inelim ve kodlarımızın nasıl olması gerektiğini inceleyelim.

HTML Body Elemanları

Yani nihai hedef, tek bir container içinde iki şekilde yerleştirilmektedir.  İlk olarak giriş formu olduğundan ve görüntülenen sağ sayfa yüklenmelidir.  Sonra bağlantıya tıklandığında giriş formunun sola doğru kaydırmak ve sağ taraftan kayıt formunu getirmek gerekmektedir.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
 
<div id="w">
<h1>jQuery Sliding Login/Registration Form</h1>

<div id="page">
  <div id="content-login">
	<h2>Login to the Site</h2>
	<div class="content">
	  <a href="#" class="slidelink" id="showregister">Don't Have An Account? </a>
	  <form id="login" name="login" action="#" method="post">
		<label for="email">Email Address</label>
		<input type="email" name="email" id="email" tabindex="1" autocomplete="off">

		<label for="password">Password</label>
		<input type="password" name="password" id="password" tabindex="2" autocomplete="off">

		<input type="submit" name="loginbtn" id="loginbtn" value="Login" tabindex="3">
	  </form>
	</div>
  </div><!-- /end #content-login -->

  <div id="content-register">
	<h2>Register a New Account</h2>
	<div>
	<a href="#" id="showlogin">← Already Have an Account? Login Now!</a>
	<form id="register" name="register" action="#" method="post">
	  <label for="fname">First Name</label>
	  <input type="text" name="fname" id="fname" tabindex="4" autocomplete="off">

	  <label for="lname">Last Name</label>
	  <input type="text" name="lname" id="lname" tabindex="5" autocomplete="off">

	  <label for="newemail">Email Address</label>
	  <input type="email" name="newemail" id="newemail" tabindex="6" autocomplete="off">

	  <label for="password1">Password</label>
	  <input type="password" name="password1" id="password1" tabindex="7" autocomplete="off">

	  <label for="password2">Confirm Password</label>
	  <input type="password" name="password2" id="password2" tabindex="8" autocomplete="off">

	  <input type="submit" name="registerbtn" id="registerbtn" value="Sign Up" tabindex="9">
	</form>
	</div>
  </div><!-- /end #content-register -->

</div><!-- /end #page -->
</div><!-- /end #w -->

Bütün wrapper container de dahil sayfa üzerine odaklanmalıdır  #page div. Ben formu içerisinde böldüm  #content-login ve #content-register. Dış sayfa kabına position: relative; vermeliyim  ve absolute pozisyonları ile iki wrapper  ekledim.

Öncelikle sol giriş formunun üst tarafta olmasını istiyorum ve sayfa yüklendiğinde hemen görüntülenmesini istiyorum.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
/* page structure */
#w { width: 880px; margin: 0 auto; padding-top: 25px; }

#page { 
  display: block;
  position: relative;
  overflow: hidden;
  height: auto;
  background: #fff; 
  box-sizing: border-box;
  -webkit-box-shadow: 0 0 12px 0 rgba(150, 180, 210, .9);
  -moz-box-shadow: 0 0 12px 0 rgba(150, 180, 210, .9);
  box-shadow: 0 0 12px 0 rgba(150, 180, 210, .9);
}
.content {
  box-sizing: border-box;
  width: 600px;
  margin: 0 auto;
  padding-bottom: 30px;
  padding: 5px 15px;
  padding-top: 25px;
}

/* inner page layouts */
#content-login { display: block; position: relative; width: 100%; }

#content-register { display: none; width: 100%; position: absolute; top: 0; left: 880px; }

Mevcut olan plan jQuery’s .animate() methodu ile bir kaç saniye içerisinde güncelleyerek animasyon yöntemi ile çalıştırmaktır.   Mutlak konumlandırma kullanılarak bir yüz ile karşılamak gerekir veya içerik taşıma orijinal paketine sahip olmadığı anlamına gelir.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  outline: none;
}
html { height: 101%; }
body { background: #e8eff7; font-size: 62.5%; line-height: 1; padding-bottom: 55px; font-family: Arial, Geneva, sans-serif; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }

blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong { font-weight: bold; } 

a { text-decoration: none; color: #4983bd; }
a:hover { text-decoration: underline; }

table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }
input { outline: none; }

Ayrıca not eklemek istiyorum benim belgemde CSS sınıfları da vardır. Eric Meyer'in CSS i sıfırlar özel şablon oluşturabilmem için çift ekstra özellikleri de ekledim.  Bu Firefox, IE9, Crhome, Opera ve Safari dahil tüm modern marka varsayılan tarayıcılarda işlenmesi için en hızlı yoldur. Eğer herhangi bir web sitesi sayfasında bunları denemek istiyorsanız yukarıdaki kodları alabilirsiniz.

Dinamik JQuery Animasyonlar

Şimdi bizim animasyonlarımız ile nihai etkiyi oluşturabilmemiz gerekiyor. Öncelikle bir formslider.js dosyası oluşturmamız için tipik bir kurulum gerekmektedir $(document).ready() clause. DOm işlemi  bitene kadar bu tüm JavaScript kodu devre dışı olarak devam etmektedir.

1
2
3
4
5
6
7
8
9
 
$(document).ready(function(){
  $("form").submit(function(e) {
    e.preventDefault();
  });

  var clogin = $("#content-login");
  var cregister = $("#content-register");

});

Biz işlem için kodu ilk blok sayfasına gönderdiğimizde herhangi bir biçime karşı denetlemeliyiz. Benim demo örneğimde hash(#) için eylem niteliği kurdum, yüklemek için herhangi bir arka uc komut dosyasına gerek yok.

Fakat bunun yerine URL içerisinde hash sembolü içerisine yükleme yaparak tamamen form eylemini durdurabilirsiniz.  Eğer form düzgün şekilde gönderimini yapmak istiyorsanız  e.preventDefault() yöntemini ile ilgili 3. satırdaki kodu kaldırmak gerektiğini anlayın. Demo örneği aslında harika bir çözüm doğru çalışması için formlar gerekiyor ise çalışmayacaktır.

Diğer iki değişken sadece hızlı giriş başvurular ve kayıt formu container divleri olan.  Biz jQuery değişken seçiciler kullanarak ve mekan yazarak bir çoğunu kaydedebiliriz, çünkü bu kodları daha kısa tutacaktır.

On/Off  Fonksiyonlarının Yapısı

Şimdi jQuery kodunun geri kalanı bu iki animasyon etrafında olacak. Kullanıcı #showregister kimliği ile kayıt bağlantısına tıkladığı zaman ilk işlevini çağıracaktır.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
/* display the register page */
$("#showregister").on("click", function(e){
  e.preventDefault();
  var newheight = cregister.height();
  $(cregister).css("display", "block");

  $(clogin).stop().animate({
    "left": "-880px"
  }, 800, function(){ /* callback */ });

  $(cregister).stop().animate({
    "left": "0px"
  }, 800, function(){ $(clogin).css("display", "none"); });

  $("#page").stop().animate({
    "height": newheight+"px"
  }, 550, function(){ /* callback */ });
});

Bu linke tıklandığı zaman yeni bir fonksiyon içerisinde click olayına geçmek için çağırır e.preventDefault(); yüklenmesini href değerine tıklanması için. Eğer çapa bağlantılarını bu yana bıraktırabilir iseniz bu kod satırı için yeni bir sayfaya geçişte yük olmayacağını gösterir -- ancak son çare olarak yeni bir kayıt sayfası yüklemek için href değerini ayarlayabilirsiniz. Daha sonra JavaScript etkin olmayan kullanıcılar kayıt formunu her iki şekilde yönlendirebilecek siniz.

Başka bir problem ise containerin yüksekliği. Açıkçası kayıt formunun yüksekliği giriş formuna göre daha yüksek olacak.  Bu animasyon olduğu zaman içerisinde taşacak gibi dursa da bunu container den ayarlayabiliriz.

İlk iki animasyon sol pozisyonlarını bizim containerin üzerindeki kayıt formuna 880px olarak bir hareket sağlayın. Ayrıca kayıt panelinden sonra arama yöntemi sürgüyü bitirmek için giriş divi deşiştirmelisiniz display: none;  şimdi 3 animasyonu 550 milisaniye biraz daha hızlı sayfa yüksekliğine gelir.

Her şeyi bu tek fonksiyon ile yapabilirsiniz, Js kodlarına aşina iseniz kesinlikle sağlam kavrayacaksınız.  Bazı numaralar ile değişkenler ile benzer bir kod yapısı kullanarak daha farklı giriş formu elde etmek için kullanabilirsiniz. Biz sadece şu anda #showlogin bağlantısını hedefliyoruz.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
/* display the login page */
$("#showlogin").on("click", function(e){
  e.preventDefault();
  var newheight = clogin.height();
  $(clogin).css("display", "block");

  $(clogin).stop().animate({
    "left": "0px"
  }, 800, function() { /* callback */ });
  $(cregister).stop().animate({
    "left": "880px"
  }, 800, function() { $(cregister).css("display", "none"); });

  $("#page").stop().animate({
    "height": newheight+"px"
  }, 550, function(){ /* callback */ });
});

Canlı Demo – Kaynak Kodunu Yükleyin