C#SnakeByte Ответов: 0

Каскадирование, стыковка, закрываемые панели для одностраничного приложения с MVC 5-возможно?

Эй,

я хочу создать спа-центр с MVC, где мой контент будет отображаться как частичные представления внутри панелей bootstrap, которые должны быть
- стыковка друг с другом только горизонтально
- иметь зависимость от предыдущего (левого) окна
- быть закрытым, относительно зависимости


Например, мое демо-приложение может иметь такую структуру сайта:

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


Навигация должна быть такой
- root- & gt; Страница 1 или страница 2 - & gt; выбор страницы 1 - & gt; загружается в первую панель, ориентированную левую часть экрана - & gt; выбор элемента на странице 1 (например, детали)- > страница 1.1 загружается во вторую панель, стыковка рядом с первой панелью- > решение удалить sth- & gt; страница 1.1.1 загружается в третью панель, стыковка рядом со второй панелью и так далее....

Поэтому, закрывая, например, страницу 1.1, я тоже хочу закрыть любые зависимые " окна "(страница 1.1, страница 1.1.1 и страница 1.1.1.1), и, конечно, я не могу загрузить страницу 1.1.1.1 непосредственно в свое"окно".


Итак, есть какие-нибудь идеи, как я могу использовать панели bootstrap в качестве динамических окон, которые я могу "складывать" рядом друг с другом?

Заранее спасибо!

Что я уже пробовал:

Я сделал некоторые реальные базовые настройки с помощью JS, чтобы закрыть (удалить) панель из моего поля зрения.
<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"></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>
}

0 Ответов