Question

我正在研究crispy form。现在我专注于form。

现在很脆，然后在掌握了Django Admin form后，我将继续Django admin model form和views.py:。

Django 1.10
Python 3.6.0

我正在关注这些教程：
https://blog.bixly.com/awesome-forms-django-crispy-forms
http://django-crispy-forms.readthedocs.io/en/latest/layouts.html#
https://godjango.com/29-crispy-forms/

以下是我的源代码：

from django.views.generic import FormView from apps.colors.forms import PersonDetailForm class ColorStudyView(FormView): template_name = 'colors/study.html' form_class = PersonDetailForm success_url = '/'

forms.py:

from crispy_forms.bootstrap import Tab, TabHolder from crispy_forms.helper import FormHelper from crispy_forms.layout import Submit, Layout from django import forms class NoFormTagCrispyFormMixin(object): @property def helper(self): if not hasattr(self, '_helper'): self._helper = FormHelper() self._helper.form_tag = False return self._helper class PersonDetailForm(forms.Form): name = forms.CharField(max_length=100) age = forms.IntegerField(required=False) address1 = forms.CharField(max_length=50, required=False) address2 = forms.CharField(max_length=50, required=False) city = forms.CharField(max_length=50, required=False) state = forms.CharField(max_length=50, required=False) mobile = forms.CharField(max_length=32, required=False) home = forms.CharField(max_length=32, required=False) office = forms.CharField(max_length=32, required=False) twitter = forms.CharField(max_length=100, required=False) def __init__(self, *args, **kwargs): super().__init__(*args, **kwargs) self.helper = FormHelper() self.helper.form_tag = False self.helper.layout = Layout( TabHolder( Tab('Information', 'name', 'age' ), Tab('Address', 'address1', 'address2', 'city', 'state' ), Tab('Contact', 'mobile', 'home', 'office', 'twitter', ) ) ) self.helper.layout.append(Submit('submit', 'Submit'))

study.html:

{% load crispy_forms_tags %} <!DOCTYPE html> <html lang="en"> <head> <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" /> <meta charset="UTF-8"> <title>Study</title> <form action="" method="POST"> {% crispy form %} </form> </head> <body> </body> </html>

Django frontend

问题：
标签不会改变。
我想念一下吗？很抱歉非常基本的问题，但这是我Address

的第一天

这是我的照片。标签Contact和study.html不起作用。

更新 Zollie解决了我的问题。这是我的{% load staticfiles %} {% load crispy_forms_tags %} <!DOCTYPE html> <html lang="en"> <head> <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" /> <meta charset="UTF-8"> <title>Study</title> <form action="" method="POST"> {% crispy form %} </form> </head> <body> <script src="http://code.jquery.com/jquery-1.9.1.js"> </script> <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"> </script> <script type="text/javascript" src="{% static 'bootstrap-tab.js' %}"> </script> </body> </html>

/Users/el/Code/siam-sbrand/static
(siam-sbrand) Sarits-MacBook-Air-2:static el$ ls
admin           django_extensions   img
bootstrap-tab.js    file.txt        js
dist            font            rest_framework

这是我的文件系统配置

InkCanvas

Answer 1

当我第一次想要以脆弱的形式使用Tabs时，我遇到了同样的问题。不幸的是，这个软件包的文档非常薄弱。

TabHolder和Tabs无法正常工作的答案是，因为你必须在你的html模板头中包含jquery和javascript。此外，你必须下载bootstrap-tab.js并将其放入你的静态＆＃39; bootstrap子文件夹中的文件夹，即。，你还必须在你的html中包含它的路径。

因此，如果你只是在html头中包含Bootstrap或bootstrap.css是不够的。下面是一个示例：

  <head>
<script src="http://code.jquery.com/jquery-1.9.1.js">
</script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js">
</script>
<script type="text/javascript" src="{% static 'bootstrap/js/bootstrap-tab.js' %}">  </script>

Answer 2

检查以下内容：

在settings.py中，您应该有CRISPY_TEMPLATE_PACK = 'bootstrap3'
在静态文件中，您应该有一个bootstrap-tab.js

Answer 3

尽管这个问题已经解决了，但我发现还是有必要添加更多的观察结果：我遇到了这个问题并找到了另一个原因。

首先，我检查并确认已包含接受的答案中所述的.js文件。但是该标签仍然无法正常工作。

我找到了一些引导选项卡示例，例如https://mdbootstrap.com/docs/jquery/components/tabs/。我得出的结论是，要使选项卡起作用，应确保“选项卡标题”的href属性与“选项卡主体”的id属性之间存在一对一的关系。像这样：

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home"
      aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile"
      aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact"
      aria-selected="false">Contact</a>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">A Tab</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">B tab</div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">C tab</div>
</div>

注意：请注意'a'元素的href属性和'div'元素的id属性。

我做了一些实验，得出的结论是：一旦导入了相关的.js和其他文件，并且正确设置了href和id attrs，该选项卡就会起作用。

现在的问题变成了“如何使它们酥脆地设置好”。

我检查了以下文件： 1. /root/.pyenv/versions/3.7.3/lib/python3.7/site-packages/crispy_forms/bootstrap.py

class Tab(Container):
    """
    Tab object. It wraps fields in a div whose default class is "tab-pane" and
    takes a name as first argument. Example::

        Tab('tab_name', 'form_field_1', 'form_field_2', 'form_field_3')
    """
    css_class = 'tab-pane'
    link_template = '%s/layout/tab-link.html'

    def render_link(self, template_pack=TEMPLATE_PACK, **kwargs):
        """
        Render the link for the tab-pane. It must be called after render so css_class is updated
        with active if needed.
        """
        link_template = self.link_template % template_pack
        return render_to_string(link_template, {'link': self})

/root/.pyenv/versions/3.7.3/lib/python3.7/site-packages/crispy_forms/templates/bootstrap3/layout/tab-link.html

<li class="tab-pane{% if 'active' in link.css_class %} active{% endif %}"><a href="#{{ link.css_id }}" data-toggle="tab">{{ link.name|capfirst }}{% if tab.errors %}!{% endif %}</a></li>

我注意到css_id属性。我猜想，如果正确设置了“ css_id”，那么剩下的就可以用脆皮的了。我试过了。而且它就像一种魅力。

也许酥脆的文档需要一些改进。

Django脆皮表格标签

3 个答案: