"Postulacion Curso"
Bootstrap 3.3.0 Snippet by Wozz

<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="stepwizard"> <div class="stepwizard-row setup-panel"> <div class="stepwizard-step"> <a href="#step-1" type="button" class="btn btn-primary btn-circle">1</a> <p>Datos postulante</p> </div> <div class="stepwizard-step"> <a href="#step-2" type="button" class="btn btn-default btn-circle" disabled="disabled">2</a> <p>Datos Curso</p> </div> <div class="stepwizard-step"> <a href="#step-3" type="button" class="btn btn-default btn-circle" disabled="disabled">3</a> <p>Confirmación</p> </div> </div> </div> <form role="form"> <div class="row setup-content" id="step-1"> <div class="col-xs-12"> <div class="col-md-12"> <h3>Datos postulante</h3> <div class="form-group"> <label class="control-label col-md-12">Rut</label> <input type="Text" id="rut_postulante" class="form-control input-sm floatlabel" placeholder="<?php echo $resultado['rut']; ?>" readonly/> </div> <div class="form-group"> <label class="control-label col-md-12">Nombre</label> <input type="Text" id="nombre_postulante" class="form-control input-sm floatlabel" placeholder="<?php echo $resultado['nombre_postulante']; ?>" readonly/> </div> <div class="form-group col-md-6"> <label class="control-label">Apellido Paterno</label> <input type="Text" class="form-control input-sm floatlabel" placeholder="<?php echo $resultado['apellidoP']; ?>" readonly/> </div> <div class="form-group col-md-6"> <label class="control-label">Apellido Materno</label> <input type="Text" class="form-control input-sm floatlabel" placeholder="<?php echo $resultado['apellidoM']; ?>" readonly/> </div> <div class="col-xs-6 col-sm-4"> <label class="control-label">Sexo</label> <a class="btn btn-primary btn-select"> <input type="hidden" class="btn-select-input" id="lstSexo" name="sexo" /> <span class="btn-select-value">Select an Item</span> <span class='btn-select-arrow glyphicon glyphicon-chevron-down'></span> <ul> <li>Femenino</li> <li class="selected">Masculino</li> </ul> </a> </div> <div class="form-group col-md-4"> <label class="control-label">Teléfono</label> <input type="Text" class="form-control input-sm floatlabel" placeholder="Numero de Teléfono" readonly/> </div> <div class="form-group registration-date col-md-4"> <label class="control-label" for="registration-date">Fecha de Nacimiento</label> <div class="input-group registration-date-time" required="required"> <span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-calendar" aria-hidden="true"></span></span> <input class="form-control" name="registration_date" id="registration-date" type="date"> </div> </div> <button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Siguiente</button> </div> </div> </div> <div class="row setup-content" id="step-2"> <div class="col-xs-12"> <div class="col-md-12"> <h3>Datos Curso</h3> <div class="form-group"> <label class="control-label">Curso</label> <select class="selectpicker form-control"> <option value="">Seleccione Curso</option> <?php while($row = mysql_fetch_array($listarCurso)) { ?> <option value="<?php echo $row['idCurso']; ?>"> <?php echo $row['nombre_curso'];?> </option> <?php } ?> </select> </div> <div class="form-group"> <label class="control-label">Modalidad Curso</label> <select class="selectpicker form-control"> <option value="">Seleccione Modalidad</option> <?php while($row = mysql_fetch_array($listarModalidad)) { ?> <option value="<?php echo $row['idmodalidad']; ?>"> <?php echo $row['jornada'];?> </option> <?php } ?> </select> </div> <div class="form-group"> <label for="validate-email">E-mail</label> <div class="input-group" data-validate="email"> <input type="text" class="form-control" name="validate-email" id="validate-email" placeholder="Validate Email" required> <span class="input-group-addon danger"><span class="glyphicon glyphicon-remove"></span></span> </div> </div> <button class="btn btn-default prevBtn btn-lg pull-left" type="button" >Anterior</button> <button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Siguiente</button> </div> </div> </div> </form> </div
body{ /* Safari 4-5, Chrome 1-9 background: -webkit-gradient(radial, center center, 0, center center, 460, from(#1a82f7), to(#2F2727)); /* Safari 5.1+, Chrome 10+ background: -webkit-radial-gradient(circle, #1a82f7, #2F2727); /* Firefox 3.6+ background: -moz-radial-gradient(circle, #1a82f7, #2F2727); /* IE 10 background: -ms-radial-gradient(circle, #1a82f7, #2F2727);*/ height:600px; margin-top:40px; } .stepwizard-step p { margin-top: 10px; } .stepwizard-row { display: table-row; } .stepwizard { display: table; width: 100%; position: relative; } .stepwizard-step button[disabled] { opacity: 1 !important; filter: alpha(opacity=100) !important; } .stepwizard-row:before { top: 14px; bottom: 0; position: absolute; content: " "; width: 100%; height: 1px; background-color: #ccc; z-order: 0; } .stepwizard-step { display: table-cell; text-align: center; position: relative; } .btn-circle { width: 30px; height: 30px; text-align: center; padding: 6px 0; font-size: 12px; line-height: 1.428571429; border-radius: 15px; } .btn-select { position: relative; padding: 0; min-width: 236px; width: 100%; border-radius: 0; margin-bottom: 20px; } .btn-select .btn-select-value { padding: 6px 12px; display: block; position: absolute; left: 0; right: 34px; text-align: left; text-overflow: ellipsis; overflow: hidden; border-top: none !important; border-bottom: none !important; border-left: none !important; } .btn-select .btn-select-arrow { float: right; line-height: 20px; padding: 6px 10px; top: 0; } .btn-select ul { display: none; background-color: white; color: black; clear: both; list-style: none; padding: 0; margin: 0; border-top: none !important; position: absolute; left: -1px; right: -1px; top: 33px; z-index: 999; } .btn-select ul li { padding: 3px 6px; text-align: left; } .btn-select ul li:hover { background-color: #f4f4f4; } .btn-select ul li.selected { color: white; } /* Default Start */ .btn-select.btn-default:hover, .btn-select.btn-default:active, .btn-select.btn-default.active { border-color: #ccc; } .btn-select.btn-default ul li.selected { background-color: #ccc; } .btn-select.btn-default ul, .btn-select.btn-default .btn-select-value { background-color: white; border: #ccc 1px solid; } .btn-select.btn-default:hover, .btn-select.btn-default.active { background-color: #e6e6e6; } /* Default End */ /* Primary Start */ .btn-select.btn-primary:hover, .btn-select.btn-primary:active, .btn-select.btn-primary.active { border-color: #286090; } .btn-select.btn-primary ul li.selected { background-color: #2e6da4; color: white; } .btn-select.btn-primary ul { border: #2e6da4 1px solid; } .btn-select.btn-primary .btn-select-value { background-color: #428bca; border: #2e6da4 1px solid; } .btn-select.btn-primary:hover, .btn-select.btn-primary.active { background-color: #286090; } /* Primary End */ /* Success Start */ .btn-select.btn-success:hover, .btn-select.btn-success:active, .btn-select.btn-success.active { border-color: #4cae4c; } .btn-select.btn-success ul li.selected { background-color: #4cae4c; color: white; } .btn-select.btn-success ul { border: #4cae4c 1px solid; } .btn-select.btn-success .btn-select-value { background-color: #5cb85c; border: #4cae4c 1px solid; } .btn-select.btn-success:hover, .btn-select.btn-success.active { background-color: #449d44; } /* Success End */ /* info Start */ .btn-select.btn-info:hover, .btn-select.btn-info:active, .btn-select.btn-info.active { border-color: #46b8da; } .btn-select.btn-info ul li.selected { background-color: #46b8da; color: white; } .btn-select.btn-info ul { border: #46b8da 1px solid; } .btn-select.btn-info .btn-select-value { background-color: #5bc0de; border: #46b8da 1px solid; } .btn-select.btn-info:hover, .btn-select.btn-info.active { background-color: #269abc; } /* info End */ /* warning Start */ .btn-select.btn-warning:hover, .btn-select.btn-warning:active, .btn-select.btn-warning.active { border-color: #eea236; } .btn-select.btn-warning ul li.selected { background-color: #eea236; color: white; } .btn-select.btn-warning ul { border: #eea236 1px solid; } .btn-select.btn-warning .btn-select-value { background-color: #f0ad4e; border: #eea236 1px solid; } .btn-select.btn-warning:hover, .btn-select.btn-warning.active { background-color: #d58512; } /* warning End */ /* danger Start */ .btn-select.btn-danger:hover, .btn-select.btn-danger:active, .btn-select.btn-danger.active { border-color: #d43f3a; } @import url("http://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.5.4/bootstrap-select.min.css") .btn-select.btn-danger ul li.selected { background-color: #d43f3a; color: white; } .btn-select.btn-danger ul { border: #d43f3a 1px solid; } .btn-select.btn-danger .btn-select-value { background-color: #d9534f; border: #d43f3a 1px solid; } .btn-select.btn-danger:hover, .btn-select.btn-danger.active { background-color: #c9302c; } /* danger End */ .btn-select.btn-select-light .btn-select-value { background-color: white; color: black; } .input-group-addon.primary { color: rgb(255, 255, 255); background-color: rgb(50, 118, 177); border-color: rgb(40, 94, 142); } .input-group-addon.success { color: rgb(255, 255, 255); background-color: rgb(92, 184, 92); border-color: rgb(76, 174, 76); } .input-group-addon.info { color: rgb(255, 255, 255); background-color: rgb(57, 179, 215); border-color: rgb(38, 154, 188); } .input-group-addon.warning { color: rgb(255, 255, 255); background-color: rgb(240, 173, 78); border-color: rgb(238, 162, 54); } .input-group-addon.danger { color: rgb(255, 255, 255); background-color: rgb(217, 83, 79); border-color: rgb(212, 63, 58); }
$(document).ready(function () { var navListItems = $('div.setup-panel div a'), allWells = $('.setup-content'), allNextBtn = $('.nextBtn'), allPrevBtn = $('.prevBtn'); allWells.hide(); navListItems.click(function (e) { e.preventDefault(); var $target = $($(this).attr('href')), $item = $(this); if (!$item.hasClass('disabled')) { navListItems.removeClass('btn-primary').addClass('btn-default'); $item.addClass('btn-primary'); allWells.hide(); $target.show(); $target.find('input:eq(0)').focus(); } }); allNextBtn.click(function(){ var curStep = $(this).closest(".setup-content"), curStepBtn = curStep.attr("id"), nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"), curInputs = curStep.find("input[type='text'],input[type='url']"), isValid = true; $(".form-group").removeClass("has-error"); for(var i=0; i<curInputs.length; i++){ if (!curInputs[i].validity.valid){ isValid = false; $(curInputs[i]).closest(".form-group").addClass("has-error"); } } if (isValid) nextStepWizard.removeAttr('disabled').trigger('click'); }); allPrevBtn.click(function(){ var curStep = $(this).closest(".setup-content"), curStepBtn = curStep.attr("id"), prevStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().prev().children("a"); $(".form-group").removeClass("has-error"); prevStepWizard.removeAttr('disabled').trigger('click'); }); $('div.setup-panel div a.btn-primary').trigger('click'); }); $(document).ready(function () { $(".btn-select").each(function (e) { var value = $(this).find("ul li.selected").html(); if (value != undefined) { $(this).find(".btn-select-input").val(value); $(this).find(".btn-select-value").html(value); } }); }); $(document).on('click', '.btn-select', function (e) { e.preventDefault(); var ul = $(this).find("ul"); if ($(this).hasClass("active")) { if (ul.find("li").is(e.target)) { var target = $(e.target); target.addClass("selected").siblings().removeClass("selected"); var value = target.html(); $(this).find(".btn-select-input").val(value); $(this).find(".btn-select-value").html(value); } ul.hide(); $(this).removeClass("active"); } else { $('.btn-select').not(this).each(function () { $(this).removeClass("active").find("ul").hide(); }); ul.slideDown(300); $(this).addClass("active"); } }); $(document).on('click', function (e) { var target = $(e.target).closest(".btn-select"); if (!target.length) { $(".btn-select").removeClass("active").find("ul").hide(); } }); $(document).ready(function() { $('.input-group input[required]').on('keyup change', function() { var $form = $(this).closest('form'), $group = $(this).closest('.input-group'), $addon = $group.find('.input-group-addon'), $icon = $addon.find('span'), state = false; if (!$group.data('validate')) { state = $(this).val() ? true : false; }else if ($group.data('validate') == "email") { state = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test($(this).val()) } if (state) { $addon.removeClass('danger'); $addon.addClass('success'); $icon.attr('class', 'glyphicon glyphicon-ok'); }else{ $addon.removeClass('success'); $addon.addClass('danger'); $icon.attr('class', 'glyphicon glyphicon-remove'); } if ($form.find('.input-group-addon.danger').length == 0) { $form.find('[type="submit"]').prop('disabled', false); }else{ $form.find('[type="submit"]').prop('disabled', true); } }); $('.input-group input[required], .input-group textarea[required], .input-group select[required]').trigger('change'); });

Related: See More


Questions / Comments: