python測試開發django-41.crispy-forms設計標簽式導航菜單（TabHolder）

前言

xadmin的詳情頁面主要是用form_layout布局，學會了完全可以不用寫html代碼，也能做出很好看的頁面。
xadmin的html頁面是用的Bootstrap3框架設計的，layout布局用到的是django-crispy-forms框架，本篇詳細講下django-crispy-forms的官方文檔案例

django-crispy-forms

當我們使用xadmin后台的時候，在INSTALLED_APPS里面同時添加了xadmin和crispy_forms這2個app，xadmin已經知道了，但不知道crispy_forms這個app是干什么的

可以在百度上搜到crispy_forms，順藤摸瓜找到django-crispy-forms的github地址https://github.com/django-crispy-forms/django-crispy-forms

可以看出它是基於django-uni-form這個框架開發的，專門用於詳情頁面的布局設計，完美的支持Bootstrap前端框架。
它的設計理念是Forms have never been this crispy

更多功能介紹，查看官方文檔https://django-crispy-forms.readthedocs.io/en/latest/

Tab＆TabHolder

使用TabHolder 可以快速設計一個標簽式導航菜單，不同的標簽用Tab分開，Tab里面第一個參數是標簽的名稱，一個Tab可以設計多個Field。

TabHolder （
    Tab （'First Tab' ，
        'field_name_1' ，
        Div （'field_name_2' ）
    ），
    Tab （'Second Tab' ，
        Field （'field_name_3' ， css_class = 'extra' ）
    ）
）

標簽式導航菜單

接着前面這篇python測試開發django-39.xadmin詳情頁面布局form_layout頁面設計的基礎上，添加一個標簽式導航菜單案例。
關於導航菜單的更多的介紹可以看菜鳥教程地址http://www.runoob.com/bootstrap/bootstrap-navigation-elements.html

# adminx.py
import xadmin
from .models import ArticleDetail
from xadmin.layout import Main, TabHolder, Tab, Fieldset, Row, Col, AppendedText, Side, Field

class MoreActicl(object):
    list_display = ['title', 'body', 'auth']
    # layout布局
    form_layout = (
        Fieldset(u'',
                 Row('title', 'auth'),  # Row 表示將里面的字段作為一行顯示
                 Row('classify'),
                 css_class = 'unsort',
                 ),
        Fieldset(('正文內容'),       # Fieldset第一個參數表示區塊名稱
                 'body',
                 css_class = 'unsort',
                 ),
        TabHolder(
              Tab('body-raw',
                  Field('title', css_class="extra"),
                  Field('body'),
                  css_class = 'unsort'
                  ),
              Tab('body-json',
                  Field('body',)
                  ),
                  css_class = 'unsort',
              )
    )

xadmin.site.register(ArticleDetail,  MoreActicl)

打開之后頁面顯示效果如下圖

css_class="extra"可以將輸入框占一整行