<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <section> <div class="wizard"> <div class="wizard-inner"> <div class="connecting-line"></div> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"> <a href="#organisation" data-toggle="tab" aria-controls="step1" role="tab" title="Etape 1 : Organisation"> <span class="round-tab"> <i class="glyphicon glyphicon-road"></i> </span> </a> </li> <li role="presentation" class="disabled"> <a href="#utilisateur" data-toggle="tab" aria-controls="step2" role="tab" title="Etape 2 : Master Admin"> <span class="round-tab"> <i class="glyphicon glyphicon-user"></i> </span> </a> </li> <li role="presentation" class="disabled"> <a href="#etablissment" data-toggle="tab" aria-controls="step3" role="tab" title="Etape 3 : Etablissements"> <span class="round-tab"> <i class="glyphicon glyphicon-home"></i> </span> </a> </li> <li role="presentation" class="disabled"> <a href="#complete" data-toggle="tab" aria-controls="complete" role="tab" title="Complete"> <span class="round-tab"> <i class="glyphicon glyphicon-ok"></i> </span> </a> </li> </ul> </div> <form role="form"> <div class="tab-content"> <div class="tab-pane active" role="tabpanel" id="organisation"> <h3>Creation d'une organisation</h3> <div class="form-content col-full-page box-body"> <div class="form-group"> <label for="code" class="col-sm-4 control-label" data-required="">Code organisation</label> <div class="col-sm-8"> <input id="code" type="text" data-required="" autofocus="" class="form-control" name="code" value=""> </div> </div> <div class="form-group"> <label for="nom" class="col-sm-4 control-label" data-required="">Nom</label> <div class="col-sm-8"> <input id="nom" type="text" data-required="" class="form-control" name="nom" value=""> </div> </div> <div class="form-group"> <label class="col-sm-4 control-label">Logo</label> <div class="col-sm-8"> <div class="fileinput fileinput-new" data-provides="fileinput"> <div class="col-md-6"> <div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 100px; height: 100px;"> </div> </div> <div class="col-md-6"> <div> <span class="btn btn-default btn-file"> <span class="fileinput-new">Sélectionner une image</span> <span class="fileinput-exists">Modifier</span> <input type="file" id="image" name="image"> </span> <a href="#" class="btn btn-default" data-dismiss="fileinput">Retirer</a> </div> </div> </div> </div> </div> <div class="form-group"> <label for="adresse" class="col-sm-4 control-label">Numéro et voie</label> <div class="col-sm-8"> <input id="adresse" type="text" class="form-control" name="adresse" value=""> </div> </div> <div class="form-group"> <label for="complement" class="col-sm-4 control-label">Complément adresse</label> <div class="col-sm-8"> <input id="complement" type="text" class="form-control" name="complement" value=""> </div> </div> <div class="form-group"> <div class="col-sm-4 text-right"> <label for="zip" class="control-label">Code Postal / </label> <label for="ville" class="control-label">Localité</label> </div> <div> <div class="col-sm-2"> <input id="zip" type="text" class="form-control" name="zip" value=""> </div> </div> <div> <div class="col-sm-6"> <input id="ville" type="text" class="form-control" name="ville" value=""> </div> </div> </div> <div class="form-group"> <label for="paysId" class="col-sm-4 control-label">Pays</label> <div class="col-sm-8"> <select id="paysId" name="paysId" class="form-control"> <option disabled="" selected="" value="">Choisir...</option> <option value="1">France</option> <option value="2">Allemagne</option> <option value="3">Belgique</option> <option value="4">Italie</option> <option value="5">Espagne</option> <option value="21">Pologne</option> </select> </div> </div> </div> <ul class="list-inline pull-right"> <li><button type="button" class="btn btn-primary next-step">Enregistrer et passer au suivant</button></li> </ul> </div> <div class="tab-pane" role="tabpanel" id="utilisateur"> <h3>Master Admin</h3> <div class="form-content col-full-page box-body"> <div class="form-group"> <div> <label for="civiliteCode" class="col-sm-2 control-label">Titre</label> <div class="col-sm-4"> <select id="civiliteCode" name="civiliteCode" class="form-control"> <option disabled="" value="">Choisir...</option> </select> </div> </div> </div> <div class="form-group"> <div> <label for="nom" class="col-sm-2 control-label" data-required="">Nom</label> <div class="col-sm-4"> <input id="nom" type="text" onblur="ajax(event, '#utilisateurForm', '#suggestions', '', '/admin/utilisateurs/suggestions')" data-required="" class="form-control" name="nom" value=""> </div> </div> <div> <label for="prenom" class="col-sm-2 control-label" data-required="">Prénom</label> <div class="col-sm-4"> <input id="prenom" type="text" onblur="ajax(event, '#utilisateurForm', '#suggestions', '', '/admin/utilisateurs/suggestions')" data-required="" class="form-control" name="prenom" value=""> </div> </div> </div> <div class="form-group"> <label for="username" class="col-sm-2 control-label">Identifiant</label> <div class="col-sm-4"> <input id="username" type="text" class="form-control" name="username" value=""> </div> <div id="suggestions"> <label for="suggestion" class="col-sm-2 control-label">Suggestions</label> <div class="col-sm-4"> <select id="suggestion" class="form-control" onchange="setValue('#username', this.value)"> <option disabled="" selected="" value="">Choisir...</option> </select> </div> </div> </div> <div class="form-group"> <div> <label for="telephone" class="col-sm-2 control-label">Téléphone</label> <div class="col-sm-4"> <input id="telephone" type="text" class="form-control" name="telephone" value=""> </div> </div> <div> <label for="telephonePortable" class="col-sm-2 control-label">Téléphone portable</label> <div class="col-sm-4"> <input id="telephonePortable" type="text" class="form-control" name="telephonePortable" value=""> </div> </div> </div> <div class="form-group"> <div> <label for="fax" class="col-sm-2 control-label">Fax</label> <div class="col-sm-4"> <input id="fax" type="text" class="form-control" name="fax" value=""> </div> </div> <div> <label for="email" class="col-sm-2 control-label">e-mail</label> <div class="col-sm-4"> <input id="email" type="text" class="form-control" name="email" value=""> </div> </div> </div> <div class="form-group"> <div> <label for="dateDebutActif" class="col-sm-2 control-label" data-required="">Date d'entrée</label> <div class="col-sm-4"> <input id="dateDebutActif" type="date" data-required="" class="form-control" name="dateDebutActif" value=""> </div> </div> <div> <label for="dateFinActif" class="col-sm-2 control-label">Date de révocation</label> <div class="col-sm-4"> <input id="dateFinActif" type="date" class="form-control" name="dateFinActif" value=""> </div> </div> </div> </div> <ul class="list-inline pull-right"> <li><button type="button" class="btn btn-default prev-step">Précedent</button></li> <li><button type="button" class="btn btn-default next-step">Reprendre plus tard</button></li> <li><button type="button" class="btn btn-primary next-step">Enregistrer et continuer</button></li> </ul> </div> <div class="tab-pane" role="tabpanel" id="etablissment"> <h3>Etablissements</h3> <button type="button" class="btn btn-default prev-step"><span class="glyphicon glyphicon-download-alt"></span>Importer un csv</button> <div class="form-content col-full-page box-body"> <div class="form-group"> <label for="code" class="col-sm-4 control-label" data-required="">Code</label> <div class="col-sm-8"> <input id="code" type="text" data-required="" autofocus="" class="form-control" name="code" value=""> </div> </div> <div class="form-group"> <label for="nom" class="col-sm-4 control-label" data-required="">Nom</label> <div class="col-sm-8"> <input id="nom" type="text" data-required="" class="form-control" name="nom" value=""> </div> </div> <div class="form-group"> <label for="adresse" class="col-sm-4 control-label">Numéro et voie</label> <div class="col-sm-8"> <input id="adresse" type="text" class="form-control" name="adresse" value=""> </div> </div> <div class="form-group"> <label for="complement" class="col-sm-4 control-label">Complément adresse</label> <div class="col-sm-8"> <input id="complement" type="text" class="form-control" name="complement" value=""> </div> </div> <div class="form-group"> <div class="col-sm-4 text-right"> <label for="zip" class="control-label">Code Postal / </label> <label for="ville" class="control-label">Localité</label> </div> <div> <div class="col-sm-2"> <input id="zip" type="text" class="form-control" name="zip" value=""> </div> </div> <div> <div class="col-sm-6"> <input id="ville" type="text" class="form-control" name="ville" value=""> </div> </div> </div> <div class="form-group"> <label for="paysId" class="col-sm-4 control-label" data-required="">Pays</label> <div class="col-sm-6"> <select class="form-control" name="paysId" id="paysId" data-required=""> <option disabled="" value="" selected="selected">Choisir...</option> <option value="1">France</option> <option value="2">Allemagne</option> <option value="3">Belgique</option> <option value="4">Italie</option> <option value="5">Espagne</option> <option value="21">Pologne</option> </select> </div> </div> <div class="form-group"> <label for="arbreRoleId" class="col-sm-4 control-label">Modèle d'arbre de roles</label> <div class="col-sm-6"> <select class="form-control" name="arbreRoleId" id="arbreRoleId"> <option disabled="" value="" selected="selected">Choisir...</option> <option value="21">Groupe</option> <option value="22">EHPAD classique</option> <option value="23">EHPAD Grande capacité</option> <option value="24">SSR</option> </select> </div> </div> <ul class="list-inline pull-right"> <li><button type="button" class="btn btn-default prev-step">Precedent</button></li> <li><button type="button" class="btn btn-default next-step">Reprendre plus tard</button></li> <li><button type="button" class="btn btn-default next-step">Enregistrer et Ajouter une autre etablissement</button></li> <li><button type="button" class="btn btn-primary btn-info-full next-step">Finaliser la création</button></li> </ul> <div class="table-responsive"> <table class="table table-bordered"> <tr> <td></td> </tr> <tr> <td></td> </tr> </table> </div> </div> </div> <div class="tab-pane" role="tabpanel" id="complete"> <h3>Félicitation</h3> <p>You have successfully completed all steps.</p> </div> <div class="clearfix"></div> </div> </form> </div> </section> </div> </div>

