使用 SilverStripe 动态添加语义 UI 模态

Question

我很难尝试将 SUI 模态与 SilverStripe 连接起来以动态生成它们。

我想实现这样的目标：

我有按钮（附加事件）来触发带有某些内容的模态。我想循环该元素 (GridField) 以动态生成所有内容。但我唯一能实现的是具有相同 "trigger class" 的多个模态，我点击哪个按钮（第一个、最后一个或其他）并不重要。我只有一个模态（层次结构中的最后一个）。没有 SUI，解决方案很简单 - 使用 "this" 来获取最近的元素，我可以根据需要拥有尽可能多的不同模态，但 SUI 似乎使事情复杂化。

我认为最好的解决方案是使用 SilverStripe 生成一个 class/id 并将其传递给 JavaScript 以与模态一起使用，或者为每个模态使用一个 class 并传递给 "somehow inform" 这个按钮触发了这个模式。

基本上我需要一个代码片段来处理许多模态，而不是很多代码片段来处理许多模态。我希望问题是什么已经足够清楚了。

这是我的代码：

HTML/SS

（没有特定的 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" class 是模态的触发器，所以可以将其更改为“（this）”所以我不必写 "specific" class 每个 button/modal。或者也许有 different/easier 解决方案？

Answer 1

首先，我为我的每个元素生成了一个数据类型属性，这些元素将在单击时显示模态，并以这种方式作为本地相同索引发送到模态：

    <% @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 的部分中，并使用我作为本地发送的索引为我的每个模态创建一个唯一的 ID，如下所示：

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

然后使用 javascript，只需获取单击元素的数据 ID 和 select 包含该数据 ID 的元素，如下所示：

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

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

希望这对您有用。请注意，对于此示例，我在 Rails 上使用了 Ruby，但是无论您使用什么框架，您应该使用的行为应该与此类似。

Answer 2

答案基于 Sebastian's 解决方案。我做了一些小调整以满足我的需要，比如我使用 ID 变量自动获取动态生成的 DataObject ID。

基本上要在 SilverStripe 中动态添加语义 UI (SUI) 模态，首先您应该在模态触发器中添加 "data-id"，例如：

Template.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');
});

如果有人想在 CMS 中使用字段手动编写 "data-id trigger"，则将 $ID 更改为 $SomeField 变量。然后通常在 .php 文件中添加该字段，并在页面控制器中添加如下内容：

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

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

));
}

希望这对某人有所帮助。

使用 SilverStripe 动态添加语义 UI 模态

Dynamically adding Semantic UI modals with SilverStripe

modal-dialog

silverstripe

semantic-ui

dynamically-generated

HTML/SS

JavaScript