Hey,
i want to create a SPA with MVC where my content will be rendered as partial views inside bootstrap panels, that have to be
- docking on each other only horizontally
- have dependency to the previous (left) window
- be closable, regarding the dependency
For example, my demo app could have such a site structure:
root #####
#
#
page 1 ######
# #
# #
# page 1.1 ######
# #
# #
# page 1.1.1 #######
# # #
# # #
# # page 1.1.1.1
# #
# #
# page 1.1.2
#
#
page 2 ######
# #
# #
# page 2.1
#
#
page3
Navigation should be like this
-root -> page1 or page 2 -> choosing page1 -> loaded into first panel, oriented left side of the screen -> selecting an item on page 1 (e.g. details) -> page 1.1 is loaded into a second panel, docking next to the first panel -> decide to delete sth -> page 1.1.1 is loaded into a third panel, docking next to the second panel and so on....
So when closing e.g. page 1.1, i want to close any depending "windows" too (page 1.1, page 1.1.1 and page 1.1.1.1) and of course i may not load page 1.1.1.1 directly into my "Window".
So any ideas how i can use the bootstrap panels as dynamic windows, that i can "stack" next to each other?
Thanks in advance!
What I have tried:
I made some real basic settings with JS to close (remove) a panel from my view.
<div class="row">
<div class="col-md-6">
<h2>Details</h2>
<h4>Artist</h4>
<hr />
<dl class="dl-horizontal">
<dt>
@Html.DisplayNameFor(model => model.Name)
</dt>
<dd>
@Html.DisplayFor(model => model.Name)
</dd>
</dl>
<button id="edit" class="btn btn-success"><icon class="glyphicon glyphicon-edit"></icon> Edit</button>
</div>
<div class="col-md-6">
<div class="panel panel-default">
<span class="pull-right clickable" data-effect="remove">class="glyphicon glyphicon-remove"></span>
<div id="partial">
</div>
</div>
</div>
</div>
@section scripts
{
<script type="text/javascript">
$(function () {
$('#edit').click(function () {
$.get('@Url.Action("Edit", "Artists", new { id = Model.ArtistID })').success(function (data) {
$('#partial').replaceWith(data);
});
});
});
$(function () { $('.clickable').on('click', function () { var effect = $(this).data('effect'); $(this).closest('.panel')[effect](); }) })
</script>
}