"Ejemplo Tabs para página ICODER"
Bootstrap 3.3.0 Snippet by chevan468

<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" }); });

Related: See More


Questions / Comments: