Ara sıra Facebook sitesine giriş yaptığımızda hesap güvenliğini arttırmak için bir sayfa ile karşılaşırız. Bu sayfada hesabı daha güvende tutmak için bizden aşama aşama formları doldurmamız istenir. jQuery Steps, José Ramón Díaz tarafından bu tarz örnekler hazırlayabilmeniz için geliştirilmiş bir uygulamadır. Steps eklentisini kullanarak bir kaç sayfalık aşamadan oluşan formlarınızı tek bir sayfada birleştirip kullanıcılarınıza daha iyi bir deneyim sağlayabilirsiniz.
Kullanım
- Head etiketleri arasına eklemeniz gereken bölüm.
Js ve css adresleri :
<link rel="stylesheet" href="stil.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.steps-0.1.js"></script>
- Body etiketleri arasına eklemeniz gereken bölüm.
Html :
<div class="container">
<div class="steps">
<ul class="blue 5steps">
<li class="completed"><a href="#"><em>Step 1</em><span>Description 1</span></a></li>
<li class="completedLast"><a href="#"><em>Step 2</em><span>Description 2</span></a></li>
<li class="current"><a href="#"><em>Step 3</em><span>Description 3</span></a></li>
<li class=""><a href="#"><em>Step 4</em><span>Description 4</span></a></li>
<li class="end"><a href="#"><em>Step 5</em><span>Description 5</span></a></li>
</ul>
</div>
<span style="clear:both; display:block;"> </span>
<input type="button" value="Start over |<-" onclick="$('.steps').steps('start');"/>
<input type="button" value="<< prev" onclick="$('.steps').steps('prev');"/>
<input type="button" value="next >>" onclick="$('.steps').steps('next');"/>
<input type="button" value="Finish ->|" onclick="$('.steps').steps('finish');"/>
</div>