"akordion create article"
Bootstrap 3.2.0 Snippet by edzapratama

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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"> <div class="col-md-12"> <div class="panel-group" id="accordion"> <div class="panel panel-primary"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><span class="glyphicon glyphicon-file"> </span>POST NEW ARTICLE</a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in"> <div class="panel-body"> <div class="row"> <div class="col-md-12"> <div class="form-group"> <input type="text" class="form-control" placeholder="Title" required /> </div> <div class="form-group"> <textarea class="form-control" placeholder="Content" rows="5" required></textarea> </div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label for="category"> Category</label> <select class="form-control" id="category"> <option>Articles</option> <option>Tutorials</option> <option>Freebies</option> </select> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="tags"> Tags</label> <input type="text" class="form-control" id="tags" placeholder="Tags" /> </div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="well well-sm well-primary"> <div class="input-group image-preview"> <input type="text" class="form-control image-preview-filename" disabled="disabled"> <!-- don't give a name === doesn't send on POST/GET --> <span class="input-group-btn"> <!-- image-preview-clear button --> <button type="button" class="btn btn-default image-preview-clear" style="display:none;"> <span class="glyphicon glyphicon-remove"></span> Clear </button> <!-- image-preview-input --> <div class="btn btn-default image-preview-input"> <span class="glyphicon glyphicon-folder-open"></span> <span class="image-preview-input-title">Browse</span> <input type="file" accept="image/png, image/jpeg, image/gif" name="input-file-preview"/> <!-- rename it --> </div> </span> </div><!-- /input-group image-preview [TO HERE]--> </div> </div> <div class="col-md-6"> <div class="well well-sm well-primary"> <form class="form form-inline " role="form"> <div class="form-group"> <input type="text" class="form-control" value="" placeholder="Date" required /> </div> <div class="form-group"> <select class="form-control"> <option>Draft</option> <option>Published</option> </select> </div> <div class="form-group"> <button type="submit" class="btn btn-success btn-sm"> <span class="glyphicon glyphicon-floppy-disk"></span>Save</button> <button type="button" class="btn btn-default btn-sm"> <span class="glyphicon glyphicon-eye-open"></span>Preview</button> </div> </form> </div> </div> </div> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"><span class="glyphicon glyphicon-th-list"> </span>META DATA</a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse"> <div class="panel-body"> <div class="row"> <div class="col-md-12"> <div class="form-group"> <input type="text" class="form-control" placeholder="Title" required /> </div> <div class="form-group"> <input type="text" class="form-control" placeholder="Description" required /> </div> <div class="form-group"> <textarea class="form-control" placeholder="Keywords" required></textarea> </div> </div> </div> <div class="row"> <div class="col-md-12"> <div class="well well-sm well-primary"> <form class="form form-inline " role="form"> <div class="form-group"> <a href="http://www.jquery2dotnet.com" class="btn btn-success btn-sm"><span class="glyphicon glyphicon-floppy-disk"> </span>Save</a> </div> </form> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
.form-inline .form-group { margin-right:10px; } .well-primary { background-color: #3498db; } .well-primary { color: rgb(255, 255, 255); background-color: rgb(66, 139, 202); border-color: rgb(53, 126, 189); } .glyphicon { margin-right:5px; } .container{ margin-top:20px; } .image-preview-input { position: relative; overflow: hidden; margin: 0px; color: #333; background-color: #fff; border-color: #ccc; } .image-preview-input input[type=file] { position: absolute; top: 0; right: 0; margin: 0; padding: 0; font-size: 20px; cursor: pointer; opacity: 0; filter: alpha(opacity=0); } .image-preview-input-title { margin-left:2px; }
$(document).on('click', '#close-preview', function(){ $('.image-preview').popover('hide'); // Hover befor close the preview $('.image-preview').hover( function () { $('.image-preview').popover('show'); }, function () { $('.image-preview').popover('hide'); } ); }); $(function() { // Create the close button var closebtn = $('<button/>', { type:"button", text: 'x', id: 'close-preview', style: 'font-size: initial;', }); closebtn.attr("class","close pull-right"); // Set the popover default content $('.image-preview').popover({ trigger:'manual', html:true, title: "<strong>Preview</strong>"+$(closebtn)[0].outerHTML, content: "There's no image", placement:'bottom' }); // Clear event $('.image-preview-clear').click(function(){ $('.image-preview').attr("data-content","").popover('hide'); $('.image-preview-filename').val(""); $('.image-preview-clear').hide(); $('.image-preview-input input:file').val(""); $(".image-preview-input-title").text("Browse"); }); // Create the preview image $(".image-preview-input input:file").change(function (){ var img = $('<img/>', { id: 'dynamic', width:250, height:200 }); var file = this.files[0]; var reader = new FileReader(); // Set preview image into the popover data-content reader.onload = function (e) { $(".image-preview-input-title").text("Change"); $(".image-preview-clear").show(); $(".image-preview-filename").val(file.name); img.attr('src', e.target.result); $(".image-preview").attr("data-content",$(img)[0].outerHTML).popover("show"); } reader.readAsDataURL(file); }); });

Related: See More


Questions / Comments: