JQuery аккордеон в Razor: заставить одинаковые поля появляться в разных разделах аккордеона - PullRequest
Новая
       1

JQuery аккордеон в Razor: заставить одинаковые поля появляться в разных разделах аккордеона

1 голос
/ 04 января 2012

У меня есть Razor view с несколькими полями, визуализированными из модели View, и мне нужно, чтобы одни и те же поля появлялись в разных частях аккордеона (я не хочу дублировать поля в каждом разделе). Я не уверен, что лучший способ сделать это - я помещаю поля в частичное представление и каким-то образом визуализирую / загружаю представление динамически при щелчке по секции аккордеона, или после рендеринга кода, я перемещаю / добавляю div содержащие поля или что-то еще полностью?

РЕДАКТИРОВАТЬ: Проверьте jsfiddle здесь

Код бритвы: 

<div id="accordion">
    <h3><a href="#" class="acc-section">First header</a></h3>
    <div id="div1">
        <fieldset>
            @Html.LabelFor(model => defaultStudyEvent.GroupName, "Group Name")
            @Html.TextBoxFor(model => defaultStudyEvent.TimePoints)
        </fieldset>
    </div>
    <h3><a href="#" class="acc-section">Second header</a></h3>
    <div></div>
</div>

Предоставлено HTML: 

<div id="accordion">
    <h3><a href="#" class="acc-section">First header</a></h3>
    <div id="div1">
        <fieldset id="f1">
            <label for="defaultStudyEvent_GroupName">Group Name</label>
            <input id="defaultStudyEvent_TimePoints" name="defaultStudyEvent.TimePoints" type="text" value="" />
        </fieldset>
    </div>
    <h3><a href="#" class="acc-section">Second header</a></h3>
    <div>(Move fieldset above to here when "Second header" is clicked)</div>
</div>

Я играл с различными вариантами, такими как ниже, но я не уверен, что это правильный подход: 

$(document).ready(function () {
    $('#accordion').accordion();
    $('.acc-section').click(appendFields);
});

function appendFields() {
    $('#accordion')
        .append($('#div1'))
        .accordion('destroy')
        .accordion();
}

1 Ответ

1 голос
/ 04 января 2012

Ах, теперь я понимаю проблему, основываясь на приведенных выше комментариях. Извините, если мои начальные вопросы смутили вас. :)

Я думаю, что вы на правильном пути - у меня сработало следующее:

HTML 

<div id="accordion">
    <h3 class="acc-header"><a href="#">First header</a></h3>
    <div>
        <fieldset id="input-fields">
            <label for="defaultStudyEvent_GroupName">Group Name</label>
            <input id="defaultStudyEvent_TimePoints" name="defaultStudyEvent.TimePoints" type="text" value="" />
        </fieldset>
    </div>
    <h3 class="acc-header"><a href="#">Second header</a></h3>
    <div>
    </div>
    <!-- more divs can be added -->
</div>

JQuery: 

$(document).ready(function () {
    $('#accordion').accordion();
    $('.acc-header').click(moveFields);

    function moveFields() {
        $(this).next().append($('#input-fields'));
    }
});

Обратите внимание, что я добавил свой собственный класс для .acc-header. Хотя вы могли бы использовать встроенные классы пользовательского интерфейса jQuery, использование собственного гарантирует, что оно не сломается, если новая версия пользовательского интерфейса изменит наименование класса (не очень вероятно, но все же).

Приведенное выше решение гарантирует, что вы когда-либо будете использовать только один набор полей ввода, поэтому вы не получите никаких повторяющихся почтовых данных. Отличная особенность .append () в том, что он перемещает то, что вы добавляете, поэтому вам не нужно ничего удалять потом.

Что касается "правильного подхода", я не могу сказать - но, кажется, это самый чистый способ сделать это, если вы спросите меня. Другой возможный подход - создать одинаковые поля для всех панелей аккордеона в представлении и каким-то образом отключить все, кроме тех, что находятся на активной панели. Однако для этого потребуется больше JavaScript.

...