在wagtail-admin中有打开模态窗口的正确方法吗?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在wagtail-admin中有打开模态窗口的正确方法吗?相关的知识,希望对你有一定的参考价值。
我试图改善我的wagtail-admin,现在我堆叠了,因为无法打开模式窗口。是的,当然,我可以创建一个带有关闭按钮的div
,但这不是正确的方法。据我所知,有一个特殊的函数(或对象)负责打开这样的窗口。
没有关于wagtail-admin的js对象结构的参考。可能有人知道,该怎么做?或者,也许我应该忘记它,仅使用普通javascript制作我的模态窗口?
答案
简短的答案是,没有使用现有Wagtail管理模式的文档记录方法。
但是,只要稍微看一下源代码,就可以利用模态工作流来实现自己的模态。 Wagtail中的方法是让服务器端模板响应由render_modal_workflow
提供。
在客户端上,功能可用render_modal_workflow
。这将调用URL异步并在响应时在模式内部呈现html内容,它期望由上述ModalWorkflow
帮助器形成的响应。
从这些基础知识出发,可以通过按钮触发器,错误处理,呈现回调以及基于模态内部值的回调来添加打开行为。
下面是使用此方法在管理员中呈现模式的一种最简单的示例。
示例
1。呈现一些带有按钮作为触发器的html内容
- 为了示例,我们将在Wagtail主页(仪表板)页面上呈现一个模态。
- 使用
ModalWorkflow
,我们可以向页面下方的面板中添加一些html。
render_modal_workflow
construct_homepage_panels
2。确保已加载模态工作流JS脚本
- 默认情况下,只有处理编辑的页面才会加载模式工作流程脚本
- 要将其添加到此特定页面,我们需要覆盖
construct_homepage_panels
模板。 - 我们还将添加一些jquery来查找具有
wagtail_hooks.py
属性的任何元素,并添加一个from django.utils.safestring import mark_safe from wagtail.core import hooks class WelcomePanel: order = 110 def render(self): return mark_safe(""" <section class="panel summary nice-padding"> <h3>Dashboard Panel Section Title</h3> <button data-modal-trigger="some-param">Open Modal</button> </section> """) @hooks.register('construct_homepage_panels') def add_another_welcome_panel(request, panels): panels.append(WelcomePanel())
侦听器,该侦听器将调用我们的wagtailadmin/home.html
template函数。该数据可以与任何其他特定数据一起传递回模态视图。
wagtailadmin/home.html
data-modal-trigger
3。创建一个视图和URL以处理模式请求
- 确保有一个
onClick
网址,我们可以从中请求模式内容 - 此网址必须转到基于
ModalWorkflow
返回响应的视图> - 可以在客户端初始化数据,并且可以对服务器端呈现的模式内容使用常规的Django模板响应
templates/wagtailadmin/home.html
% extends "wagtailadmin/home.html" % % load wagtailadmin_tags % % comment % Javascript declaration added to bring in the modal loader, by default it is only available on edit pages example of usage - wagtail/search/templates/wagtailsearch/queries/chooser_field.js % endcomment % % block extra_js % block.super <script src="% versioned_static 'wagtailadmin/js/modal-workflow.js' %"></script> <script type="text/javascript"> $(function() $('[data-modal-trigger]').on('click', function(element) /* options passed in 'opts': 'url' (required): initial 'responses' (optional): dict of callbacks to be called when the modal content calls modal.respond(callbackName, params) 'onload' (optional): dict of callbacks to be called when loading a step of the workflow. The 'step' field in the response identifies the callback to call, passing it the modal object and response data as arguments */ ModalWorkflow( onError: function(error) console.log('error', error); , url: '/admin/modal/?trigger=' + element.target.dataset.modalTrigger ); ); ); </script> % endblock %
admin/...
render_modal_workflow
4。设置模板以呈现模态内容
- 所有模块都使用相同的共享头模板,这提供了一种使它感觉一致的好方法。
views.py
from django.template.response import TemplateResponse
from wagtail.admin.modal_workflow import render_modal_workflow
def modal_view(request):
return render_modal_workflow(
request,
'base/modal.html', # html template
None, # js template
'trigger': request.GET.get('trigger'), # html template vars
json_data='some': 'data' # js template data
)
以上是关于在wagtail-admin中有打开模态窗口的正确方法吗?的主要内容,如果未能解决你的问题,请参考以下文章