StepsWizard.js

StepsWizard.js 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;">&nbsp;</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>

 

Ali
Telif Hakkı Bildirimi:Bu sitedeki orijinal makaleyi Ali2020-07-16 tarihinde yayınlandı,Toplam 1557 karakterden oluşmaktadır.
Yeniden yazdırma ipuçları:Özel talimatlar dışında, bu sitedeki tüm makaleler CC-4.0 sözleşmesi kapsamında yayınlanmaktadır.Yeniden basılması için lütfen kaynak belirtiniz.
Yorum yap(Yorum yapılmamış)
Yükleniyor...