Step-by-step progress navigation bar code based on jQuery, jquery navigation bar
Share a jQuery-based sliding step-by-step progress navigation bar code. This is a jquery-based dynamic step navigation bar code for website registration. As follows:
Download Online Preview source code
Implementation code.
Html code:
<Div id = "stepBar" class = "ui-stepBar-wrap"> <div class = "ui-stepBar"> <div class = "ui-stepProcess"> </div> </div> <div class = "ui-stepInfo-wrap"> <table class = "ui-stepLayout" border = "0" cellpadding = "0" cellspacing = "0 "> <tr> <td class =" ui-stepInfo "> <a class =" ui-stepSequence "> 1 </a> <p class =" ui-stepName "> register </p> </td> <td class = "ui-stepInfo"> <a class = "ui-stepSequence"> 2 </a> <p class = "ui -stepName "> enter Verification Information </p> </td> <td class =" ui-stepInfo "> <a class =" ui-stepSequence "> 3 </a> <p class = "ui-stepName"> enter basic information </p> </td> <td class = "ui-stepInfo"> <a class = "ui-stepSequence"> 4 </a> <p class = "ui-stepName"> enter Security Information </p> </td> <td class = "ui-stepInfo"> <a class = "ui-stepSequence"> 5 </a> <p class = "ui-stepName"> activate an account </p> </td> <td class = "ui-stepInfo "> <a class =" ui-stepSequence "> 6 </a> <p class =" ui-stepName "> complete registration </p> </td> </tr> </table> </div> <script type = "text/javascript" src = "js/jquery-1.8.2.js"> </script> <script type = "text /javascript "src =" js/jquery. easing.1.3.js "> </script> <script type =" text/javascript "src =" js/stepBar. js "> </script> <script type =" text/javascript "> $ (function () {stepBar. init ("stepBar", {step: 4, change: true, animation: true}) ;}); </script>
Via: http://www.w2bc.com/Article/39198