<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 ---------->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<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 Personales</p>
</div>
<div class="stepwizard-step">
<a href="#step-2" type="button" class="btn btn-default btn-circle" disabled="disabled">2</a>
<p>Datos Fisicos</p>
</div>
<div class="stepwizard-step">
<a href="#step-3" type="button" class="btn btn-default btn-circle" disabled="disabled">3</a>
<p>Dirección</p>
</div>
<div class="stepwizard-step">
<a href="#step-4" type="button" class="btn btn-default btn-circle" disabled="disabled">4</a>
<p>Deporte</p>
</div>
<div class="stepwizard-step">
<a href="#step-5" type="button" class="btn btn-default btn-circle" disabled="disabled">5</a>
<p>Imagenes</p>
</div>
<div class="stepwizard-step">
<a href="#step-6" type="button" class="btn btn-default btn-circle" disabled="disabled">6</a>
<p>Formulario</p>
</div>
<div class="stepwizard-step">
<a href="#step-7" type="button" class="btn btn-default btn-circle" disabled="disabled">7</a>
<p>Completado</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">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Cedula</label>
<input maxlength="100" type="text" required="required" class="form-control" placeholder="Ingrese una cedula" />
</div>
<div class="form-group">
<label class="control-label">Nombre</label>
<input maxlength="100" type="text" required="required" class="form-control" placeholder="Ingrese el nombre" />
</div>
<div class="form-group">
<label class="control-label">1° Apellido</label>
<input maxlength="100" type="text" required="required" class="form-control" placeholder="Ingrese el 1° apellido" />
</div>
<div class="form-group">
<label class="control-label">2° Apellido</label>
<input maxlength="100" type="text" required="required" class="form-control" placeholder="Ingrese el 2° apellido" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Correo</label>
<input maxlength="100" type="text" class="form-control" placeholder="Ingrese un correo" />
</div>
<div class="form-group">
<label class="control-label">Telefono</label>
<input maxlength="100" type="text" class="form-control" placeholder="Ingrese un numero de telefono" />
</div>
<div class="form-group">
<label class="control-label">Direccion Exacta</label>
<textarea placeholder="Dirección Exacta" rows="4" cols="50"></textarea>
</div>
</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 Fisicos</h3>
<div class="form-group">
<label class="control-label">Estatura</label>
<input maxlength="200" type="text" required="required" class="form-control" placeholder="Ingrese una estatura" />
</div>
<div class="form-group">
<label class="control-label">Peso</label>
<input maxlength="200" type="text" required="required" class="form-control" placeholder="Ingrese un peso" />
</div>
<div class="form-group">
<label class="control-label">Tipo de sangre</label>
<input maxlength="200" type="text" required="required" class="form-control" placeholder="Seleccione tipo de sangre" />
</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-3">
<div class="col-xs-12">
<div class="col-md-12">
<h3> Dirección</h3>
<div class="form-group">
<label class="control-label">Provincia</label>
<input maxlength="200" type="text" required="required" class="form-control" placeholder="Aquí va a haber un dropdown para proviencia" />
</div>
<div class="form-group">
<label class="control-label">Canton</label>
<input maxlength="200" type="text" required="required" class="form-control" placeholder="Aquí va a haber un dropdown para proviencia" />
</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-4">
<div class="col-xs-12">
<div class="col-md-12">
<h3> Deporte</h3>
<div class="form-group">
<label class="control-label">Seleccione un deporte</label>
<input maxlength="200" type="text" required="required" class="form-control" placeholder="Seleccione un deporte" />
</div>
<div class="form-group">
<label class="control-label">Seleccione una categoria</label>
<input maxlength="200" type="text" required="required" class="form-control" placeholder="Seleccione una categoria" />
</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-5">
<div class="col-xs-12">
<div class="col-md-12">
<h3> Imagenes</h3>
<div class="container">
<div class="form-group">
<h3>Foto cédula frente</h3>
<input id="file-1" type="file" class="file" multiple=false data-preview-file-type="image">
</div>
<div class="form-group">
<h3>Foto cédula atras</h3>
<input id="file-1" type="file" class="file" multiple=false data-preview-file-type="image">
</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-6">
<div class="col-xs-12">
<div class="col-md-12">
<h3> Formulario</h3>
<div class="container">
<div class="form-group">
<h3>Boleta de inscripción</h3>
<input id="file-1" type="file" class="file" multiple=false data-preview-file-type="text">
</div>
<div class="form-group">
<h3>Pase cantonal</h3>
<input id="file-1" type="file" class="file" multiple=false data-preview-file-type="text">
</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-7">
<div class="col-xs-12">
<div class="col-md-12">
<h3> ¡Fomulario Completado!!!</h3>
<button class="btn btn-success btn-lg pull-right" type="submit">Enviar</button>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
.stepwizard-step p {
margin-top: 5px;
}
.stepwizard-row {
display: table-row;
}
.stepwizard {
margin-top: 30px;
display: table;
width: 90%;
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-file {
position: relative;
overflow: hidden;
}
.btn-file input[type=file] {
position: absolute;
top: 0;
right: 0;
min-width: 80%;
min-height: 80%;
font-size: 999px;
text-align: right;
filter: alpha(opacity=0);
opacity: 0;
background: red;
cursor: inherit;
display: block;
}
.file-caption-disabled {
background-color: #EEEEEE;
cursor: not-allowed;
opacity: 1;
}
.file-input .btn[disabled], .file-input .btn .disabled {
cursor: not-allowed;
}
.file-preview {
border-radius: 5px;
border: 1px solid #ddd;
padding: 5px;
width: 100%;
margin-bottom: 5px;
}
.file-preview-frame {
display: table;
margin: 8px;
height: 160px;
border: 1px solid #ddd;
box-shadow: 1px 1px 5px 0px #a2958a;
padding: 6px;
float: left;
text-align: center;
}
.file-preview-frame:hover {
background-color: #eee;
box-shadow: 2px 2px 5px 0px #333;
}
.file-preview-image {
height: 150px;
vertical-align: text-center;
}
.file-preview-text {
display: table-cell;
width: 150px;
height: 150px;
color: #428bca;
font-size: 11px;
vertical-align: middle;
text-align: center;
}
.file-preview-other {
display: table-cell;
width: 150px;
height: 150px;
font-family: Monaco, Consolas, monospace;
font-size: 11px;
vertical-align: middle;
text-align: center;
}
.file-input-new .file-preview, .file-input-new .close, .file-input-new .glyphicon-file, .file-input-new .fileinput-remove-button, .file-input-new .fileinput-upload-button {
display: none;
}
.loading {
background: transparent url('../img/loading.gif') no-repeat scroll center center content-box !important;
}
.wrap-indicator {
font-weight: bold;
color: #245269;
cursor: pointer;
}
$(document).ready(function () {
var navListItems = $('div.setup-panel div a'),
allWells = $('.setup-content'),
allNextBtn = $('.nextBtn');
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');
});
$('div.setup-panel div a.btn-primary').trigger('click');
(function ($) {
var MAIN_TEMPLATE_1 = '{preview}\n' +
'<div class="input-group {class}">\n' +
' {caption}\n' +
' <div class="input-group-btn">\n' +
' {remove}\n' +
' {upload}\n' +
' {browse}\n' +
' </div>\n' +
'</div>';
var MAIN_TEMPLATE_2 = '{preview}\n{remove}\n{upload}\n{browse}\n';
var PREVIEW_TEMPLATE = '<div class="file-preview {class}">\n' +
' <div class="file-preview-status text-center text-success"></div>\n' +
' <div class="close fileinput-remove text-right">×</div>\n' +
' <div class="file-preview-thumbnails"></div>\n' +
' <div class="clearfix"></div>' +
'</div>';
var CAPTION_TEMPLATE = '<div class="form-control file-caption {class}">\n' +
' <span class="glyphicon glyphicon-file"></span> <span class="file-caption-name"></span>\n' +
'</div>';
var MODAL_TEMPLATE = '<div id="{id}" class="modal fade">\n' +
' <div class="modal-dialog modal-lg">\n' +
' <div class="modal-content">\n' +
' <div class="modal-header">\n' +
' <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>\n' +
' <h3 class="modal-title">Detailed Preview <small>{title}</small></h3>\n' +
' </div>\n' +
' <div class="modal-body">\n' +
' <textarea class="form-control" style="font-family:Monaco,Consolas,monospace; height: {height}px;" readonly>{body}</textarea>\n' +
' </div>\n' +
' </div>\n' +
' </div>\n' +
'</div>\n';
var isEmpty = function (value, trim) {
return value === null || value === undefined || value == []
|| value === '' || trim && $.trim(value) === '';
};
var getValue = function (options, param, value) {
return (isEmpty(options) || isEmpty(options[param])) ? value : options[param];
};
var isImageFile = function (type, name) {
return (typeof type !== "undefined") ? type.match('image.*') : name.match(/\.(gif|png|jpe?g)$/i);
};
var isTextFile = function (type, name) {
return (typeof type !== "undefined") ? type.match('text.*') : name.match(/\.(txt|md|csv|htm|html|php|ini)$/i);
};
var uniqId = function () {
return Math.round(new Date().getTime() + (Math.random() * 100));
};
var FileInput = function (element, options) {
this.$element = $(element);
this.showCaption = options.showCaption;
this.showPreview = options.showPreview;
this.showRemove = options.showRemove;
this.showUpload = options.showUpload;
this.captionClass = options.captionClass;
this.previewClass = options.previewClass;
this.mainClass = options.mainClass;
if (isEmpty(options.mainTemplate)) {
this.mainTemplate = this.showCaption ? MAIN_TEMPLATE_1 : MAIN_TEMPLATE_2;
}
else {
this.mainTemplate = options.mainTemplate;
}
this.previewTemplate = (this.showPreview) ? options.previewTemplate : '';
this.captionTemplate = options.captionTemplate;
this.browseLabel = options.browseLabel;
this.browseIcon = options.browseIcon;
this.browseClass = options.browseClass;
this.removeLabel = options.removeLabel;
this.removeIcon = options.removeIcon;
this.removeClass = options.removeClass;
this.uploadLabel = options.uploadLabel;
this.uploadIcon = options.uploadIcon;
this.uploadClass = options.uploadClass;
this.uploadUrl = options.uploadUrl;
this.msgLoading = options.msgLoading;
this.msgProgress = options.msgProgress;
this.msgSelected = options.msgSelected;
this.previewFileType = options.previewFileType;
this.wrapTextLength = options.wrapTextLength;
this.wrapIndicator = options.wrapIndicator;
this.isDisabled = this.$element.attr('disabled') || this.$element.attr('readonly');
if (isEmpty(this.$element.attr('id'))) {
this.$element.attr('id', uniqId());
}
this.$container = this.createContainer();
/* Initialize plugin option parameters */
this.$captionContainer = getValue(options, 'elCaptionContainer', this.$container.find('.file-caption'));
this.$caption = getValue(options, 'elCaptionText', this.$container.find('.file-caption-name'));
this.$previewContainer = getValue(options, 'elPreviewContainer', this.$container.find('.file-preview'));
this.$preview = getValue(options, 'elPreviewImage', this.$container.find('.file-preview-thumbnails'));
this.$previewStatus = getValue(options, 'elPreviewStatus', this.$container.find('.file-preview-status'));
this.$name = this.$element.attr('name') || options.name;
this.$hidden = this.$container.find('input[type=hidden][name="' + this.$name + '"]');
if (this.$hidden.length === 0) {
this.$hidden = $('<input type="hidden" />');
this.$container.prepend(this.$hidden);
}
this.original = {
preview: this.$preview.html(),
hiddenVal: this.$hidden.val()
};
this.listen()
};
FileInput.prototype = {
constructor: FileInput,
listen: function () {
var self = this;
self.$element.on('change', $.proxy(self.change, self));
$(self.$element[0].form).on('reset', $.proxy(self.reset, self));
self.$container.find('.fileinput-remove').on('click', $.proxy(self.clear, self));
},
trigger: function (e) {
var self = this;
self.$element.trigger('click');
e.preventDefault();
},
clear: function (e) {
var self = this;
if (e) {
e.preventDefault();
}
self.$hidden.val('');
self.$hidden.attr('name', self.name);
self.$element.attr('name', '');
self.$element.val('');
if (e !== false) {
self.$element.trigger('change');
self.$element.trigger('fileclear');
}
self.$preview.html('');
self.$caption.html('');
self.$container.removeClass('file-input-new').addClass('file-input-new');
},
reset: function (e) {
var self = this;
self.clear(false);
self.$hidden.val(self.original.hiddenVal);
self.$preview.html(self.original.preview);
self.$container.find('.fileinput-filename').text('');
self.$element.trigger('filereset');
},
change: function (e) {
var self = this;
var elem = self.$element, files = elem.get(0).files, numFiles = files ? files.length : 1,
label = elem.val().replace(/\\/g, '/').replace(/.*\//, ''), preview = self.$preview,
container = self.$previewContainer, status = self.$previewStatus, msgLoading = self.msgLoading,
msgProgress = self.msgProgress, msgSelected = self.msgSelected, tfiles,
fileType = self.previewFileType, wrapLen = parseInt(self.wrapTextLength),
wrapInd = self.wrapIndicator;
if (e.target.files === undefined) {
tfiles = e.target && e.target.value ? [
{name: e.target.value.replace(/^.+\\/, '')}
] : [];
}
else {
tfiles = e.target.files;
}
if (tfiles.length === 0) {
return;
}
preview.html('');
var total = tfiles.length, self = self;
for (var i = 0; i < total; i++) {
(function (file) {
var caption = file.name;
var isImg = isImageFile(file.type, file.name);
var isTxt = isTextFile(file.type, file.name);
if (preview.length > 0 && (fileType == "any" ? (isImg || isTxt) : (fileType == "text" ? isTxt : isImg)) && typeof FileReader !== "undefined") {
var reader = new FileReader();
status.html(msgLoading);
container.addClass('loading');
reader.onload = function (theFile) {
var content = '', modal = "";
if (isTxt) {
var strText = theFile.target.result;
if (strText.length > wrapLen) {
var id = uniqId(), height = window.innerHeight * .75,
modal = MODAL_TEMPLATE.replace("{id}", id).replace("{title}", caption).replace("{body}", strText).replace("{height}", height);
wrapInd = wrapInd.replace("{title}", caption).replace("{dialog}", "$('#" + id + "').modal('show')");
strText = strText.substring(0, (wrapLen - 1)) + wrapInd;
}
content = '<div class="file-preview-frame"><div class="file-preview-text" title="' + caption + '">' + strText + '</div></div>' + modal;
}
else {
content = '<div class="file-preview-frame"><img src="' + theFile.target.result + '" class="file-preview-image" title="' + caption + '" alt="' + caption + '"></div>';
}
preview.append("\n" + content);
if (i >= total - 1) {
container.removeClass('loading');
status.html('');
}
};
reader.onprogress = function (data) {
if (data.lengthComputable) {
var progress = parseInt(((data.loaded / data.total) * 100), 10);
var msg = msgProgress.replace('{percent}', progress).replace('{file}', file.name);
status.html(msg);
}
};
if (isTxt) {
reader.readAsText(file);
}
else {
reader.readAsDataURL(file);
}
}
else {
preview.append("\n" + '<div class="file-preview-frame"><div class="file-preview-other"><h2><i class="glyphicon glyphicon-file"></i></h2>' + caption + '</div></div>');
}
})(tfiles[i]);
}
var log = numFiles > 1 ? msgSelected.replace('{n}', numFiles) : label;
self.$caption.html(log);
self.$container.removeClass('file-input-new');
elem.trigger('fileselect', [numFiles, label]);
},
createContainer: function () {
var self = this;
var container = $(document.createElement("div")).attr({"class": 'file-input file-input-new'}).html(self.renderMain());
self.$element.before(container);
container.find('.btn-file').append(self.$element);
return container;
},
renderMain: function () {
var self = this;
var preview = self.previewTemplate.replace('{class}', self.previewClass);
var css = self.isDisabled ? self.captionClass + ' file-caption-disabled' : self.captionClass;
var caption = self.captionTemplate.replace('{class}', css);
return self.mainTemplate.replace('{class}', self.mainClass).
replace('{preview}', preview).
replace('{caption}', caption).
replace('{upload}', self.renderUpload()).
replace('{remove}', self.renderRemove()).
replace('{browse}', self.renderBrowse());
},
renderBrowse: function () {
var self = this, css = self.browseClass + ' btn-file', status = '';
if (self.isDisabled) {
status = ' disabled ';
}
return '<div class="' + css + '"' + status + '> ' + self.browseIcon + self.browseLabel + ' </div>';
},
renderRemove: function () {
var self = this, css = self.removeClass + ' fileinput-remove fileinput-remove-button', status = '';
if (!self.showRemove) {
return '';
}
if (self.isDisabled) {
status = ' disabled ';
}
return '<button type="button" class="' + css + '"' + status + '>' + self.removeIcon + self.removeLabel + '</button>';
},
renderUpload: function () {
var self = this, content = '', status = '';
if (!self.showUpload) {
return '';
}
if (self.isDisabled) {
status = ' disabled ';
}
if (isEmpty(self.uploadUrl)) {
content = '<button type="submit" class="' + self.uploadClass + '"' + status + '>' + self.uploadIcon + self.uploadLabel + '</button>';
}
else {
content = '<a href="' + self.uploadUrl + '" class="' + self.uploadClass + '"' + status + '>' + self.uploadIcon + self.uploadLabel + '</a>';
}
return content;
},
}
$.fn.fileinput = function (options) {
return this.each(function () {
var $this = $(this), data = $this.data('fileinput')
if (!data) {
$this.data('fileinput', (data = new FileInput(this, options)))
}
if (typeof options == 'string') {
data[options]()
}
})
};
//FileInput plugin definition
$.fn.fileinput = function (option) {
var args = Array.apply(null, arguments);
args.shift();
return this.each(function () {
var $this = $(this),
data = $this.data('fileinput'),
options = typeof option === 'object' && option;
if (!data) {
$this.data('fileinput', (data = new FileInput(this, $.extend({}, $.fn.fileinput.defaults, options, $(this).data()))));
}
if (typeof option === 'string') {
data[option].apply(data, args);
}
});
};
$.fn.fileinput.defaults = {
showRemove: true,
showUpload: true,
captionClass: '',
previewClass: '',
mainClass: '',
mainTemplate: null,
previewTemplate: PREVIEW_TEMPLATE,
captionTemplate: CAPTION_TEMPLATE,
browseLabel: 'Browse …',
browseIcon: '<i class="glyphicon glyphicon-folder-open"></i> ',
browseClass: 'btn btn-primary',
removeLabel: 'Remove',
removeIcon: '<i class="glyphicon glyphicon-ban-circle"></i> ',
removeClass: 'btn btn-default',
uploadLabel: 'Upload',
uploadIcon: '<i class="glyphicon glyphicon-upload"></i> ',
uploadClass: 'btn btn-default',
uploadUrl: null,
msgLoading: 'Loading …',
msgProgress: 'Loaded {percent}% of {file}',
msgSelected: '{n} files selected',
previewFileType: 'image',
wrapTextLength: 250,
wrapIndicator: ' <span class="wrap-indicator" title="{title}" onclick="{dialog}">[…]</span>',
elCaptionContainer: null,
elCaptionText: null,
elPreviewContainer: null,
elPreviewImage: null,
elPreviewStatus: null
};
$(function () {
var $element = $('input.file[type=file]');
if ($element.length > 0) {
$element.fileinput();
}
});
})(window.jQuery);
$("#file-3").fileinput({
showCaption: true,
browseClass: "btn btn-primary btn-lg",
fileType: ".pdf"
});
});