.wizard { margin: 20px auto; background: #fff; } .wizard .nav-tabs { position: relative; margin: 40px auto; margin-bottom: 0; border-bottom-color: #e0e0e0; } .wizard > div.wizard-inner { position: relative; } .connecting-line { height: 2px; background: #e0e0e0; position: absolute; width: 80%; margin: 0 auto; left: 0; right: 0; top: 50%; z-index: 1; } .wizard .nav-tabs > li.active > a, .wizard .nav-tabs > li.active > a:hover, .wizard .nav-tabs > li.active > a:focus { color: #555555; cursor: default; border: 0; border-bottom-color: transparent; } span.round-tab { width: 70px; height: 70px; line-height: 70px; display: inline-block; border-radius: 100px; background: #fff; border: 2px solid #e0e0e0; z-index: 2; position: absolute; left: 0; text-align: center; font-size: 25px; } span.round-tab i{ color:#555555; } .wizard li.active span.round-tab { background: #fff; border: 2px solid #5bc0de; } .wizard li.active span.round-tab i{ color: #5bc0de; } span.round-tab:hover { color: #333; border: 2px solid #333; } .wizard .nav-tabs > li { width: 25%; } .wizard li:after { content: " "; position: absolute; left: 46%; opacity: 0; margin: 0 auto; bottom: 0px; border: 5px solid transparent; border-bottom-color: #5bc0de; transition: 0.1s ease-in-out; } .wizard li.active:after { content: " "; position: absolute; left: 46%; opacity: 1; margin: 0 auto; bottom: 0px; border: 10px solid transparent; border-bottom-color: #5bc0de; } .wizard .nav-tabs > li a { width: 70px; height: 70px; margin: 20px auto; border-radius: 100%; padding: 0; } .wizard .nav-tabs > li a:hover { background: transparent; } .wizard .tab-pane { position: relative; padding-top: 50px; } .wizard h3 { margin-top: 0; } @media( max-width : 585px ) { .wizard { width: 90%; height: auto !important; } span.round-tab { font-size: 16px; width: 50px; height: 50px; line-height: 50px; } .wizard .nav-tabs > li a { width: 50px; height: 50px; line-height: 50px; } .wizard li.active:after { content: " "; position: absolute; left: 35%; } }

$(document).ready(function () { //Initialize tooltips $('.nav-tabs > li a[title]').tooltip(); //Wizard $('a[data-toggle="tab"]').on('show.bs.tab', function (e) { var $target = $(e.target); if ($target.parent().hasClass('disabled')) { return false; } }); $(".next-step").click(function (e) { var $active = $('.wizard .nav-tabs li.active'); $active.next().removeClass('disabled'); nextTab($active); }); $(".prev-step").click(function (e) { var $active = $('.wizard .nav-tabs li.active'); prevTab($active); }); }); function nextTab(elem) { $(elem).next().find('a[data-toggle="tab"]').click(); } function prevTab(elem) { $(elem).prev().find('a[data-toggle="tab"]').click(); }