django如何实现动态(bootstrap)模式

问题描述 投票:1回答:1

我正在尝试更改页面的交互,以便有关产品的其他信息显示在模式中,而不是单击按钮时显示/隐藏的元素。

我不确定的是使模态适应每个产品的内容。 (我不确定django首先必须在后端准备3种不同的模态 - 如果这是可能的,或者是否有更简单的方法?)

以前我有模板:

<div class="item price-2 col-md-4 col-12 text-center best-buy">
    <div class="item-inner">
      <div class="heading">
        <h3 class="title"><b>Cheapest</b></h3>
      </div>
    {% include 'components/quote_summary_item.html' with quote=first_quote %}
    </div><!--//item-inner-->
</div><!--//item-->

{%include'components / quote_detail.html'with quote = first_quote%}

quote_summary_item.html在哪里:

<div>
  <div class="quotes-summary"><img src="{{ quote.ImageUrl }}" alt=""></div>
  <p></p>
  <p >.........
  </p>
  <a class="btn btn-quote-primary" href="{% url 'users:profile %}">Select</a></div>
<div class="content">
  <p><b>Your Quote Details</b></p>
  <p>{{ quote.Name }}<br/>
    {{ quote.Type }}  <br/>
    .....
  </p>
  <button class="btn btn-cta-secondary" data-id="{{ quote.priceId }}">Info</button>
</div><!--//content-->

和quote_detail是:

<div class="quote" id="quote{{ quote.priceId }}" style="display:none">
<div >
    <p><b>About this quote:</b></p>
  {{ quote.synopsisText|safe }}
  </div>
  <div class="row">
    <div class="col">
      <table class="table">
        <thead class="til-table-head">

        <tr>
          <th>Information</th>
        </tr>
        </thead>
        <tbody>
        <tr>
          <td></td>
          <td>{{ quote.Something }}</td>
        </tr>

        <tr>
          <td>Name</td>
          <td>{{ quote.Name }}</td>
        </tr>
        <tr>
          <td></td>
          <td>{{ quote.payType }}</td>
        </tr>
       .......
        </tbody>
      </table>
    </div>
  </div>
    </div>

使用的.js是:

 <script type="text/javascript">
    $(document).ready(function () {
      $('.btn-cta-secondary').click(function (e) {
        var id = $(e.currentTarget).data('id')
        $('.quote').hide()
        $('#quote' + id).show()
      })
    })
  </script>

我已经在quotes_detail.html周围建立了一个模态模板包装器但是我不知道如何更改所需的.js以将相关的引用数据传递给类似:{% include 'components/quotes_modal.html' with quote=my_quote %}

并根据点击的按钮id传递相关报价。

django
1个回答
1
投票

有两种不错的方法可以做到这一点。如果没有太多模态,则实现多个模态,或者如果有很多模式,则使用ajax来检索内容。

没有必要有一个.js文件,因为所有必需的js都内置到bootstrap中。

使用例如按钮控制每个模态:

<button type="button" class="btn btn-cta-secondary" data-toggle="modal" data-target="#{{ quote.priceId }}" data-id="{{ quote.priceId }}">More Info</button>

然后在相关页面中包含模态模板:

{% include 'components/quote_detail.html' with quote=second_quote %}
{% include 'components/quote_detail.html' with quote=first_quote %}

components/quote_details.html

<div class="modal fade" id="{{ quote.priceId }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
 aria-hidden="true">
 .....

其余的按照bootstrap文档。

要通过ajax执行此操作,请查看https://www.abidibo.net/blog/2015/11/18/modal-django-forms-bootstrap-4/

© www.soinside.com 2019 - 2024. All rights reserved.