""BootTree" TreeView for Bootstrap"
Bootstrap 3.3.0 Snippet by glustoBootstrap

<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-6"> <div class="panel panel-default"> <div class="panel-heading">Выберите группу пользователей или пользователя:</div> <div class="panel-body"> <ul class="treeview"> <li><a href="#">Группы и пользователи</a> <ul> <li><a href="#">Филиалы</a> <ul> <li><a href="#">Сретенский</a> <ul> <li class="active"><a href="#" style="color: blue;">Филиал № 26. Большой Сухаревский переулок, 25</a></li> <li><a href="#">Филиал № 82. Селивёрстов переулок, 10с2</a></li> <li><a href="#">Филиал № 147. 1-й Неопалимовский переулок, 16/13</a></li> </ul> </li> <li><a href="#">Плющиха</a> <ul> <li><a href="#">Филиал № 61. улица Плющиха, 37/21</a></li> <li><a href="#">Филиал № 152. улица Бурденко, 24</a></li> <li><a href="#">Филиал № 79. Пушкарёв переулок, 19</a></li> </ul> </li> <li><a href="#">Мещанский</a> <ul> <li><a href="#">Филиал № 24. улица Гиляровского, 37с1</a></li> <li><a href="#">Филиал № 63. проспект Мира, 21</a></li> <li><a href="#">Филиал № 117. проспект Мира, 26с6</a></li> </ul> </li> </ul> </li> </ul> </li> </ul> </div> </div> </div> <div class="col-md-6"> <div class="container"> <div class="row"> <div class="col-sm-6 col-md-6"> <div class="panel panel-default" style="padding: 0 16px;"> <div class="panel-body"> <form role="form" class="form-horizontal"> <div class="form-group"> <h4 style="color: blue;" id="title">Филиал № 26. Большой Сухаревский переулок, 25</h4> </div> <div class="form-group"> <input type="text" class="form-control" id="inputSubject" placeholder="Заголовок"/> </div> <div class="form-group"> <textarea class="form-control counted" name="message" placeholder="Введите сообщение" rows="5" style="margin-bottom:10px;"></textarea> <h6 class="pull-right" id="counter">10 000 символов осталось</h6> <button class="btn btn-info" type="submit">Отправить сообщение</button> </div> </form> </div> </div> </div> </div> </div> </div> </div> </div>
div.panel:first-child { margin-top:20px; } div.treeview { min-width: 100px; min-height: 100px; max-height: 256px; overflow:auto; padding: 4px; margin-bottom: 20px; color: #369; border: solid 1px; border-radius: 4px; } div.treeview ul:first-child:before { display: none; } .treeview, .treeview ul { margin:0; padding:0; list-style:none; color: #369; } .treeview ul { margin-left:1em; position:relative } .treeview ul ul { margin-left:.5em } .treeview ul:before { content:""; display:block; width:0; position:absolute; top:0; left:0; border-left:1px solid; /* creates a more theme-ready standard for the bootstrap themes */ bottom:15px; } .treeview li { margin:0; padding:0 1em; line-height:2em; font-weight:700; position:relative } .treeview ul li:before { content:""; display:block; width:10px; height:0; border-top:1px solid; margin-top:-1px; position:absolute; top:1em; left:0 } .tree-indicator { margin-right:5px; cursor:pointer; } .treeview li a { text-decoration: none; color:inherit; cursor:pointer; } .treeview li button, .treeview li button:active, .treeview li button:focus { text-decoration: none; color:inherit; border:none; background:transparent; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; outline: 0; }
/** * BootTree Treeview plugin for Bootstrap. * * Based on BootSnipp TreeView Example by Sean Wessell * URL: http://bootsnipp.com/snippets/featured/bootstrap-30-treeview * * Revised code by Leo "LeoV117" Myers * */ $.fn.extend({ treeview: function() { return this.each(function() { // Initialize the top levels; var tree = $(this); tree.addClass('treeview-tree'); tree.find('li').each(function() { var stick = $(this); }); tree.find('li').has("ul").each(function () { var branch = $(this); //li with children ul branch.prepend("<i class='tree-indicator glyphicon glyphicon-chevron-right'></i>"); branch.addClass('tree-branch'); branch.on('click', function (e) { if (this == e.target) { var icon = $(this).children('i:first'); icon.toggleClass("glyphicon-chevron-down glyphicon-chevron-right"); $(this).children().children().toggle(); } }) //branch.children().children().toggle(); /** * The following snippet of code enables the treeview to * function when a button, indicator or anchor is clicked. * * It also prevents the default function of an anchor and * a button from firing. */ branch.children('.tree-indicator, button, a').click(function(e) { branch.click(); e.preventDefault(); }); }); }); } }); /** * The following snippet of code automatically converst * any '.treeview' DOM elements into a treeview component. */ $(window).on('load', function () { $('.treeview').each(function () { var tree = $(this); tree.treeview(); }) $('.treeview a').on('click', function (e) { //alert($(this).html()) $('#title').html($(this).html()) }) })

Related: See More


Questions / Comments: