StepsWizard.js

By

Steps Wizard
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>

 



Leave a Comment

Your email address will not be published.

You may also like

Trend