<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"> <div class="col-md-3"> <div class="btn btn-default btn-warning" title="Reload"><i class="glyphicon glyphicon-refresh "></i> Reload</div> <div class="btn btn-default pull-right btn-success" title="Commit the changes"><i class="glyphicon glyphicon-cloud-upload"></i> Commit</div> </div> <div class="col-md-8"> <div class="btn btn-default btn-warning" title="Reload"><i class="glyphicon glyphicon-refresh"></i> Reload</div> <div class="btn btn-default btn-success" title="Save"><i class="glyphicon glyphicon-floppy-saved"></i> Save</div> <div class="btn btn-default pull-right btn-info" title="Run"><i class="glyphicon glyphicon-play"></i> Run</div> </div> </div> <div class="row"> <div class="col-md-3"> <div class="well" style="padding: 8px;"> <ul class="nav nav-list"> <li> <div class="pull-right"> <div class="btn btn-xs small btn-default" data-component="module">+ mod</div> </div> <label class="tree-toggler nav-header"> <b> Application </b> </label> <ul class="nav nav-list tree" style="display: block;"> <li> <div class="pull-right"> <div class="btn btn-xs btn-default" data-component="class">+ cls</div> </div> <label class="tree-toggler nav-header"> Module </label> <ul class="nav nav-list tree" style="display: block;"> <li> <div class="pull-right"> <div class="btn btn-xs btn-default" data-component="action">+ act</div> </div> <label class="tree-toggler nav-header"> Class </label> <ul class="nav nav-list tree" style="display: block;"> <li> <a href="#" class=""> Action</a> </li> <li> <a href="#" class=""> Action 2</a> </li> <li> <a href="#" class=""> Action 3</a> </li> </ul> </li> <li> <div class="pull-right"> <div class="btn btn-xs btn-default" data-component="action">+ act</div> </div> <label class="tree-toggler nav-header"> Class 2 </label> <ul class="nav nav-list tree" style="display: block;"> <li> <a href="#" class=""> Action</a> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </div> </div> <div class="col-md-8"> <div class="text-xs small" id="breadcrumb-components"> <a> application </a> <a> module </a> <a> class </a> <a> action</a> </div> <div class="panel with-nav-tabs panel-default"> <div class="panel-heading"> <ul class="nav nav-tabs"> <li class="active"><a href="#tab1default" data-toggle="tab">Code</a></li> <li><a href="#tab2default" data-toggle="tab">Template</a></li> <li class="dropdown"> <a href="#" data-toggle="dropdown">Other <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#tab4default" data-toggle="tab">CSS</a></li> <li><a href="#tab5default" data-toggle="tab">Javascript</a></li> </ul> </li> </ul> </div> <div class="panel-body"> <div class="tab-content"> <div class="tab-pane fade in active" id="tab1default"> <textarea name="code" class="form-control" rows=15></textarea> </div> <div class="tab-pane fade" id="tab2default"> <textarea name="template" class="form-control" rows=15></textarea> </div> <div class="tab-pane fade" id="tab4default"> <textarea name="css" class="form-control" rows=15></textarea> </div> <div class="tab-pane fade" id="tab5default"> <textarea name="javascript" class="form-control" rows=15></textarea> </div> </div> </div> </div> </div> </div> <div id="panel-new-component" class="modal fade" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title" id="hdr-form-component">New <span id="hdr-form-new-component"></span></h4> </div> <div class="modal-body"> <form class="form-group"> <label>Component Name</label> <input type="text" name="name" id="frm-component-name" class="form-control"> <div class="clearfix"></div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-link pull-left" data-dismiss="modal">Cancel</button> <button type="button" class="btn btn-default btn-success" data-dismiss="modal">Save</button> </div> </div> </div> </div> </div>

.tree > li > label { padding: 0 10px; } .tree { padding: 0 10px; } .nav-header { display: block; padding: 3px 15px; font-size: 10px; font-weight: bold; line-height: 20px; color: #999999; /* text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);*/ text-transform: uppercase; } .nav-list>li>a, .nav-list .nav-header { margin-left: -15px; margin-right: -15px; font-size: 11px; /* text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);*/ } .nav a { text-align: left; color: navy; text-transform: uppercase; } #breadcrumb-components { height: 40px; vertical-align: middle; padding: 10px; background-color: #fff; margin: 5px; } #breadcrumb-components A { color: blue; padding: 3px; border: solid 1px gray; margin: 5px; height: 20px; }

MainApp = { init : function() { $('label.tree-toggler').click(function () { $(this).parent().children('ul.tree').toggle(300); }); $(function () { $('.tree-toggler').parent().children('ul.tree').toggle(200); }); $("*[data-component]").on("click", function() { // window.alert($(this).data("component")); $("#panel-new-component").modal(); $("#hdr-form-new-component").text($(this).data("component")); }); } } $(document).ready(function () { MainApp.init(); });