Динамическое добавление модальных окон Semantic UI с помощью SilverStripe

Мне трудно подключить модальный SUI к SilverStripe, чтобы генерировать их динамически.

Я хочу добиться чего-то вроде этого:

У меня есть кнопка (прикрепить события) для запуска модального окна с некоторым содержимым. Я хотел зациклить эти элементы (GridField), чтобы генерировать все динамически. Но единственное, чего я могу добиться, - это несколько модальных окон с одним и тем же «классом триггера», и не имеет значения, какую кнопку я нажал (первую, последнюю или что-то еще). У меня есть только один модальный (последний в иерархии). Без SUI решение простое — поместите «это», чтобы получить ближайший элемент, и я могу иметь столько разных модальных окон, сколько захочу, но SUI, похоже, все усложняет.

Я думаю, что лучшим решением будет сгенерировать класс/идентификатор с помощью SilverStripe и передать его в JavaScript для использования с модальным или использовать один класс для каждого модального окна и «каким-то образом сообщить», что эта кнопка запускает этот модальный режим.

В основном мне нужен один фрагмент кода для обработки многих модальных окон, а не много фрагментов для обработки многих модальных окон. Я надеюсь, что это достаточно ясно, в чем проблема.

Вот мой код:

HTML/СС

(без специальных тегов SilverStripe)

<% loop SomeName %>
    <div class="job-offers">
        <a class="ui right floated button job-application">Click here</a>
    </div>

    <div class="ui basic modal job-application">
        <div class="job-application-sheet">        
            (...)                
            <div class="job-application-sheet-content">
                <div class="ui grid">
                    (...)
                    <div class="ui center aligned container job-application-action">
                        <p>Lorem ipsum</p>
                        <button class="ui primary button">Click here</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
<% end_loop %>

JavaScript

$('.ui.basic.modal.job-application')
    .modal({
        autofocus : false,
        observeChanges: true
    })
    .modal('attach events', '.job-application', 'show');

Как вы можете видеть, класс «job-application» является триггером для модального окна, поэтому можно ли изменить его на «(это)», поэтому мне не нужно писать «конкретный» класс для каждой кнопки/модального окна. Или, может быть, есть другое/более простое решение?


modal-dialog semantic-ui dynamically-generated silverstripe
person eightythree    schedule 30.03.2016    source источник
comment
У меня такая же ситуация, вы ее решили?   -  person Sebastian Delgado    schedule 14.04.2016
comment
Здравствуйте, Себастьян, нет, извините, пока нет решения, все еще жду ответа.   -  person eightythree    schedule 14.04.2016
comment
Я решил это, позвольте мне показать вам ответ.   -  person Sebastian Delgado    schedule 15.04.2016

Ответы (2)


arrow_upward
1
arrow_downward

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

    <% @relateds_array.each.with_index do |related,i| %>


        <div class="card custom" data-id="<%=i%>">
            <%= render partial: 'my_modal', locals: {index: i} %>
        </div>

    <% end %>

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

<div class="ui modal" id="modal-<%=index%>">
  <p>blabla things inside this modal.</p>
</div>

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

$('.element_that_you_want_to_open_moda_on_click').click(function(event){
    var card_clicked = $(this).attr('data-id');

    $('#modal-' + card_clicked).modal('show');
});

Надеюсь, это было полезно для вас. Обратите внимание, что я использовал Ruby on Rails для этого примера, но поведение, которое вы должны использовать, должно быть примерно таким, независимо от того, какой фреймворк вы используете.

person Sebastian Delgado    schedule 15.04.2016
comment
Себастьян, ты мой герой :) Спасибо за твое время и отличное понимание. По вашему желанию я предоставлю фрагменты, чтобы использовать его без Ruby on Rails. - person eightythree; 24.04.2016

arrow_upward
0
arrow_downward

Ответ основан на решении Себастьяна. Я сделал несколько незначительных изменений, чтобы удовлетворить свои потребности, например, я использовал переменную ID для автоматического получения идентификатора объекта данных, который генерируется динамически.

Чтобы динамически добавить модальное окно семантического пользовательского интерфейса (SUI) в SilverStripe, сначала нужно добавить "идентификатор данных" в триггер модального окна, например:

Шаблон.ss

<a class="ui button custom-trigger" data-id="my-item-$ID">Click here</a>

затем внутри модального контейнера добавьте тег «id», например:

<div id="modal-my-item-$ID" class="ui basic modal">
(...)
</div>

Наконец в файле JavaScript:

$('.custom-trigger').click(function(event){
    var triggerItem = $(this).attr('data-id');   

    $('#modal-' + triggerItem).modal('show');
});

Я встречал проблему с автофокусом SUI, поэтому после открытия модального окна экран опускался вниз, а размещенная там кнопка подсвечивалась.

Я изменил исходный фрагмент, добавив настройки SUI:

$('.custom-trigger').click(function(event){
    var triggerItem = $(this).attr('data-id');

    $('.ui.modal')
    .modal({
      autofocus: false,
      observeChanges: true
    })

    $('#modal-' + triggerItem).modal('show');
});

Если кто-то хочет написать «триггер data-id» вручную, используя поля в CMS, то измените $ID на переменную $SomeField. Затем обычно добавьте это поле в файл .php, а в Page Controller добавьте что-то вроде этого:

public function init() {
parent::init();

Requirements::javascriptTemplate($this->ThemeDir().'/js/script.js', array(
'SomeField' => $this->SomeField

));
}

Надеюсь, это поможет кому-то.

person eightythree    schedule 24.04.2016